fixiertes Slidermenü


Hier zeige ich wie man mit einfachen Mitteln und nur unter Zuhilfenahme von CSS ein am oberen Rand fixiertes, horizontales Menü erstellen kann. Die einzelnen Menüpunkte drehen sich scheinbar vertikal um die eigene Achse wenn man mit der Maus darüber fährt.
Um das Menü in Aktion zu sehen habe ich unten ein kleines Video angehängt.

<!DOCTYPE html>
<html>
  <head>
    <title>fixiertes Slidermenu</title>
    <style type="text/css" style="display:none">
      /* fixiertes Menue ganz oben auf der Seite */
      #fixedMenubarTop
      {
        position: absolute;
        top: 0em;
        left: 0em;
        right: 0em;
        width: 100%;
        background-color: black;
        color: white;
        z-index: 10;
      }

      html>body #fixedMenubarTop
      {
        position: fixed;
        padding: 0;
      }

      /* Obere Navigation in fixiertem Bereich */
      #NavigationTop
      {
        font-size: 0.83em;
        margin: 0;
        padding: 0;
      }

      #NavigationTop ul
      {
        padding: 0;
        overflow: hidden;
        margin: 20px;
        border: 1px solid #efefef;
        -webkit-border-radius: 5px;
       -moz-border-radius: 5px;
       border-radius: 5px;
       background: #252525;
      }

      #NavigationTop li
      {
        background: #252525;
        float: left;
        height: 60px;
        overflow: hidden;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -ms-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
      }

      #NavigationTop li:hover
      {
        background: #424242;
      }

      #NavigationTop a
      {
        display: block;
        padding: 15px;
        color: white;
        text-decoration: none;
        position: relative;
        top: 0;
        line-height: 30px;
        display: block;
        -webkit-transition: margin 0.3s linear, top 0s 0.2s linear;
        -moz-transition: margin 0.3s linear, top 0s 0.2s linear;
        -ms-transition: margin 0.3s linear, top 0s 0.2s linear;
        -o-transition: margin 0.3s linear, top 0s 0.2s linear;
        transition: margin 0.3s linear, top 0s 0.2s linear;
      }

      #NavigationTop li:hover a
      {
        margin-top: 60px;
        top: -60px;
      }
    </style>
  </head>
<body>

<div id="fixedMenubarTop">
  <ul id="NavigationTop">
    <li><a href="#">Startseite</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Warenkorb</a></li>
    <li><a href="#">Impressum</a></li>
    <li><a href="#">AGB</a></li>
  </ul>
</div>

</body>
</html>

Über Enrico S.

Programmierer, Webdesigner, Grafiker, Blogger, Screencaster, Arduino- und eMobility Enthusiast.

Kommentare geschlossen.