✔ vertikales CSS Dropdown Menü

Status
Nicht offen für weitere Antworten.
S

Superdok

Erfahrenes Mitglied
So hi, ich bin gerade dabei ein schlichtes vertikales Drop Down Menü zu erstellen. Aussehen sollte es dann ungefähr so:
submenlf7.png



Einfach die Menüpunkte vertikal ausgezählt und bei Mouseover sollen diese Menüpunkte (Menü1) fett werden oder ähnliches und es sollte ein (horizontales) Drop Down Menü erscheinen (wie auf dem Bild zu sehen). Bei Mouseover von den Submenüpunkten soll einfach ein anderes Hintergrundbild erscheinen (z.B ein Dreieck oben, zentriert).

Ich denke mal im Prinzip relativ einfach. Allerdings gibts bei mir einige Probleme:
- Ich kann zwar inzwischen besser CSS als am Anfang, aber ich hab noch nie ein Drop DOwn Menü erstellt. Ein normales CSS Menü ohne Drop Down kann ich allerdings. Ich denke mein Hauptproblem ist das Submenü (und zusätzlich dazu, das dieses im Gegensatz zum "Hauptmenü"(Menü1,Menü2....) horizontal ist). Das HintergrundBild wechseln bzw. Schift fetter machen wird das kleinste Problem.
- Das Menü sollte auch im IE6 funktionieren, d.h. Javascript für den IE6 muss auch dazu. Das eigentliche Menü würde ich aber gerne in CSS machen, da ich mich dort im Gegensatz zu JS um einiges mehr auskenne.

So das wars, was mir im Moment einfällt. Ich hoffe ihr könnt mir weiterhelfen

Gruß
Dok
 
Hi,

bei Stu Nicholls' umfang- und variantenreichen Auswahl an Dropdown-Menüs (Menus - Definition List & Menus - Multi-Level CSS Only) solltest du eine geeignete Vorlage für dein Vorhaben finden.

Und das schöne daran, all diese Menüs kommen im IE6 ohne Javascript aus.
 
Danke für den Link. Ich denke das passt am besten:
http://www.cssplay.co.uk/menus/flyoutt.html

Ich hab es auch einmal nach meinen Wünschen angepasst:

zu sehen hier:

Quelltext:

HTML:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="flyout.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="flyout_ie.css" />
<![endif]-->
</head>
<body>
<div class="menu">
  <ul>
    <li><a class="hide" href="../menu/index.html">HOME</a>
      <!--[if lte IE 6]>
  <a href="../menu/index.html">DEMOS
  <table><tr><td>
  <![endif]-->
      <ul>
        <li><a href="#" title="The zero dollar ads page">News</a></li>
        <li><a href="#" title="Wrapping text around images">Newsarchive</a></li>
      </ul>
      <!--[if lte IE 6]>
   </td></tr></table>
   </a>
   <![endif]-->
    </li>
    <li><a class="hide" href="index.html">PRODUCTS</a>
      <!--[if lte IE 6]>
  <a href="index.html">MENUS
  <table><tr><td>
  <![endif]-->
      <ul>
        <li><a href="#" title="a coded list of spies">SUB1</a></li>
        <li><a href="#" title="a horizontal vertical menu">SUB2</a></li>
      </ul>
      <!--[if lte IE 6]>
  </td></tr></table>
  </a>
  <![endif]-->
    </li>
    <li><a class="hide" href="../layouts/index.html">CONTACT</a>
      <!--[if lte IE 6]>
  <a href="../layouts/index.html">LAYOUTS
  <table><tr><td>
  <![endif]-->
      <ul>
        <li><a href="#" title="a coded list of spies">SUB1</a></li>
        <li><a href="#" title="a horizontal vertical menu">SUB2</a></li>
      </ul>
      <!--[if lte IE 6]>
  </td></tr></table>
  </a>
  <![endif]-->
    </li>
    </li>
  </ul>
