✔ Hilfe bei CSS-Dropdown Anpassung/Erstellung

mlaukel · 16. Mai 2008

Hallo zusammen !
Habe folgendes CSS Dropdown Menü gefunden: http://www.cssplay.co.uk/menus/final_drop2.html
Dieses finde ich sehr ansprechend & attraktiv da es völlig ohne JavaScript auskommt. Ich bekomme es aber einfach nicht auf meine Website angepasst. Wäre nett wenn jemand von den Profis hier helfen könnte.

Folgende Spezifikationen soll es haben:
Gesambreite: 775 Pixel
Gesamthöhe: 35 Pixel
Hintergrundfarbe: #d9e3eb
Hoverfarbe: #5a8ec6
Textfarbe: schwarz
Hover-Textfarbe: weiß
Schriftart: Verdana, Arial, Helvetica, sans-serif
Textgröße: 14 Pixel

Benötige nur 2 Level. Folgende Hauptpunkte:
Punkt1
Punkt2 --> Unterpunkt 2a, Unterpunkt 2b, Unterpunkt 2c
Punkt3 --> Unterpunkt 3a, Unterpunkt 3b
Punkt4 --> Unterpunkt 4a, Unterpunkt 4b
Punkt5 --> Unterpunkt 5a, Unterpunkt 5b, Unterpunkt 5c
Punkt6

Kann auch so benannt, das krieg später selbst hin.

Das Stylesheet:

Code:

<style type="text/css">
/* ================================================================ 
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/final_drop2.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.
=================================================================== */
/* style the outer div to give it width */
.menu {
width:750px; 
font-size:0.85em;
padding-bottom:200px;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}
.menu ul ul {
width:150px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
width:150px;
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:11px;
text-decoration:none; 
color:#fff; 
width:139px; 
height:30px; 
border:1px solid #fff; 
border-width:1px 1px 0 0; 
background:#758279; 
padding-left:10px; 
line-height:29px;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:150px;
w\idth:139px;
}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:#949e7c;
}
/* style the second level hover */
.menu ul ul a.drop:hover{
background:#c9ba65;
}
.menu ul ul :hover > a.drop {
background:#c9ba65;
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
background:#e2dfa8;
}
/* style the third level hover */
.menu ul ul ul a:hover {
background:#b2ab9b;
}
.menu ul ul ul :hover > a {
background:#b2ab9b;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:31px;
left:0; 
width:150px;
}
/* another hack for IE5.5 */
* html .menu ul ul {
top:30px;
t\op:31px;
}

/* position the third level flyout menu */
.menu ul ul ul{
left:150px; 
top:0;
width:150px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-150px;
}

/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#d4d8bd; 
color:#000; 
height:auto; 
line-height:1em; 
padding:5px 10px; 
width:129px
/* yet another hack for IE5.5 */
}
* html .menu ul ul a{
width:150px;
w\idth:129px;
}


/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#fff; 
background:#949e7c;
}
.menu :hover > a, .menu ul ul :hover > a {
color:#fff;
background:#949e7c;
}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible; 
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ 
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul { 
visibility:visible;
}
</style>

Der HTML-Code:

Code:

<div class="menu">
<ul>
<li><a href="../menu/index.html">DEMOS<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars advertising page</a></li>
	<li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text around images</a></li>
	<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
	<li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>

	<li><a class="drop" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click with no borders<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul>
			<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>
			<li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li>
			<li><a href="#nogo">FLYOUT third level »<!--[if IE 7]><!--></a><!--<![endif]-->
			<!--[if lte IE 6]><table><tr><td><![endif]-->

				<ul>
					<li><a href="#nogo">Third level-1</a></li>
					<li><a href="#nogo">Third level-2</a></li>
					<li><a href="#nogo">Third level-3</a></li>
					<li><a href="#nogo">Third level-4</a></li>
				</ul>
			<!--[if lte IE 6]></td></tr></table></a><![endif]-->

			</li>
			<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li class="upone"><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>
	<li><a href="../menu/old_master.html" title="Image Map for detailed information">image map for detailed information</a></li>

	<li><a href="../menu/bodies.html" title="fun with background images">fun with background images</a></li>
	<li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>
	<li><a href="../menu/em_images.html" title="em size images compared">em image sizes compared</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>

