Menük : Navigációs menü, változó háttérszín, bal oldali szegély - CSS |
Navigációs menü, változó háttérszín, bal oldali szegély - CSS
A kód két részből áll:
1. Menüpontok
Ezt a kódot abba a modulba rakd, ahol a menüt meg szeretnéd jeleníteni. A kódban jelöltük, mit kell megadni:
<ul id="menu">
<li><a href="MODUL URL">Menüpont</a></li>
<li><a href="MODUL URL">Menüpont</a></li>
<li><a href="MODUL URL">Menüpont</a></li>
<li><a href="MODUL URL">Menüpont</a></li>
<li><a href="MODUL URL">Menüpont</a></li>
</ul>
Az <li><a href="MODUL URL">Menüpont</a></li> sort annyiszor rakd egymás alá, ahány menüpontot szeretnél.
2. CSS
Itt adhatod meg a menü stílusát. A kódot rakhatod az előző kóddal megegyező modulba, de ha több ugyanolyan menüt szeretnél, akkor rakd bal vagy jobb oldali modulba.
<style type="text/css">
#menu
{margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
list-style: none;}
#menu li
{margin-bottom: 2px;}
#menu a /* a menü kinézete */
{background: #F4F4F4;
color: #8a8a8a;
text-decoration: none;
display: block;
width: 160px;
border-left: 5px solid #23C8F2;
padding-left: 10px;
padding-bottom: 5px;
padding-top: 5px;}
#menu a:hover /* a menü kinézete, ha ráviszed az egeret */
{background: #F9F9F9;
color: #C044A1;
text-decoration: none;
border-left: 5px solid #C044A1;}
</style>
|