drop down menu

Blackshadow · Napísal **Blackshadow**: 18.09.2008 15:37 | drop down menu

Mam urcite komplikacie s dropdown menu..

Ma byt horizontalne, ale nejak mi to cele nejde a blbne..

stranka:
http://bs-design.sk/weby/microshop/home.php
CSS:
http://bs-design.sk/weby/microshop/style.css

- vo firefoxe aspon tie tlacitka dava vedla seba aspon, v IE ani to... a cele sa to rozhadzuje...

- neviete ako to prisposobyt, aby to hodilo tie podzlozky pod tlacitko??
(alebo nejaky overeny sposob pre css dropdown menu, skusal som asi 7 variant, ale nevedel som to poriadne nahodit)

jablko05 · Napísal **jablko05**: 18.09.2008 15:53 | drop down menu

vobec netusim co s tym, ale tu http://www.cssplay.co.uk/menus/ mas par prikladov na dropdowny... ocekuj si ich..

Blackshadow · Napísal autor témy **Blackshadow**: 18.09.2008 16:05 | drop down menu

to som cele pozrel, odtial som skusal vela rieseni, ale nejak to proste nie a nie rozchodit..

stenley · Napísal **stenley**: 18.09.2008 19:17 | drop down menu

pozri si http://sperling.com/examples/menuh/

Blackshadow · Napísal autor témy **Blackshadow**: 19.09.2008 13:50 | drop down menu

takze, vyspal som sa na to a schladnou hlavou som isiel podla navodu zo stranky od stenleyho..

podarilo sa.. v FF3 a Opera 9.25 - vsetko funguje ako ma...
ale co napr take IE ?? no hadajte

ak sa najdu nejaky odvazlivci, ktory si myslia, ze dokazu to odladit aj pre IE (aspon verzie 6 a 7) tak budem mooooooc vdacny a mozno aj nejaka odmena (neviem co by ste chceli

)

http://bs-design.sk/weby/microshop/home.php - link

// ja som pri tom uz zjedol tabulku cokolady, margot a nugatovu tycinku, ale ani takyto prival cukru mi nepomohol...

pito_42 · Napísal **pito_42**: 19.09.2008 14:55 | drop down menu

Blackshadow

nestihol som podakovat do temy roletka :roll:

takze diiiik,vecer opacim

neutronmind · Napísal **neutronmind**: 19.09.2008 15:20 | drop down menu

Blackshadow, a skusal si do head dat

Kód:

<!--[if lt IE 7]>
<style type="text/css" media="screen">
#menuh{float:none;}
body{behavior:url(csshover.htc); font-size:100%;}
#menuh ul li{float:left; width: 100%;}
#menuh a{height:1%;font:bold 0.7em/1.4em arial, sans-serif;}
</style>
<![endif]-->

ako bolo pisane na tej stranke? (http://sperling.com/examples/menuh/)

Blackshadow · Napísal autor témy **Blackshadow**: 19.09.2008 18:05 | drop down menu

ved to tam je.. pozri zdrojak...

stenley · Napísal **stenley**: 20.09.2008 10:51 | drop down menu

Trosku som sa na to pozrel a prvy problem, preco ti to nejde, je odlisny doctype... skus si tam dat presne ten zo stranky a aspon ciastocne ti to pojde...

Pre IE6/7 som ti menu odladil, zvysok si hadam dorobis aj sam

Ako som pozeral tvoj zdrojak, miesas spolu px a em, to by sa nemalo, bud si vyber jedno alebo druhe... vychadzal som z tvojho zdrojaku, takze som to tak nechal aj v nasledujucom kode:

CSS:

Kód:

* { margin:0; padding:0; font-size: small; font-family: arial, helvetica, sans-serif; }

#menuh a:link, #menuh a:visited, #menuh a:active { color: white; background-color: #222222; text-decoration:none; }   

#menuh a { text-align: center; display:block; border: 1px solid #555; white-space:nowrap; padding:4px 0 5px 0; }
#menuh a:hover   { color: white; background-color: darkorange; text-decoration:none;   }   
#menuh a.top_parent, #menuh a.top_parent:hover { background: url("vseobTla.jpg") 0 0 no-repeat; border:none; }
#menuh a.parent, #menuh a.parent:hover { background-position: right center; background-repeat: no-repeat; }

#menuh ul { list-style:none; float:left; width:109px; }
#menuh li { position:relative; min-height: 1px; vertical-align: bottom; }
#menuh ul ul { position:absolute; z-index:500; top:auto; display:none; padding: 1em; padding-top:8px; margin:-0.6em 0 0 -1em; }
#menuh ul li { background: url("vseobTla.jpg") 0 0 no-repeat; }

div#menuh li:hover { cursor:pointer; z-index:100; }

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}

HTML:

Kód:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Drop-Down Menu</title>   
<style type="text/css">@import url("menuh.css");</style>
<!--[if lt IE 7]>
<style type="text/css" media="screen">
#menuh{float:none;}
body{behavior:url(csshover.htc); font-size:100%;}
#menuh ul li{float:left; width: 100%;}
#menuh a{height:1%;font:bold 0.7em/1.4em arial, sans-serif;}
</style>
<![endif]-->
</head>
<body>
<div id="menuh">
   <ul>
      <li><a href="#" class="top_parent">Networking</a>
         <ul>
            <li><a href="#">Routers</a></li>
            <li><a href="#">WiFi routers</a></li>
            <li><a href="#">LAN cards</a></li>
            <li><a href="#">Cables</a></li>
            <li><a href="#">Others</a></li>
         </ul>
      </li>
   </ul>
   <ul>   
      <li><a href="#" class="top_parent">Computers</a>
         <ul>
            <li><a href="#">Laptops</a></li>
            <li><a href="#">Desktop PC</a></li>
            <li><a href="#">Monitors</a></li>
            <li><a href="#">Accesories</a></li>
            <li><a href="#">PC bags</a></li>
         </ul>
      </li>
   </ul>
</div>
</body>
</html>

PS: mozno sa v css najdu pozostatky testovania, to staci odstranit

Blackshadow · Napísal autor témy **Blackshadow**: 20.09.2008 11:34 | drop down menu

joo, diki, chce to uz len male odladenia.. diki ti moc...

//EDIT: uz mi to ide clekom fajn... este v IE6 mi to trsku preblikuje, ale to uz je fajn.. thx