<li><a href="../boxes/index.html">BOXES<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->

	<ul>
	<li><a href="spies.html" title="a coded list of spies">a coded list of spies</a></li>
	<li><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></li>
	<li><a href="expand.html" title="an enlarging unordered list">enlarging unordered list</a></li>
	<li><a href="enlarge.html" title="an unordered list with link images">link images</a></li>
	<li><a href="cross.html" title="non-rectangular links">non-rectangular</a></li>

	<li><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></li>
	<li><a href="circles.html" title="circular links">circular links</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../mozilla/index.html">MOZILLA<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></li>

	<li><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></li>
	<li><a href="../mozilla/content.html" title="Using content:">content:</a></li>
	<li><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></li>
	<li><a href="../mozilla/rainbow.html" title="I can build a rainbow">I can build a rainbow with transparent borders</a></li>
	<li><a href="../mozilla/snooker.html" title="Snooker cue">a snooker cue using border art</a></li>
	<li><a href="../mozilla/target.html" title="Target Practise">target practise</a></li>

	<li><a href="../mozilla/splittext.html" title="Two tone headings">two tone headings</a></li>
	<li><a href="../mozilla/shadow_text.html" title="Shadow text">shadow text</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../ie/index.html">EXPLORER<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="../ie/exampleone.html" title="Example one">the first example for Internet Explorer</a></li>

	<li><a href="../ie/weft.html" title="Weft fonts">weft fonts</a></li>
	<li><a href="../ie/exampletwo.html" title="Vertical align">vertically aligning text</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="../opacity/index.html">OPACITY<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
	<li><a href="../opacity/colours.html" title="colour wheel">a colour wheel using opaque colours</a></li>

	<li><a href="../opacity/picturemenu.html" title="a menu using opacity">a menu using opacity</a></li>
	<li><a href="../opacity/png.html" title="partial opacity">partial opacity</a></li>
	<li><a href="../opacity/png2.html" title="partial opacity II">partial opacity II</a></li>
	<li><a class="drop" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="left">
			<li><a href="../menu/form.html" title="Styling forms">styled form</a></li>

			<li><a href="../menu/nodots.html" title="Removing active/focus borders">removing active/focus borders</a></li>
			<li><a href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click</a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>

Das ist so verschachtelt, das ich als CSS-Neuling nicht ganz durchblicke. Ich hoffe mir kann wer helfen. Danke schon mal.

Gruß
mlaukel

Maik · 16. Mai 2008

Hi,

die Passagen mit den gewünschten Änderungen / Erweiterungen sind hier fett markiert:

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/final_drop2.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.
=================================================================== */
/* style the outer div to give it width */
.menu {
width:750px;
font-size:0.85em;
padding-bottom:200px;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}
.menu ul ul {
width:150px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
width:150px;
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-decoration:none;
color:#000;
width:139px;
height:35px;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#d9e3eb;
padding-left:10px;
line-height:34px;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:150px;
w\idth:139px;
}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:#d9e3eb;
}
/* style the second level hover */
.menu ul ul a.drop:hover{
background:#5a8ec6;
}
.menu ul ul :hover > a.drop {
background:#5a8ec6;
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
background:#d9e3eb;
}
/* style the third level hover */
.menu ul ul ul a:hover {
background:#5a8ec6;
}
.menu ul ul ul :hover > a {
background:#5a8ec6;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:36px;
left:0;
width:150px;
}
/* another hack for IE5.5 */
* html .menu ul ul {
top:35px;
t\op:36px;
}

/* position the third level flyout menu */
.menu ul ul ul{
left:150px;
top:0;
width:150px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-150px;
}

/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#d9e3eb;
color:#000;
height:auto;
line-height:1em;
padding:5px 10px;
width:129px
/* yet another hack for IE5.5 */
}
* html .menu ul ul a{
width:150px;
w\idth:129px;
}


/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#fff;
background:#5a8ec6;
}
.menu :hover > a, .menu ul ul :hover > a {
color:#fff;
background:#5a8ec6;
}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{
visibility:visible;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {
visibility:visible;
}

Was die gewünschte Gesamtbreite des Menüs betrifft, ist die Anzahl der Menüpunkte in der ersten Menüebene ausschlaggebend, da in den Listenelementen und -punkten, sowie den Links die Einzelbreite festgelegt ist - dies sind die folgenden Selektoren:

Code:

.menu {
width:750px;
font-size:0.85em;
padding-bottom:200px;
}
.menu ul ul {
width:150px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
width:150px;
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-decoration:none;
color:#000;
width:139px;
height:35px;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#d9e3eb;
padding-left:10px;
line-height:34px;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:150px;
w\idth:139px;
}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:36px;
left:0;
width:150px;
}
/* position the third level flyout menu */
.menu ul ul ul{
left:150px;
top:0;
width:150px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-150px;
}
/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#d9e3eb;
color:#000;
height:auto;
line-height:1em;
padding:5px 10px;
width:129px
/* yet another hack for IE5.5 */
}
* html .menu ul ul a{
width:150px;
w\idth:129px;
}

Wenn es bei den fünf Menüpunkten bleibt, müssen lediglich bei allen width- und left-Deklarationen 5px hinzugegeben werden - also:

Code:

.menu {
width:775px; /* gewünschte Gesamtbreite */
font-size:0.85em;
padding-bottom:200px;
}
.menu ul ul {
width:155px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
width:155px;
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-decoration:none;
color:#000;
width:144px;
height:35px;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#d9e3eb;
padding-left:10px;
line-height:34px;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:155px;
w\idth:144px;
}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:36px;
left:0;
width:155px;
}
/* position the third level flyout menu */
.menu ul ul ul{
left:155px;
top:0;
width:155px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-155px;
}
/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#d9e3eb;
color:#000;
height:auto;
line-height:1em;
padding:5px 10px;
width:134px
/* yet another hack for IE5.5 */
}
* html .menu ul ul a{
width:155px;
w\idth:134px;
}

