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?
<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></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
ul.almenu {
display: inline;
}
8

<Nincs cím>

PogiG · 2006. Jan. 22. (V), 11.08
Beírtam a CSS- be, amit írtál, és így próbáltam:
<ul id="nav">
 <li><a href="#">Főmenü</a>
  <ul id="almenu">
   <li><a href="#">Almenü1</a></li>
   <li><a href="#">Almenü2</a></li>
   <li><a href="#">Almenü3</a></li>
  </ul>
 </li> 
</ul>
ill.: 
  <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.

.almenu li
{
display: inline;
}
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.

#nav li {
 float:left;
 position:relative;
}

#nav ul {
 position:absolute;
 left:0;
 top:1em;
}
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.