Navigation

Menü kódja
 

<div id="vertmenu">
    <h1>
        Navigation
    </h1><ul>

        <li>
            <a href="/" tabindex="1">Főoldal</a>
        </li>
        <li>
            <a href="/" tabindex="2">Kódok</a>
        </li>
        <li>
            <a href="/" tabindex="3">Segítségek</a>
        </li>
        <li>
            <a href="/" tabindex="4">Grafika</a>
        </li>
        <li>
            <a href="/" tabindex="5">Galéria</a>
        </li>
        <li>
            <a href="/" tabindex="6">Az oldalról</a>
        </li>
    </ul>
</div>

CSS kód
 

<style type="text/css">
#vertmenu h1 { /* a menü címe, háttere, stb */
    display: block;
    background-color: #5B7967;
    font-family: Trebuchet MS;
    font-size: 14px;
    text-transform: uppercase;
    padding: 10px;
    border: 0px solid #000000;
    color: #f2f2f2;
    width: 280px;
    text-align: center;
}
#vertmenu ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    border: none;
}
#vertmenu ul li {
    margin: 0px;
    padding: 0px;
}
#vertmenu ul li a { /* a link színe, stílusa, stb */
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    display: block;
    border-bottom: 1px dashed #999999;
    padding: 5px;
    text-decoration: none;
    color: #666666;
    width:289px;
}
#vertmenu ul li a:hover, #vertmenu ul li a:focus { /* ha ráviszed az egeret a linkre */
    color: #000000;
    background-color: #eeeeee;
}
</style>

2 853 megtekintés