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