Autor Zpráva
vertigo4
Profil
Potřeboval bych doporučit, jakým způsobem udělat vertikální menu (rozjíždějící)....(když najedu myší na položku, zobrazí se vedle další nabídka)

vím, jde to pomoc javascriptu, ale chtěl bych to vytvořit pokud možno tak, aby menu šlo i tomu, kdo nemá zapnutý javascript... mohl bych to udělat pomocí flashe, ale nemám s tím zkušenosti, tak bych vás poprosil, abyste mi pomohli a napsali jak byste to řešili vy
Manq
Profil
vertigo4
Pro normální prohlížeče pomocí CSS a pro IE<6 jednou funkcí v Javascriptu napojenou na CSS :-).
vertigo4
Profil
no narazil jsem právě ted na stránku, kde je to pomocí css
Manq
Profil
vertigo4
Jo, a pro IE pomocí toho JS.
Str4wberry
Profil
vertigo4
Použil bych skrývání/odkrývání textu z JPW.

Navíc pro ošetření nepodpory JavaScriptu něco takového.
<script type="text/javascript"> 

<!--
function Show(a)
{
document.getElementById("id-skryvaneho").style.display = "none";

if (a==1) document.getElementById("id-skryvaneho").style.display = "block";
}
//-->

</script>
vertigo4
Profil
a co si myslíte o tom flash menu? zbytečný kb navíc, že?
Manq
Profil
vertigo4
Nejenom kB. Vše je zbytečné. Když to jde takhle, tak proč tam rvát flash?
vertigo4
Profil
tak diky, zkusím to tak jak jste to psali
vertigo4
Profil
zkusil jsem to udělat tedy podle toho návodu ze stránky co jsem psal, ale když přejedu z toho menu na položku, pak se zobrazí další podmenu vedel- to je dobry- ale problém nastane, když chci najet kurzorem na tu položku v novém menu, protože to neustále mizí
Manq
Profil
vertigo4
No jo, ale když nevíme, jak to máš napsaný, tak těžko zjistíme problém.

Hoď sem kód.
vertigo4
Profil
HTML

<ul class="menu uroven1">
<li class="polozka1"><a href="">Znalosti</a>
<ul class="menu uroven2">
<li class="polozka2"><a href="">oděvy</a></li>
<li class="polozka2"><a href="">pletené</a></li>
<li class="polozka2"><a href="">tkané</a></li>
</ul>
</li>
<li class="polozka1">
<a href="">Elektronika</a>
<ul class="menu uroven2">
<li class="polozka2"><a href="">hi-fi</a></li>
<li class="polozka2"><a href="">bílá technika</a></li>
<li class="polozka2"><a href="">počítače</a></li>
</ul>
</li>
<li class="polozka1">
<a href="">Sport</a>
<ul class="menu uroven2">
<li class="polozka2"><a href="">batohy</a></li>
<li class="polozka2"><a href="">boty</a></li>
<li class="polozka2"><a href="">zimní výbava</a></li>
</ul>
</li>
</ul>


CSS

.menu
{
padding: 0;
position: absolute;
top: 350px;
left: 10px;
width: 120px;
border: thin solid #3399FF;
margin: 0;
}

.menu a
{
text-decoration: none;
color: #333;
display: block;


}

.menu ul, .menu li
{
list-style-type: none;
margin: 0;

border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #3399FF;
background-color: #9FCFFF;
}

ul.uroven1 li.polozka1
{
position: relative;
font-weight: bold;
background: #fff;
padding: .2em .2em;
height: 1em;
_width: 1px; /* IE */
}

ul.uroven2
{
position: absolute;
left: 120px;
top: -.1em;
_top: -.2em; /* IE */
width: 110px;
background: #adf;
border: solid #8bd 2px;
visibility: hidden;


}



ul.uroven2 li.polozka2 a
{
font-weight: normal;
text-align: left;
padding: 0 .5em .1em;
margin: 0 -.5em;
}

ul.uroven2 li.polozka2 a:hover
{
background: #8bd;
}


.menu a:hover
{

}

ul.uroven1 li.polozka1
{
behavior: url(hover.htc);
}

ul.uroven1 li.polozka1:hover,
ul.uroven1 li.polozka1Hover
{
background: #ddd;
}

ul.uroven1 li.polozka1Hover ul.uroven2,
ul.uroven1 li.polozka1:hover ul.uroven2
{
visibility: visible;
}
vertigo4
Profil
na obsah /textu/ menu nehleďte, to je jen pro znázornění
vertigo4
Profil
dobry... už to mám
Flavicius
Profil
Btw, pokud bys chtěl čisté CSS bez hover.htc

http://uploader.hostuju.cz/menu_css_drop.html

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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