Sura 1 Artworks

Acrylmalerei, Mischtechniken, Webdesign

Hidden Menues: versteckte Menüs nur mit CSS gestalten

Posted by sura1 - 10. Juli 2008

Hidden Menues (horizontal slide):

Wie Sie mit ungeordneten Listen ein verstecktes Menü (versteckte Links) nur mit HTML und ein wenig CSS gestalten.

alle Beispieldateien: 13,3KB zip-Datei

(bitte Button oder Link anklicken!)

Ein ungeordnete Liste wird durch einige CSS-Tricks optisch so aufgewertet, dass der Betrachter diese auf den ersten Blick nicht erkennen kann. Fahren Sie mit der Maus über die Grafik – und Sie werden das Geheimnis entdecken!

Ganz sicher werden Sie sich fragen, was ich mich dieser Aussage eigentlich meine. Um Sie nicht weiter auf die Folter zu spannen, möchte ich Ihnen hier das fertige Beispiel (Version grün) vorstellen (bitte Screenshot oder Vorschau anklicken!):

Vorschau

HTML-Quellcode:

Dem <body>-tag habe ich die id=“startseite“ zugeteilt, um das Beispiel mittig auf der Seite einrichten zu können.

Die ungeordnete Liste <ul> wurde von mir mit der Klasse „hide“ ausgezeichnet.

Die Hyperlinks in den Listenelementen bezeichne ich mit den Klassen „s1-s5“ und werden weiter mit den HTML-Elementen <span> und <b> formatiert.

Der Quellcode sieht wie folgt aus:

</head>
<body id=“startseite“>

<ul class=“hide“>

<li><a href=“http://www.bencosweb.com/franz/karteireiter_yellow.html&#8220;
title=“karteireiter_yellow“ class=“s1″><span><b>Blindtext 1</b><p>Überall dieselbe alte Leier.
Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im
Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu
diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«,
freue ich mich</p></span></a></li>

<li><a href=“http://www.bencosweb.com/franz/karteireiter_red.html&#8220;
title=“karteireiter_red“ class=“s2″><span><b>Blindtext 2</b><p>Zwei flinke
Boxer jagen die quirlige Eva und ihren Mops durch Sylt. Franz jagt im komplett
verwahrlosten Taxi quer durch Bayern. Zwölf Boxkämpfer jagen Viktor quer über den
großen Sylter Deich. Vogel Quax zwickt Johnys Pferd Bim. Sylvia wagt quick den Jux
bei Pforzheim. Polyfon zwitschernd aßen Mäxchens Vögel Rüben,</p></span></a></li>

<li><a href=“http://www.bencosweb.com/franz/karteireiter_blue.html&#8220;
title=“karteireiter_blue“ class=“s3″><span><b>Blindtext 3</b><p>Auch gibt es niemanden,
der den Schmerz an sich liebt, sucht oder wünscht, nur, weil er Schmerz ist, es sei denn,
es kommt zu zufälligen Umständen, in denen Mühen und Schmerz ihm große Freude bereiten
können. Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender
körperlicher</p></span></a></li>

<li><a href=“http://www.bencosweb.com/franz/karteireiter_green.html&#8220;
title=“karteireiter_green“ class=“s4″><span><b>Blindtext 4</b><p>Dies ist ein Typoblindtext.
An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten – man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The</p></span></a></li>

<li><a href=“http://www.bencosweb.com/franz/karteireiter_orange.html&#8220;
title=“karteireiter_orange“ class=“s5″><span><b>Blindtext 5</b><p>Nam nibh velit, egestas vel,ornare sed, faucibus non, turpis. Phasellus aliquam. Mauris eget nibh. Donec tristique
rutrum eros. Nullam non ipsum nec neque ornare ultrices. Duis elit urna, blandit ut,
porttitor quis, ornare in, purus.Nam nibh velit, egestas vel,
ornare sed, faucibus non, turpis. Phasellus aliquam. Mauris eget nibh. Donec tristique
rutrum eros. Nullam non ipsum nec neque ornare ultrices. Duis elit urna, blandit ut,
porttitor quis, ornare in, purus.</p></span></a></li>

</ul>

<div id=“explane“>

<h3>Erläuterung: Versteckte(s) Menü/Linkliste</h3>
<p>Ein ungeordnete Liste wird durch einige CSS-Tricks optisch
so aufgewertet,dass der Betrachter diese auf den ersten Blick
nicht erkennen kann. Fahren Sie mit der Maus über die Grafik –
und Sie werden das Geheimnis entdecken!</p>
</div>

</body>

Als Linkziel in den Hyperlinks wurden von mir meine Karteireiter-Beispiele eingesetzt (siehe Artikel: Navigationsmenüs in Registeroptik vom 6. Juli 2008; zu finden unter Tutorials oder XHTML/CSS Beispiele).

CSS-Beispielcode:

#startseite { width: 395px;
margin: 50px auto;
background-color: #EFEFEF;
}

ul.hide { width: 395px;
height: 280px;
margin: 0;
padding: 0;
background: #efefef;
}

ul.hide li { display: inline;
margin: 0;
padding: 0;
}

