Neko

Menü kódja
írd át a menűcímeket és a linkeket. Ha több menücímet szeretnél, akkor egy sort mindig adj hozzá az </li> mögé:
<li><a href="//aranymeli.gportal.hu/" data-clone="Főoldal">Főoldal</a></li>

<nav id="rolling-nav">
    <ul>
        <li><a href="//aranymeli.gportal.hu/" data-clone="Főoldal">Főoldal</a></li>
        <li><a href="//aranymeli.gportal.hu/gindex.php?pg=20199690" data-clone="Leírások">Segítség</a></li>
        <li><a href="//aranymeli.gportal.hu/gindex.php?pg=18012139" data-clone="Scripts">Kódok</a></li>
        <li><a href="//aranymeli.gportal.hu/gindex.php?pg=19322271" data-clone="Képek">Grafika</a></li>
    </ul>
</nav>

CSS kód

<style type="text/css">
#rolling-nav {
    text-transform:none;
    width:550px;
    margin:0px auto;
}

#rolling-nav ul {
  height:50px;
  margin:0px 0px;
  padding:0px 0px;
  overflow:hidden;
}

#rolling-nav li {
  float:left;
  display:inline;
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
}

#rolling-nav a,
#rolling-nav a:before {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    display:block;
    margin:0px 0px;
    padding:0px 30px;
    line-height:50px;
    color:#ffffff;
    text-decoration:none;
    background-color:#927A50;
    position:relative;
   -webkit-transition:all 0.3s ease-in-out;
   -moz-transition:all 0.3s ease-in-out;
   -ms-transition:all 0.3s ease-in-out;
   -o-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;
}

#rolling-nav a:before {
    content:attr(data-clone);
    position:absolute;
    top:100%;
    right:0px;
    left:0px;
    display:block;
    background-color:#F8F8F8;
    color:#333;
    border-top: 2px solid #000000;
}

#rolling-nav a:hover {
  margin-top:-50px;
  margin-bottom:1px;
}
-->
</style>

Forrás: link

Súgó Még nincs hozzászólás.

Frissítés

Csak regisztrált felhasználók írhatnak hozzászólást.