mlaukel · 17. Mai 2008

Erstmal herzlichen Dank !

Aber wie ich in meinem Beitrag schrieb sind 6 Menüpunkte mit Menügesamtbreite 775 Pixel.

Wie mach ich das ?

775 / 6 = 129,166
d.h. es wär besser 774 Pixel zu wählen da:
774 / 6 = 129

das restliche 1 Pixel kann ich im zugeteilten css bereich mit der Hintergrundfarbe füllen.

D.h. ich trage überall wo jetzt 150 px Einzelbreite eingetragen sind 129 ein und ändere die Gesamtbreite auf 774.

Nur wie passe ich die anderen Breiten an, folgende:
/* style the links for the top level */
.menu a, .menu a:visited {
.......
width:144px;
.....

/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:155px;
w\idth:144px;
}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
.......
width:134px /* yet another hack for IE5.5 */
......
}

* html .menu ul ul a{
width:155px;
w\idth:134px;
}

Noch so eine schnelle Hilfe wär klasse. Danke !

Maik · 17. Mai 2008

Dann ermittel einfach die Differenz dieser beiden width-Deklaration, die sich aus dem CSS-Boxmodell ergibt:

Code:

.menu li {
float:left;
width:150px;
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-decoration:none;
color:#000;
width:139px;
height:35px;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#d9e3eb;
padding-left:10px;
line-height:34px;
}

mlaukel · 17. Mai 2008

Ok, das habe ich hinbekommen.

Jetzt hab ich 6 Menüpunkte mit der gewünschten Gesamtbreite.

Da ich aber kein Third Level Menü brauche, welche stylesheet Passagen kann ich da bedenkenlos löschen ?

Und letzte Frage:
Das aufgehende Dropdown müsste breiter als nun 129 Pixel sein. In meinem bisherigen JavaScript CSS Dropdown habe ich 215 Pixel dafür eingestellt. Wo stell ich das ein ?

Entschuldige bitte wenn das für dich blöde Fragen sind. Aber dank dir komme ich immer mehr dahinter wie das mit CSS geht.

Danke dir !

P.S.: Das Menü will ich in meinen Wrapper einbauen, vorgesehen: 775 x 35 Pixel. Es darf also links, rechts, unten und oben keine Abstände sein. Funktioniert das so ?

Maik · 17. Mai 2008

Wenn die Submenüs breiter als die Hauptmenüpunkte sein sollen, solltest du vielleicht auf http://www.cssplay.co.uk/menus/drop_definition4.html umsatteln.

mlaukel · 17. Mai 2008

Jetzt behalt ich das so, beim von dir vorgeschlagenen müsste ich ja alles neu machen. Also bitte sag mir wie ich das folgende im jetzigen Menü verändern kann.

Danke !

Maik · 17. Mai 2008

Code:

.menu ul ul {
width:215px;
}

.menu ul ul li {
float:left;
width:215px;
position:relative;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:36px;
left:0;
width:215px;
}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#d9e3eb;
color:#000;
height:auto;
line-height:1em;
padding:5px 10px;
width:215px
/* yet another hack for IE5.5 */
}
* html .menu ul ul a{
width:215px;
w\idth:194px;
}

Alle Selektoren, in denen zuvor im Kommentar etwas mit "third level" erwähnt wird, kannst du aus dem Stylesheet entfernen.

mlaukel · 17. Mai 2008

Wie geil, ein super klasse Service hier. Ich bedanke mich für all deine Mühe.

Zum Abschluss des Threads nur noch eine Sache:
Das Menü will ich in meinen Wrapper einbauen, vorgesehen: 775 x 35 Pixel. Es darf also links, rechts, unten und oben keine Abstände sein. Funktioniert das so ?

Darauf hast du leider noch nicht geantwortet.

Maik · 17. Mai 2008

mlaukel hat gesagt.:
Zum Abschluss des Threads nur noch eine Sache:
Das Menü will ich in meinen Wrapper einbauen, vorgesehen: 775 x 35 Pixel. Es darf also links, rechts, unten und oben keine Abstände sein. Funktioniert das so ?

Ich wüsste jetzt nicht, was daran nicht funktionieren soll. Hast du es nicht einfach mal überprüft?

Code:

.menu {
...
...
padding-bottom:200px;
}

muss natürlich auf null gesetzt, oder diese Deklaration komplett entfernt werden, damit es nach unten keinen Abstand gibt.

✔ Hilfe bei CSS-Dropdown Anpassung/Erstellung

mlaukel

Maik

mlaukel

Maik

mlaukel

Maik

mlaukel

Maik

mlaukel

Maik

Neue Beiträge