16.05.2016: Es gibt ein paar Aktualisierungen auf unserem Blog! Die Underground Suchmaschine mit welcher ihr Seiten wie die Boerse oder Mygully durchsuchen könnt, wurde komplett überarbeitet. Die XXX Stream Liste wurde aktualisiert, tote Links mit neuen ersetzt, das gleiche gilt für die MP3 Suchmaschinen und die Liste mit den Android Apps wurde ebenfalls erweitert.

CSS DropDown Menue ohne JavaScript!

Ich war auf der Suche nach einem ganz simplen DropDown Menü, auf reiner CSS Basis. Finden konnte ich aber nicht wirklich was brauchbares. Entweder bestand das Menü aus endlos langem Code, geschmückt mit Schnipsel die nur IE versteht (IE Anpassungen), oder aber das Menü funktionierte nur unter Firefox ect.

Heute hab ich mich also dazu entschlossen, ein eigenes Menü zu schreiben. Und hier ist das Ergebnis!

HTML Code
<!-- ###### CSS DropDown Menue by www.dug-portal.com ###### -->
<div class="dug-css-menu">

<!-- Start Kat 1 -->
<div class="dug-menu">Kategorie 1
<span>
<a href="#">linkl</a>
<a href="#">link2</a>
<a href="#">link3</a>
<a href="#">link4</a>
</span>
</div>

<!-- Start Kat 2 -->
<div class="dug-menu">Kategorie 2
<span>
<a href="#">linkl</a>
<a href="#">link2</a>
<a href="#">link3</a>
<a href="#">link4</a>
</span>
</div>

<!-- Start Kat 3 -->
<div class="dug-menu">Kategorie 3
<span>
<a href="#">linkl</a>
<a href="#">link2</a>
<a href="#">link3</a>
<a href="#">link4</a>
</span>
</div>

</div>
<!-- ###### CSS DropDown Menue by www.dug-portal.com ###### -->

CSS Code
.dug-css-menu {
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! */
}
.dug-menu a{
color:#fff; /* Link Farbe */
text-decoration: none;
}
.dug-menu a:hover{
color:#333; /* Link Farbe bei Mouseover */
}
.dug-menu{
color:#fff; /* Text Farbe */
padding:4px 15px;
float:left;
background:#FF6600; /* Menue Hintergrundfarbe */
font:11px Verdana, Sans-Sherif; /* Schrift */
font-weight:bold;
border:1px dotted #fff; /* Hauptmenue Border/Farbe */
margin:0px 3px 0px 3px; /* Abstand zwischen den Menues */
cursor:pointer;
}
.dug-css-menu .dug-menu:first-child {
margin-left:0;
}
.dug-css-menu .dug-menu:last-child {
margin-right:0;
}
.dug-menu span{
display:none;
margin-top:4px;
}
.dug-menu:hover span{
display:block;
z-index:2;
}
.dug-menu span a{
display:block;
text-align:left; /* Ausrichtung der Links im Menue (right, left oder center) */
border-top:1px dotted #fff; /* 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/9! Im IE funktioniert es genau so wie auch in den anderen Browsern, sprich ohne extra Anpassungen für IE! :)

Alles in allem sieht das Menü dann wie folgt aus:

Error: Image Not Found!

Hinweis: Das Menü ist so aufgebaut dass die Links bzw. die Namen der Links, im Üntermenü, nicht länger sein dürfen als die Menü-Titel selbst! Andernfalls wird das Menü, wenn es geöffnet wird, verschoben.

Update 22.12.2014: Ich habe nur ein paar nicht weiter erwähnenswerte Änderungen vorgenommen. Unter anderem habe ich die Namen der CSS-Klassen angepasst.

Tags: css dropdown menu, dropdown no javascript, dropdown only css, dropdown menü

Kommentare:

  1. 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*
    Das kommt mir wie gerufen =)

    AntwortenLöschen
  2. 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öschen
  3. Werde 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öschen
  4. Hey 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öschen
  5. Meinst du die Sublinks? Einfach das "text-align: left;" in der Class ".menu_sub div" mit "text-align: center;" ersetzen.

    Oder 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.

    AntwortenLöschen

ACHTUNG: Anonyme Kommentare werden nicht freigeschaltet! Bitte wählt aus der Dropdown-Liste "Name/URL" anstatt "Anonym". Mit "Name/URL" bleibt ihr ebenfalls anonym, jedoch kann so zwischen User A und User B unterschieden werden.

Gültige HTML-Tags: <a href="LINK">LINK TITEL</a> | <b>BOLD</b> | <i>KURSIV</i>