TIPS
by
NETtMAN

Akkordeon - Menue aus nur CSS

Aus nur CSS ein Akkordeon - Menü. An allen erdenklichen Positionen sind Hyper - Link´s möglich. Bei Klick auf eine der Kategorien bleibt dieses geöffnet, bis etwas anderes geklickt wird. Bei überfahren mit der PC - Maus klappt sozusagen eine Voransicht aus.

Dieses Pull - down - akkordeon - Menü ist extrem flexibel und kann leicht angepasst werden. Listenpunkte, die zuvor versteckt werden sollen, sind keine vorgesehen. Allein : Label´s mit variabler Höhe ( je nachdem ob es geklickt wurde oder nicht).

Auf diese Weise lassen sich bestens auch große Kataloge übersichtlich präsentieren. Das Beispiel zeigt eine von vielen Darstellungsarten.

Wie gewohnt ist unter dem funtionierendem Beispiel der HTML - / CSS - CODE zum Zwecke leichtem kopierens angezeigt.



<einband><input id="n1" /><label for="n1" class="uebers"> <center>Spezies <a href="">Übersicht</a></center>Säugetiere<br>Fische<br>Vögel<br>Amphibien <a href="">Mini</a> / <a href="">Maxi</a><br>Insekten <a href="">Unter Tage</a></label><input id="n2" /><label for="n2" class="uebers"> <center>Gebiete <a href="">Geologie</a></center><br>Gewässer<br>Salzgewässer<br>Gebirge<br>Hochgebirge<br>Flachland<br>Täler<br>Wüsten<br>Polar<br>Luft - Fern<br>Luft - Nah</label><input id="n3" /><label for="n3" class="uebers"> <center>Haltung <a href="">-s-arten</a></center><br>Wild<br>Nationalparks<br>Zoos<br>Privat</label><input id="n4" /><label for="n4" class="uebers"> <center>Nahrung <a href="">-s-arten</a></center><hr>Vegan <a href="">Boden</a> <a href="">Luft</a><hr>Vegetarisch<hr>Fleisch<br>Ob die Beute größer sein kann als das Jagdtier wird mit ++ gekennzeichnet. <br>Ob die Beute aus Insekten besteht / bestehen kann wird mit I+ / I- vermerkt. Ob <a href="">ausschließlich</a> fleischliche Ernährung wird mit ### gekennzeichnet. </label></einband><style type="text/css">einband {position:relative;top:20px;left:20px;display:inline-block;background-color:whitesmoke;color:gray;border-bottom:2px solid #789;border-right:2px solid #678;border-radius:21px;}#n1, #n2, #n3, #n4, #n5, #n6 {border:0px;margin-left:10px;height:0px;width:0px;}.uebers {position:relative;width:180px;height:30px;line-height:30px;padding:4px;margin-top:-16px;display:block;border-radius:17px;overflow:hidden;}.uebers a {color:gray;background-color:transparent !important;border:0 !important;border-radius:0 !important;}.uebers center {font-variant:small-caps;}input:focus+label.uebers {height:auto;overflow:visible;color:yellow;background-color:lightgreen;}input:focus+label.uebers a {color:yellow;}label.uebers:hover {height:auto;overflow:visible;color:yellow;background-color:lightgreen;}label.uebers:hover a {color:yellow;}label.uebers a:hover {color:green;}</style>
1.7.16 22:01
 


bisher 0 Kommentar(e)     TrackBack-URL

Name:
Email:
Website:
E-Mail bei weiteren Kommentaren
Informationen speichern (Cookie)



 Smileys einfügen
Myblog.de website reputation  Seitenreport - Die SEO und Website Analyse  Quality monitored by qualidator.com   Daisypath Friendship tickers OpenOffice

 responsive menu
 rauf
  runter