</div>
</body>
</html>
CSS: Jetzt nur mal die normale CSS, nicht die vom IE
Code: 
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/flyoutt.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
/* common styling */
.menu {
	font-family: arial, sans-serif;
	width:106px;
	height:60px;
	position:relative;
	margin:0;
	font-size:11px;
	margin:0 0;
}
.menu ul li a, .menu ul li a:visited {
	display:block;
	text-decoration:none;
	color:#000;
	width:104px;
	height:20px;
	text-align:left;
	line-height:19px;
	font-size:11px;
}
.menu ul {
	padding:0;
	margin:0;
	list-style-type: none;
}
.menu ul li {
	float:left;
	margin-right:1px;
	position:relative;
}
.menu ul li ul {
	display: none;
}
/* specific to non IE browsers */
.menu ul li:hover a {
	color:#000;
	font-weight: bold;
}
.menu ul li:hover ul {
	display:inline;
	margin-right:10px;
	position:absolute;
	top:0;
	left:105px;
	width:400px;
}
.menu ul li:hover ul li a.hide {
	color:#000;
}
.menu ul li:hover ul li:hover a.hide {
	width:150px;
}
.menu ul li:hover ul li ul {
	display: none;
}
.menu ul li:hover ul li a {
	display:inline;
	margin-right:10px;
	color:#000;
	width:400px;
}
.menu ul li:hover ul li a:hover {
	color:#000;
}
.menu ul li:hover ul li:hover ul {
	display:block;
	position:absolute;
	left:151px;
	top:0;
	color:#000;
}
.menu ul li:hover ul li:hover ul li a {
	display:block;
	width:200px;
	color:#000;
}
.menu ul li:hover ul li:hover ul li a:hover {
	color:#fff;
}

Folgende Probleme bleiben noch:
1.) Was die einzelnen CSS Punkte alle Bedeuten weiß ich nicht. Die, die ich durch probieren herausgefunden habe, hab ich verändert.
2.) Ich hab versucht, dass bei Mouseover die "richtigen" Menüpunkte (nicht Submenü) fett werden. Allerdings wurden jetzt auch die Submenü Punkte fett. Was ist falsch?
3.) Wie füg ich diese Querstriche "/" vor den Submenüpunkten ein (siehe Bild oben)?

4.) (Hab ich mich noch nicht mit befasst)
4.1) Was ist an dem extra IE CSS File verändert.
4.2) Was muss ich am IE CSS File alles ändern, wenn es im IE gleich ausshen soll wie in den anderen Browser. Nur kopieren und einfügen von dem jetzigen CSS File?
 
Zuletzt bearbeitet:
Superdok hat gesagt.:
Ich denke das passt am besten:
http://www.cssplay.co.uk/menus/flyoutt.html
Zum Vergrößern anklicken....
Wäre da http://www.cssplay.co.uk/menus/flyout_horizontal.html nicht passender, was die Ausrichtung der Submenüs betrifft?

Superdok hat gesagt.:
Ich hab versucht, dass bei Mouseover die "richtigen" Menüpunkte (nicht Submenü) fett werden. Allerdings wurden jetzt auch die Submenü Punkte fett. Was ist falsch?
Zum Vergrößern anklicken....
Mit diesem Selektor werden beim Überfahren der Hauptlinks die Links in den Submenüs nicht fett dargestellt:

Code: 
.menu ul li:hover ul li a {
        color:#000;
        font-weight:normal;
}

Superdok hat gesagt.:
Wie füg ich diese Querstriche "/" vor den Submenüpunkten ein (siehe Bild oben)?
Zum Vergrößern anklicken....
Beispielsweise so:

Code: 
.menu ul li span { margin-right:20px; }
Code: 
<li><span>/</span><a href="#" title="The zero dollar ads page">News</a></li>
Superdok hat gesagt.:
Was ist an dem extra IE CSS File verändert.
Was muss ich am IE CSS File alles ändern, wenn es im IE gleich ausshen soll wie in den anderen Browser. Nur kopieren und einfügen von dem jetzigen CSS File?
Zum Vergrößern anklicken....
Hast du dir das Stylesheet http://www.cssplay.co.uk/menus/css/flyout_ie.css noch nicht genauer angeschaut und in aller Ruhe mit dem anderen Stylesheet verglichen?
 
Wäre da http://www.cssplay.co.uk/menus/flyout_horizontal.html nicht passender, was die Ausrichtung der Submenüs betrifft?
Zum Vergrößern anklicken....

Oh doch natürlich, ich hab einfach nach dem erst besten gesucht und nicht weiter nachgeschaut. Na ja mein Fehler, jetzt muss ich halt die Veränderungen nochmal machen.

Wie kommt man da mit, also ich mein mit den ganzen verschiedenen CSS Titeln wie menü ul li:hover... mir ist zwar klar was ul und li und a oder so bedeuten, aber ich kann nicht sehn was jetzt das menü, das Submenü oder so sind.

