5202

ein Blog über technische Fragen zu Blogger

'Elastisches' Menü

von
Bewegung erzeugt auf einem Blog Aufmerksamkeit - es darf nur nicht zu zappelig wirken, dann nervt's.

Heute eine simple Idee, wie ihr ein Menü zum bewegten 'elastischen' Menü aufpeppen könnt ... je reduzierter das Layout, desto interessanter finde ich solche Effekte.

Vorneweg

Die Idee dahinter habe ich schon mal in einer anderen Skizze verwendet - jetzt war die Frage, wie das eigentlich im Detail funktioniert, deswegen eine etwas ausführlichere Erklärung.

HTML

Das Menü ist eine simple 'handelsübliche' unsortierte Liste mit Ankerelementen drin:
<ul id="elastic">
    <li>
        <a href="http://5202.blogspot.de/">Home</a>
    </li>
    <li>
         <a href="http://5202.blogspot.de/search/label/Blog">Blog</a>
    </li>
    <li>
        <a href="http://5202.blogspot.de/search/label/Skizzenbuch">Skizzenbuch</a> </li>
    <li>
           <a href="https://groups.google.com/forum/#!forum/5202">Forum</a>
    </li>
</ul>
Die HTML kommt in ein HTML/Java Gadget.

CSS

Das spannende ist die CSS ... wir geben dem Menü zuerst a bisserl Style:
#elastic li{
  display: inline-block
}
#elastic li a  {
  text-decoration: none;
  display: inline-block;
  padding: 8px 12px;
  font-size: 19px;
  margin: 0 2px;
  background: #999;
  text-align: center;
  color: #111;
}
Mit der Eigenschaft display: inline-block sparen wir uns das 'floaten' nach rechts. Ansonsten geben wir den Tabs eine Schriftgröße (19px), Schriftfarbe (#111), eine Hintergrundfarbe (#999), einen Innenrand (padding) und einen Abstand zwischen den Tabs (margin).

Jetzt kommt der Trick - die einzelnen Tabs bekommen eine definierte Breite:
#elastic li a  {
  text-decoration: none;
  display: inline-block;
  padding: 8px 12px;
  font-size: 19px;
  margin: 0 2px;
  background: #999;
  text-align: center;
  color: #111;
  width: 135px
}
Die Breite muss logischerweise größer sein als der größte Tab ... je nachdem, wie ihr eure Tabs benennt, müsst ihr den Wert also anpassen.

Als letztes legen wir noch eine Transition drauf - beachtet die Vendor-Prefixe:
#elastic li a  {
  text-decoration: none;
  display: inline-block;
  padding: 8px 12px;
  font-size: 19px;
  margin: 0 2px;
  background: #999;
  text-align: center;
  color: #111;
  width: 135px;
   -webkit-transition:  all .3s;
       -moz-transition: all .3s;
        -ms-transition: all .3s;
         -o-transition: all .3s;
            transition: all .3s;
}
Hover
Nun die Pointe, den Hover - dort geben wir eine neue (größere) Breite:
#elastic li a:hover {
  background:#111;
  color: #fff;
  width: 240px;
  -webkit-transition:  all .3s;
      -moz-transition: all .3s;
       -ms-transition: all .3s;
        -o-transition: all .3s;
           transition: all .3s;
}
Beim Hovern bekommt das Menü nun also eine neuen Breite und wird dadurch 'elastisch' ... Fertig!

Fragen, Anmerkungen

Zu kompliziert, ihr versteht nur Bahnhof? Wenn's Fragen oder Anmerkungen gibt - dazu sind die Kommentare da!