Clues of DUG
DUG Partner
Stream Panel
Heute hab ich mich also dazu entschlossen, ein eigenes Menue zu schreiben. Und hier ist das Ergebnis!
HTML Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- CSS DropDown Menue by DI4V0L0 www.dug-portal.com -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CSS DropDown Menue ohne JavaScript</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link type='text/css' rel='stylesheet' href='style.css' />
</head>
<body BGCOLOR="#333333">
<!-- ###### Start Menue ###### -->
<div class="pos">
<!-- Start Kat 1 -->
<div class="menu">Kategorie 1
<div class="menu_sub">
<div><a href="#">linkl</a></div>
<div><a href="#">link2</a></div>
<div><a href="#">link3</a></div>
<div><a href="#">link4</a></div>
</div></div>
<!-- Start Kat 2 -->
<div class="menu">Kategorie 2
<div class="menu_sub">
<div><a href="#">linkl</a></div>
<div><a href="#">link2</a></div>
<div><a href="#">link3</a></div>
<div><a href="#">link4</a></div>
</div></div>
<!-- Start Kat 3 -->
<div class="menu">Kategorie 3
<div class="menu_sub">
<div><a href="#">linkl</a></div>
<div><a href="#">link2</a></div>
<div><a href="#">link3</a></div>
<div><a href="#">link4</a></div>
</div></div>
</div>
<!-- ###### Ende Menue ###### -->
</body>
</html>
<!-- CSS DropDown Menue by DI4V0L0 www.dug-portal.com -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CSS DropDown Menue ohne JavaScript</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link type='text/css' rel='stylesheet' href='style.css' />
</head>
<body BGCOLOR="#333333">
<!-- ###### Start Menue ###### -->
<div class="pos">
<!-- Start Kat 1 -->
<div class="menu">Kategorie 1
<div class="menu_sub">
<div><a href="#">linkl</a></div>
<div><a href="#">link2</a></div>
<div><a href="#">link3</a></div>
<div><a href="#">link4</a></div>
</div></div>
<!-- Start Kat 2 -->
<div class="menu">Kategorie 2
<div class="menu_sub">
<div><a href="#">linkl</a></div>
<div><a href="#">link2</a></div>
<div><a href="#">link3</a></div>
<div><a href="#">link4</a></div>
</div></div>
<!-- Start Kat 3 -->
<div class="menu">Kategorie 3
<div class="menu_sub">
<div><a href="#">linkl</a></div>
<div><a href="#">link2</a></div>
<div><a href="#">link3</a></div>
<div><a href="#">link4</a></div>
</div></div>
</div>
<!-- ###### Ende Menue ###### -->
</body>
</html>
CSS Code
.pos {
position:absolute; /* Menue Position, Standard = Links/Oben. Für Rechts einfach ein right:[x]px; hinzufügen! [x] steht dabei für die Pixel, z.B right:8px; Weitere Positionsanpassungen: top:[x]px; (Abstand oben) left:[x]px; (Abstand links) bottom:[x]px; (Abstand unten) Auch Prozent(%) Angaben sind möglich! */
}
.menu a{
color: #ffffff; /* Link Farbe */
text-decoration: none;
}
.menu a:hover{
color: #333333; /* Link Farbe bei Mouseover */
}
.menu{
color: #ffffff; /* Text Farbe */
padding: 4px 15px;
float:left;
background-color:#FF6600; /* Menue Hintergrundfarbe */
font-family: Verdana, Sans-Sherif; /* Schriftart */
font-weight: bold;
font-size: 11px; /* Schriftgröße */
border:1px dotted #ffffff; /* Hauptmenue Border/Farbe */
margin:0px 3px 0px 3px; /* Abstand zwischen den Menues */
cursor: pointer;
}
.menu_sub{
display:none;
margin-top:4px;
}
.menu:hover .menu_sub{
display:block;
z-index:2;
}
.menu_sub div{
text-align: left; /* Ausrichtung der Links im Menue (right, left oder center) */
border-top:1px dotted #ffffff; /* Sub-Menue Border/Farbe */
padding:3px 0px 3px 0px;
}
position:absolute; /* Menue Position, Standard = Links/Oben. Für Rechts einfach ein right:[x]px; hinzufügen! [x] steht dabei für die Pixel, z.B right:8px; Weitere Positionsanpassungen: top:[x]px; (Abstand oben) left:[x]px; (Abstand links) bottom:[x]px; (Abstand unten) Auch Prozent(%) Angaben sind möglich! */
}
.menu a{
color: #ffffff; /* Link Farbe */
text-decoration: none;
}
.menu a:hover{
color: #333333; /* Link Farbe bei Mouseover */
}
.menu{
color: #ffffff; /* Text Farbe */
padding: 4px 15px;
float:left;
background-color:#FF6600; /* Menue Hintergrundfarbe */
font-family: Verdana, Sans-Sherif; /* Schriftart */
font-weight: bold;
font-size: 11px; /* Schriftgröße */
border:1px dotted #ffffff; /* Hauptmenue Border/Farbe */
margin:0px 3px 0px 3px; /* Abstand zwischen den Menues */
cursor: pointer;
}
.menu_sub{
display:none;
margin-top:4px;
}
.menu:hover .menu_sub{
display:block;
z-index:2;
}
.menu_sub div{
text-align: left; /* Ausrichtung der Links im Menue (right, left oder center) */
border-top:1px dotted #ffffff; /* Sub-Menue Border/Farbe */
padding:3px 0px 3px 0px;
}
Es lässt sich noch eine Menge einstellen, schaut euch dazu einfach die CSS Comments an, welche reichlich vorhanden sind. Das Menue funktioniert bzw. wurde getestet unter Firefox 2/3, Opera 9/10, Safari 3/4, Chrome und Internet Explorer 7/8! Im IE funktioniert es genau so wie auch in den anderen Browsern, sprich ohne extra Anpassungen für IE!
Zum testen einfach den HTML Code in eine "datei.html" geben, und den CSS Code dazu in eine "style.css"! Alles in allem sieht das ganze dann wie folgt aus:
Hinweis: Das Menue ist so aufgebaut, dass die Links bzw. die Namen der Links, im Menue nicht länger sein dürfen, als der Menue-Titel selbst! Andernfalls wird das Menue, wenn es geöffnet wird, verschoben.
Tags: css dropdown menu, dropdown no javascript, dropdown only css, dropdown menü
Loading engine...
Habe heute das ganze mal ausprobiert und funktioniert einwandfrei *g* Ich mag meine Seiten gerne ohne Javascript-Inhalte (schon weil viele Javascript einfach ausgeschaltet haben). Und mit CSS als Lösung habe ich bisher nie was vernünftiges gefunden oder hinbekommen *g*
AntwortenLöschenDas kommt mir wie gerufen =)
Hey, kann ichs mir vlt. mal ansehen, da wo du es eingebaut hast? Aus reiner Neugier! Kannst mir auch gerne über das Kontaktformular die URL schicken! (;
AntwortenLöschenWerde ich gerne machen, nur zur Zeit ist das ganze noch gar nicht Online sondern verstaubt einfach Lokal auf meinem Zweitrechner *g* Wenn ich mal nicht so Faul bin und es irgendwann mal hochlade reiche ich den Link nach, versprochen :D
AntwortenLöschenHey ich find das dingen ja echt klasse, ich hab bloß das problem das ich das Navi nicht center gesetzt bekomme hat das jemand vllt ne lösung anzubieten ?
AntwortenLöschenMeinst du die Sublinks? Einfach das "text-align: left;" in der Class ".menu_sub div" mit "text-align: center;" ersetzen.
AntwortenLöschenOder meinst du das komplette Menü? Du musst halt in die Class ".pos" ein "left: 50%;" und ein "margin-left: -200px;" reinhauen. Mit letzterem kannst du das Menü dann exakt in die Mitte positionieren.