Javascript kód
A .js fájlokat töltsétek le, majd töltsétek fel a tárhelyetekre, az URL címét pedig cseréljétek le a kódban. Kiemeltem az URL részt a Javascript kódban.
G-Portálosoknak: A .js fájlokat oldaladon a Médiatárba töltsd fel!
legordulo-menu-01.js, legordulo-menu-01-01.js, legordulo-menu-01-02.js
 

<script src="/js/legordulo-menu-01.js"></script>
<script src="/js/legordulo-menu-01-01.js"></script>
<script src="/js/legordulo-menu-01-02.js"></script>

Menü kódja
 

<div class="arrowlistmenu">
    <h3 class="menuheader expandable">
        Graphics
    </h3>

 

 

    <ul class="categoryitems">
        <li>
            <a href="/">Brush-ok</a>
        </li>
        <li>
            <a href="/">Hátterek</a>
        </li>
        <li>
            <a href="/">Egyedi modulstílusok</a>
        </li>
        <li>
            <a href="/">PNG-k</a>
        </li>
        <li>
            <a href="/">Textúrák</a>
        </li>
        <li>
            <a href="/">PSD-k</a>
        </li>
        <li>
            <a href="/">Pattern-ek</a>
        </li>
        <li>
            <a href="/">Minden más</a>
        </li>
    </ul>

 

    <h3 class="menuheader expandable">
        GP-s segítségek
    </h3>

 

    <ul class="categoryitems">
        <li>
            <a href="/">CSS kód leírások</a>
        </li>
        <li>
            <a href="/">Futó üzenőfal</a>
        </li>
        <li>
            <a href="/">Coppermine Galéria</a>
        </li>
        <li>
            <a href="/">CuteNews</a>
        </li>
        <li>
            <a href="/">SPGM Pictures Galéria</a>
        </li>
        <li>
            <a href="/">Facebook</a>
        </li>
    </ul>

 

    <h3 class="menuheader expandable">
        JavaScript-ek
    </h3>

 

    <ul class="categoryitems">
        <li>
            <a href="/">Csillogó fejléc</a>
        </li>
        <li>
            <a href="/">Szövegdobozok</a>
        </li>
        <li>
            <a href="/">Képeffektek</a>
        </li>
        <li>
            <a href="/">Linkeffektek</a>
        </li>
        <li>
            <a href="/">Menüstílusok</a>
        </li>
    </ul>

 

    <h3 class="menuheader expandable">
        Az oldal
    </h3>

 

    <ul class="categoryitems">
        <li>
            <a href="/">Vendégkönyv</a>
        </li>
        <li>
            <a href="/">Itt hirdess!</a>
        </li>
        <li>
            <a href="/">Regisztráció</a>
        </li>
        <li>
            <a href="/">Versenyek</a>
        </li>
        <li>
            <a href="/">Képeskönyv</a>
        </li>
    </ul>
</div>

CSS kód
 

<style type="text/css">
.arrowlistmenu{ /* menü szélessége */
    width: 200px;
}
.arrowlistmenu .menuheader{ /* menü fejléce */
    color: white;
    margin-bottom: 2px;
    text-transform: none;
    cursor: default;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 14px;
    font-weight: bold;
    background-attachment: fixed;
    background-color: #CEBBA3;
    background-repeat: repeat;
    padding-top: 4px;
    padding-right: 0;
    padding-bottom: 4px;
    padding-left: 10px;
    text-align: center;
}
.arrowlistmenu .openheader{ /* aktív menü fejléce */
    background-color: #C4AC8E;
}
.arrowlistmenu ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.arrowlistmenu ul li{
    padding-bottom: 2px;
}
.arrowlistmenu ul li a{ /* lenyíló menüben a linkek */
    color: #A70303;
    display: block;
    padding: 2px 0;
    padding-left: 19px;
    text-decoration: none;
    font-size: 12px;
    font-family: Georgia, "Times New Roman", Times, serif;
    background-image: url(http://www.mooncandy.org/stef/material/arrowp3.gif);
    background-repeat: no-repeat;
    background-position: left center;
    border-bottom-width: 0px;
    border-bottom-style: solid;
    border-bottom-color: #dadada;
}
.arrowlistmenu ul li a:visited, a:hover{ /* lenyíló menüben a linkek, ha ráviszed az egeret */
       color: #A70303;
       background-color: #E9DABE;
}</style>

Forrás: link

2 389 megtekintés