Javascript kód
A .js fájl innen letölthető.
Letöltés után töltsd fel a tárhelyedre és az URL címét írd át a 2. sorban lévő kód URL címével.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="/js/vizszintes-menu-12.js"></script>
Menü kódja
<div class="demo_container"></div>
<div id="sticky_navigation_wrapper">
<div id="sticky_navigation">
<div class="demo_container">
<ul>
<li>
<a href="/">Főoldal</a>
</li>
<li>
<a href="/">Tutorialok</a>
</li>
<li>
<a href="/">Scripts</a>
</li>
<li>
<a href="/">CSS</a>
</li>
<li>
<a href="https://www.facebook.com/LindaDesign.NonStop" target="_blank">Facebook</a>
</li>
</ul>
</div>
</div>
</div>
CSS kód
<style type="text/css">
.demo_container { /* menü szélessége */
width:520px;
margin:0 auto;
}
#sticky_navigation ul li a { /* menüpontok kinézete */
display:block;
float:left;
margin:0 0 0 5px;
padding:0 20px;
height:40px;
line-height:40px;
font-size:14px;
font-family:Arial, serif;
font-weight:normal;
color:#f2f2f2;
background:#232323;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}
#sticky_navigation ul li a:hover, #sticky_navigation ul li a.selected { /* menüpont, ha ráviszed az egeret */
color:#fff;
background:#B87070;
text-decoration: none;
}
#sticky_navigation_wrapper {
width:100%;
height:50px;
}
#sticky_navigation {
width:100%;
height:50px;
background-color: #000000;
}
#sticky_navigation ul {
list-style:none;
margin:0; padding:5px;
}
#sticky_navigation ul li {
margin:0;
padding:0;
display:inline;
}
</style>
3 137 megtekintés