Autor Zpráva
frauen
Profil *
Zdravím, potřeboval bych pomoci s multi drop-down menu. Vím, že je k tomu potřeba použít také JS, chtěl bych tedy použít jQuery knihovnu. Také bych chtěl, aby nebyl problém zobrazení ve všech běžných prohlížečích, vč. IE6.

Našel jsem toto: Superfish

Ale nevím, jak to mám napasovat do své původní navigace.

Doposud mám hotovo toto:

HTML:
<ul id="navigation">
    <li class="aktuality"><a href="aktuality/" title="Aktuality">Aktuality<span></span></a></li>
    <li class="denni-menu"><a href="denni-menu/" title="Denní menu">Denní menu<span></span></a></li>
    <li class="jidelni-list"><a href="jidelni-list/" title="Jídelní list">Jídelní list<span></span></a></li>
    <li class="vinny-list"><a href="vinny-list/" title="Vinný list">Vinný list<span></span></a></li>
    <li class="rezervace"><a href="rezervace/" title="Rezervace">Rezervace<span></span></a></li>
    <li class="sluzby"><a href="sluzby/" title="Služby">Služby<span></span></a></li>
    <li class="tym"><a href="tym/" title="Tým">Tým<span></span></a></li>
    <li class="fotogalerie"><a href="fotogalerie/" title="Fotogalerie">Fotogalerie<span></span></a></li>
    <li class="kontakt"><a href="kontakt/" title="Kontakt">Kontakt<span></span></a></li>
</ul>

CSS:
ul#navigation {
    background: url('../misc/tpl/navigation-bg.png');
    height: 24px;
    list-style: none;
    margin: 0;
    padding: 13px 0 0 0;
    position: relative;
}

ul#navigation li {
    float: left;
    position: absolute;
}

ul#navigation li a {
    display: block;
    height: 19px;
    position: relative;
}

ul#navigation li a span {
    display: block;
    height: 19px;
    left: 0;
    position: absolute;
    top: 0;
}

ul#navigation li.aktuality {
    left: 75px;
}

ul#navigation li.aktuality a {
    width: 59px;
}

ul#navigation li.aktuality a span {
    background: url('../misc/tpl/navigation-aktuality.png');
    width: 59px;
}

ul#navigation li.denni-menu {
    left: 169px;
}

ul#navigation li.denni-menu a {
    width: 74px;
}

ul#navigation li.denni-menu a span {
    background: url('../misc/tpl/navigation-denni-menu.png');
    width: 74px;
}

ul#navigation li.fotogalerie {
    left: 721px;
}

ul#navigation li.fotogalerie a {
    width: 68px;
}

ul#navigation li.fotogalerie a span {
    background: url('../misc/tpl/navigation-fotogalerie.png');
    width: 68px;
}

ul#navigation li.jidelni-list {
    left: 281px;
}

ul#navigation li.jidelni-list a {
    width: 62px;
}

ul#navigation li.jidelni-list a span {
    background: url('../misc/tpl/navigation-jidelni-list.png');
    width: 62px;
}

ul#navigation li.kontakt {
    left: 824px;
}

ul#navigation li.kontakt a {
    width: 51px;
}

ul#navigation li.kontakt a span {
    background: url('../misc/tpl/navigation-kontakt.png');
    width: 51px;
}

ul#navigation li.rezervace {
    left: 470px;
}

ul#navigation li.rezervace a {
    width: 62px;
}

ul#navigation li.rezervace a span {
    background: url('../misc/tpl/navigation-rezervace.png');
    width: 62px;
}

ul#navigation li.sluzby {
    left: 576px;
}

ul#navigation li.sluzby a {
    width: 44px;
}

ul#navigation li.sluzby a span {
    background: url('../misc/tpl/navigation-sluzby.png');
    width: 44px;
}

ul#navigation li.tym {
    left: 655px;
}

ul#navigation li.tym a {
    width: 31px;
}

ul#navigation li.tym a span {
    background: url('../misc/tpl/navigation-tym.png');
    width: 31px;
}

ul#navigation li.vinny-list {
    left: 377px;
}

ul#navigation li.vinny-list a {
    width: 61px;
}

ul#navigation li.vinny-list a span {
    background: url('../misc/tpl/navigation-vinny-list.png') no-repeat;
    width: 61px;
}

Budu moc vděčný za jakoukoliv pomoc. Díky.
motik
Profil
frauen:
zkus to napastovat do vzorovýho příkladu a pokud se ti to nepovede, tak zkus práce a zakázky.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0