ul.hide li a { display: block;
height: 280px;
width: 18px;
border-right: 1px solid #f6f6f6;
float: left;
font-size: 14px;
outline: none;
text-decoration: none;
}

a.s1 {background-color: #042200; color: #c1d301; font-weight: bold; }
a.s2 {background-color: #083500; color: #c1d301; font-weight: bold; }
a.s3 {background-color: #0e6a00; color: #c1d301; font-weight: bold; }
a.s4 {background-color: #76ab01; color: #042200; font-weight: bold; }
a.s5 {background-color: #c1d301; color: #042200; font-weight: bold; }

ul.hide li a span { display: none;
padding: 10px;
text-align: left;
}
ul.hide li a span b { display: block;
margin-top: 10px;
}
ul.hide li a:hover { width: 300px; }
ul.hide li a:hover span { display: block; }
#explane { color: #000;
background-color: #AFAFAF;
margin-top: 10px;
padding: 5px;
}
h3 { padding: 0;
margin: 0;
}

Erläuterungen zu den CSS-Formatierungen:

1. #startseite:

#startseite { width: 395px;
margin: 50px auto;
background-color: #EFEFEF;
}

Der <body> wird mit der Hintergrundfarbe #efefef ausgestattet; durch den margin von 50px auto habe ich die ungeordnete Liste in der Mitte der Webseite angeordnet. Die Breite von 395 px ist ident mit der Breite der ungeordneten Liste <ul>.

2. ul.hide:

ul.hide { width: 395px;
height: 280px;
margin: 0;
padding: 0;
background: #efefef;
}
ul.hide li { display: inline;
margin: 0;
padding: 0;
}
ul.hide li a { display: block;
height: 280px;
width: 18px;
border-right: 1px solid #f6f6f6;
float: left;
font-size: 14px;
outline: none;
text-decoration: none;
}

Die Breite von ul.hide ist wie im body 395 px; die Höhe beträgt 280 px; beide Angaben können Sie je nach Bedarf ändern und so die Größe der COLORLIST (COLORMENUE) an ihre Gegebenheiten anpassen. Die Hintergrundfarbe ist auch hier mit #efefef festgelegt und somit an den body angepasst.

Durch das display:inline von ul.hide li werden die Listenelemente nebeneinander angeordnet (normalerweise stehen sie untereinander, da sie Blockelemente sind). Mit der CSS-Eigenschaft display kann die Art der Anzeige geändert werden.

Die Hyperlinks in den Listenelementen werden über die Formatierung ul.hide li a bearbeitet. Die Breite beträgt 18px, die Höhe muß notwendigerweise 280 px betragen. Die Listenelemente erhalten einen rechten Rand von 1px mit der Farbe #f6f6f6. Durch den CSS-Befehl float: left werden die den Hyperlinks zugeordneten Farbstreifen auf der linken Seite des Beispieles angeordnet. Wenn Sie diese mit dem Befehl float:right ausstatten, sind die Farbstreifen auf der rechten Seite des Beispiele vorzufinden.

Wenn Sie wie hier die Hintergrund-Farbe ändern, sieht das Musterbeispiel danach wie folgt aus (auf Vorschau oder Grafik klicken!):

Vorschau

3. as1- as5:

a.s1 {background-color: #042200; color: #c1d301; font-weight: bold; }
a.s2 {background-color: #083500; color: #c1d301; font-weight: bold; }
a.s3 {background-color: #0e6a00; color: #c1d301; font-weight: bold; }
a.s4 {background-color: #76ab01; color: #042200; font-weight: bold; }
a.s5 {background-color: #c1d301; color: #042200; font-weight: bold; }

Die Hintergrundfarbe beginnt mit Dunkelgrün (#042200) und endet bei einem mitteleren Gelbgrün (#c1d301). Die Schriftfarbe wurde danach dem Hintergrund angepasst und mit dem CSS-Befehl font-weight: bold ausgezeichnet.

4. ul.hide li a span und ul.hide li a:hover:

ul.hide li a span { display: none;
padding: 10px;
text-align: left;
}
ul.hide li a span b { display: block;
margin-top: 10px;
}
ul.hide li a:hover { width: 300px; }
ul.hide li a:hover span { display: block; }

Durch die Formatierung der Listenelemente mit den Befehlen a span, a span b, a:hover und a:hover span ist das versteckte Menü (Linkliste) grundsätzlich fertig.

5. #explane und h3:

#explane { color: #000;
background-color: #AFAFAF;
margin-top: 10px;
padding: 5px;
}
h3 { padding: 0;
margin: 0;
}

#explane und h3 beziehen sich nur auf die Erläuterung im fertigen Beispiel und haben mit der ungeordneten LIste eigentlich nichts zu tun. Hier werden für das div #explane Innenabstände von 5px und ein margin-top (Außenabstand von oben) von 10px festgelegt. Daneben habe ich für h3 alle Innen- und Außenabstände auf Null gesetzt und der div-Box eine entsprechende Hintergrundfarbe verpasst. Die Schriftfarbe ist #000 (schwarz).

Vorschau aller Farbvariationen:

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

 
%d Bloggern gefällt das: