Ako na menu

Ako na MENU

V tejto časti by som chcel stručne vysvetliť, ako vytvoriť jednoduché menu s rolovacou lištou pre jednotlivé podsekcie.Pri tvorbe menu sú potrebné znalosti HTML a CSS. Pre kompletne vysvetlený návod na tvorbu MENU v anglickom jazyku kliknite tu.

1. časť - HTML kód

Na začiatku je nutné vytvoriť základný HTML kód, ktorý je tvorený formou <ul> (unordered list). Vysvetlenie ako funguje nájdete tu.

<ul class="dd_menu">
<li><a href="#">Domov</a></li>
<li><a href="#">Prva cast</a>
<ul>
<li><a href="#">Prva podcast 1</a></li>
<li><a href="#">Prva podcast 2</a></li>
</ul>
</li>
<li><a href="#">Druha cast</a>
<ul>
<li><a href="#">Druha podcast 1</a></li>
<li><a href="#">Druha podcast 2</a></li>
</ul>
</li>
</ul>

2. časť - CSS

Po tom, ako sme vytvorili kostru MENU v HTML, je nutné daný zoznam upraviť pomocou CSS. Pre vysvetlenie fungovania CSS kliknite tu.

.dd_menu {
clear:both /* maže predošlé príkazy napr. margin,padding */
}
.dd_menu {
background:#e3a65e; /* farba pozadia menu */
padding:0px; margin:0;
list-style-type:none; /* daný zoznam nebude mať odrážky */
height:50px; /* výška menu */
width:998px; /* šírka menu */
}
.dd_menu li {
float:left; /* objekt "pláva" vľavo */
height:50px; /* výška */
border-right: solid 1px white; /* ohraničenie, 1pixel, biely, neprerušovaný */
} .dd_menu li a {
padding:9px 20px; /* výplň */
display:block; /* zobrazenie do blokov */
color:#fff; /* farba textu */
text-decoration:none; /* dekorácia textu*/
font:25px arial, verdana, sans-serif; /* veľkosť a rodina písma */
font-weight: bold; /* zobrazenie textu */
display:inline-block; /* zobrazenie do blokov horizontálne */
width:150px; /* šírka bloku */
}
.dd_menu li:hover a {
text-decoration:none; /* text sa po prechode kurzorom nezmení */
} .dd_menu ul {
position:absolute;
left:-9999px; top:-9999px;
list-style-type:none;
}
.dd_menu li:hover {
position:relative;
background:#a39786; /* farba pozadia pri prechode kurzorom */
}
.dd_menu li.selected {
position:relative;
background:#4d2a00; /* farba pozadia označeného prvku */
}
.dd_menu li:hover ul {
left:0px;
top:50px;
background:#a39786; /* farba rozbaleného podmenu pri prechode kurzorom */
padding:5px;
width:180px;
}
.dd_menu li:hover ul li { /* výška okienka prvku podmenu */
height:35px;
border:none;
}
.dd_menu li:hover ul li a {
height:33px;
padding:0px;
display:block;
font-size:15px;
width:178px;
line-height:30px;
text-indent:5px;
color:#FFF;
background-color:#e3a65e;
text-decoration:none;
border:1px solid transparent; /* hranica, 1px, priehľadná */
}
.dd_menu li:hover ul li a:hover {
height:33px;
background:#4d2a00;
color:#FFF;
padding-left:2px;
}