ugrás a tartalomhoz

Magyar nyelvű leírás CSS menü készítéshez?

stryyker · 2005. Jún. 27. (H), 20.46
Hali!

Nem tud valaki egy részletes, magyar nyelvű leírást arról, hogy hogyan lehet lenyíló menüt készíteni CSS-sel? Angolt nézegettem, csak nem igazán sikerült megérteni...
‹ Flash elem beágyazása Saját ajax-motor hiba ›
 ■
1

jano

Őry Máté · 2005. Jún. 27. (H), 21.54
http://www.hszk.bme.hu/~hj130/css/list_menu/
2

Ezt láttam már és

stryyker · 2005. Jún. 28. (K), 10.32
Ezt láttam már és tényleg jó, csak pont a lenyíló menüket nem részletezi (vagy csak én nem találom??). A Kirowski és a Carnation menü nagyon tetszik, de pusztán forrás alapján nem tudom megérteni. De kezdetnek jó lenne egy egyszerűbb lenyíló menüről magyar leírás.
3

magyarul nem tudok

mammuth · 2005. Jún. 28. (K), 20.48
magyarul nem tudok ilyen leirast, de angolul van egy cucc, ez eleg jo.
leiras:
http://www.htmldog.com/articles/suckerfish/dropdowns/
igy fog kinezni:
http://www.htmldog.com/articles/suckerfish/dropdowns/example/
4

Menü nem megy

horvathc · 2005. Aug. 3. (Sze), 14.50
Hali!

A leírás alapján megcsináltam a menüt, de IE-ben nem megy.
Lehet, hogy én hibáztam ui. javascripthez nem értek és azt nem tudom igazán ellenőrizni.
Neked futott?

Üdv
Csaba
5

ezt beleraktad?

paal · 2005. Aug. 3. (Sze), 17.24
Ezt beleraktad?
  1. <script type="text/javascript"><!--//--><![CDATA[//><!-- 
  2.  
  3. sfHover = function() { 
  4.     var sfEls = document.getElementById("nav").getElementsByTagName("LI"); 
  5.     for (var i=0; i<sfEls.length; i++) { 
  6.         sfEls[i].onmouseover=function() { 
  7.             this.className+=" sfhover"; 
  8.         } 
  9.         sfEls[i].onmouseout=function() { 
  10.             this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); 
  11.         } 
  12.     } 
  13. } 
  14. if (window.attachEvent) window.attachEvent("onload", sfHover); 
  15.  
  16. //--><!]]></script>  
és az ul tag-nak így kell kezdődnie:

<ul id="nav">

Üdv, Pali
--
Palkó Koma
6

Kérdés

PogiG · 2006. Jan. 21. (Szo), 23.02
Sziasztok.

Hogyan kell ezt a menüt úgy átalakítani. hogy:

főmenü1----------------------főmenu2---------főmenü3  ....
-almenü1--almenü2--almenü3
--elem1-----elem1-----elem1
--elem2-----elem2-----elem2

felépítése legyen?

Akárhogy próbálkozom, nem tudom az első almenüt vizszintes elrendezésüre tenni.

Csak ilyet tudok készíteni:

főmenü1---------főmenu2----főmenü3  ....
-almenü1  
-almenü2
-almenü3-elem1
------------elem2
------------elem3

Nem vagyok jártas a témában, de az <ul>, <li>, </ul>, </li> elemeket már szanaszét kombináltam, de semmi. Lehet, hogy a CSS -t kellene módosítanom?

Kérlek segítsetek, mert magamtól soha nem jövök rá.

Köszönöm.

PogiG
7

inline

akosbacsi · 2006. Jan. 21. (Szo), 23.33
  1. ul.almenu {  
  2. display: inline;  
  3. }  
8

<Nincs cím>

PogiG · 2006. Jan. 22. (V), 11.08
Beírtam a CSS- be, amit írtál, és így próbáltam:
  1. <ul id="nav">  
  2.  <li><a href="#">Főmenü</a>  
  3.   <ul id="almenu">  
  4.    <li><a href="#">Almenü1</a></li>  
  5.    <li><a href="#">Almenü2</a></li>  
  6.    <li><a href="#">Almenü3</a></li>  
  7.   </ul>  
  8.  </li>   
  9. </ul>  
ill.:
  1. <ul class="almenu">  
de semmi nem történt. Lehetne egy picit konkrétabban, mert még csak most ismerkedem a CSS -el, és nagyon nem vagyok képben.

Köszi.

PogiG
9

megoldas

akosbacsi · 2006. Jan. 22. (V), 12.25
Igen, rosszul emlékeztem.

Tehát a li tagnek kell megadni az inline-t.
  1. .almenu li  
  2. {  
  3. display: inline;  
  4. }  
Ez az <ul class="almenu"> -re vonatkozik.
10

inline vs float

Jano · 2006. Jan. 22. (V), 14.32
Én float-tal szoktam dolgozni, mert akkor nincs probléma a kódban előforduló white-space-kel.

Ha jól látom 3 mélységű lista ami elég szép CSS-t fog a végén eredményezni, mert az IE nem ismeri a > közvetlen leszármazott kiválasztót.

Úgyhogy csak röviden a lényeg:

Ahhoz, hogy egymás mellé kerüljenek a lista elemek az LI-ket kell floatolni. Hogy a főszinten egymás mellé kerüljenek az elemek, a lejebb levő szintű elemekkel valamit csinálni kell. Erre jó az abszolút pozicionálás, mert egy abszolút pozicionált elem a többi elem számára olyan mintha ott se lenne.
  1. #nav li {  
  2.  float:left;  
  3.  position:relative;  
  4. }  
  5.   
  6. #nav ul {  
  7.  position:absolute;  
  8.  left:0;  
  9.  top:1em;  
  10. }  
Hogy aztan a 3. szint meg megint egymás ala keruljon, ahhoz ott a float:none szabály kell.
11

leírás

fiokposta · 2008. Már. 23. (V), 19.07
egy magyar nyelvű leírás itt.