Hast du dir das Stylesheet http://www.cssplay.co.uk/menus/css/flyout_ie.css noch nicht genauer angeschaut und in aller Ruhe mit dem anderen Stylesheet verglichen?
Zum Vergrößern anklicken....
Doch kurz, hab aber mit den ganzen Begriffen nichts anfangen können bzw. die noch miteinander zu vergleichen. Ich mach es aber natürlich noch

Ich meld mich morgen nochmal, wenn ich das neue Menü bearbeitet habe, da ich dafür heut abend keine Nerven mehr habe.
 
Zuletzt bearbeitet:
So, ich komm zwar erst heut Nachmittag zum bearbeiten des Menüs, aber eines wollte ich noch schnell versuchen. Wie mach ich bei "deinem" Menü ( http://www.cssplay.co.uk/menus/flyout_horizontal.html ), das du oben genannt hast (ohne Veränderungen; also mit der transparency) diese Schrägstriche "/" vor die einzelnen Submenüpunkte? Mit deiner Menthode oben geht dies nämlich nicht mehr.

Denn, ich muss aber nochmal schauen ob das besser mit dem Design passt, lass ich diesen transparenten Hintergrund (bei Mouseover sollte dieser dann aber vielleicht auch transparent sein und anstatt die Farbe zu wechseln dieses Dreick erscheinen). Ich denke das würde besser passen.

Bis nachher
Gruß
 
Für das Menü wäre eine Umstellung erforderlich:

Code: 
.menu ul li a span { margin-right:20px; }
Code: 
<li><a href="#" title="The zero dollar ads page"><span>/</span>News</a></li>
 
So k eigentlich klappt bisher alles ziemlich gut, auch das mit den "/". Als nächtes versuch ich dieses Dreieck überhalb der SubMenüpunkte.

Trotzdem noch eine Frage:
Ist es möglich, das man jeden "normalen" Menüpunkt (nicht Submenü) einzeln über CSS steuert. Also im Sinne von: der erste Menüpunkt bekommt rote Schrift bei Mouseover...der zweite ne gründe bei Mouseover. Falls ja welche Veränderungen sind dabei notwendig?
 
Superdok hat gesagt.:
Ist es möglich, das man jeden "normalen" Menüpunkt (nicht Submenü) einzeln über CSS steuert. Also im Sinne von: der erste Menüpunkt bekommt rote Schrift bei Mouseover...der zweite ne gründe bei Mouseover. Falls ja welche Veränderungen sind dabei notwendig?
Zum Vergrößern anklicken....

Code: 
<li><a class="hide" href="../menu/index.html" id="demos">DEMOS</a>

<!--[if lte IE 6]>
<a href="../menu/index.html" id="demos">DEMOS
<table><tr><td>
<![endif]-->

<ul>
<!-- SUBMENÜ -->
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="index.html" id="menus">MENUS</a>

<!--[if lte IE 6]>
<a href="index.html" id="menus">MENUS
<table><tr><td>
<![endif]-->

<ul>
<!-- SUBMENÜ -->
</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>
Code: 
#demos:hover { color:red; }
#menus:hover { color:green; }
 
So ich hab das jetzt mal angepasst, zwar noch nicht ganz fertig, aber vom Prinzip her schon. Geht alles wunderbar, außer:
(Hier zu sehen: ....

- Soweit (Fast) ist ja die CSS Datei für die modernen Browser fertig (.....). Nun kommt allerdings noch die CSS Datei für die älteren (Original: http://www.cssplay.co.uk/menus/css/flyout_h_ie.css). Nicht das ich faul wäre, aber muss ich wirklich jeden einzelnen Punkt in der CSS für moderne Browser für die andere CSS neu schreiben.
Oder kann man die CSS für moderne Browser kopieren und nur einzelelne Sachen ändern (was ich bisher gefunden habe: die Transparenz und die table Angabe am Anfang.... Was noch?)

- (weniger wichtig) Die Sache mit den verschieden Hover Farben funktioniert nicht ganz: Im Link oben sieht man, dass "Home" zwar rot wird sobald man drüberfährt, allerdings wenn man sich im Submenü von Home befindet wieder weis (wie im CSS angegeben unter der "allgemeingültigen" Regel)
Auch mein Rettungsversuch mit:
#Home, #Home:hover { color:red; }
Zum Vergrößern anklicken....
hat nicht funktioniert, da dann Home dauerhaft rot ist. Home soll aber nur rot sein, wenn man sich auf Home und im Home Submenü befindet.
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück