Van pullup naar puldown menu

[Broertjuhhh]

Hallo allemaal,

Ik heb een pullup-menu waar dus de sub-menu's naar boven uitklappen maar nou wil ik dat de sub-menu's naar beneden uitklappen.
Het lukt me niet en hoop dat iemand oplossing weet.

(CSS)

.preload1 {background: url(blank_over.gif);}
.preload2 {background: url(blank_overa.gif);}

/* top margin for this demo only */
#nav {
	padding:0;
	margin:0;
	list-style:none;
	height:38px;
	background:#fff;
	position:absolute;
	z-index:500;
	font-family:verdana;
	left: -8px;
	top: 0px;
	width: 847px;
}

#nav {padding:0; margin:116px 0 0; list-style:none; height:271px; background:#fff; position:relative; z-index:500; font-family:verdana;}
#nav li.top {display:block; float:left; padding-top:5px;}
#nav li a.top_link {display:block; float:left; height:36px; line-height:27px; width:120px;color:#ddd; text-decoration:none; font-size:10px; font-weight:normal; padding:0 0 0 1px; cursor:pointer;background: url(blank.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 8px; height:36px;background:url(blank.gif) right top;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 8px; height:36px; background:url(blanka.gif) no-repeat right top;}
#nav li a.top_link:hover {color:#fff; background: url(blank_over.gif) no-repeat;}
#nav li a.top_link:hover span {background:url(blank_over.gif) no-repeat right top; line-height:29px;}
#nav li a.top_link:hover span.down {background:url(blank_overa.gif) no-repeat right top; line-height:29px;}

#nav li:hover > a.top_link {color:#fff; background: url(blank_over.gif) no-repeat;}
#nav li:hover > a.top_link span {background:url(blank_over.gif) no-repeat right top; line-height:29px;}
#nav li:hover > a.top_link span.down {background:url(blank_overa.gif) no-repeat right top; line-height:29px;}

/* Default list styling */

#nav li:hover {position:relative; z-index:200; background:#fff;}

/* keep the 'next' level invisible by placing it off screen. */
#nav ul, 
#nav li:hover ul ul,
#nav li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover ul
{left:0; bottom:40px; top:auto; background: #fff; padding:3px; border:1px solid #4f8383; white-space:nowrap; width:auto; height:auto; z-index:300;}
* html #nav li:hover ul {width:0;}
#nav li:hover ul li
{display:block; position:relative; float:left; font-weight:normal; background:#fff; clear:left;}
#nav li:hover ul li a
{display:block; font-size:10px; height:14px; line-height:14px; padding:0 5px; color:#000; text-decoration:none;} /* Height uitklapmenu - was 20 */
#nav li ul li a.fly
{color:#4f8383; font-weight:bold;}
#nav li:hover ul li:hover 
{background:#fff;}
#nav li:hover ul li a:hover {background:#2c6791; color:#fff; } /* dropbox text highlight color */
#nav li:hover ul li a.fly:hover
{background:#4f8383; color:#fff; text-decoration:none;}
#nav li:hover ul li:hover.fly {background:#4f8383;}

#nav li:hover ul li:hover.fly > a.fly {background:#4f8383; color:#fff; text-decoration:none;} 

#nav li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{left:-5px; margin-left:100%; bottom:-4px; top:auto; background: #fff; padding:3px; border:1px solid #4f8383; white-space:nowrap; width:auto; z-index:500; height:auto;}

 

[csshunter]

Yep! Ik voelde 'm al aankomen.

De submenu-<ul> staat nu met een absolute positie met een onderkant van 40px boven de onderkant van het gewone menu:

#nav li:hover ul {
	...
	top: auto; 
	bottom: 40px;
	}

Als je dat omdraait: begint de top op 40px eronder:

#nav li:hover ul {
	...
	top: 40px;
	bottom: auto; 
	}

• Test:opdit-home-12.php.
• Niet vergeten in de blanka.gif het driehoekje nog even naar beneden te zetten

Met vriendelijke groet,
CSShunter

 

[Broertjuhhh]

Hallo csshunter,

Ik had echt alles geprobeerd maar dat dus over het hoofd gezien, ik begin achteraan denk dan aan het moeilijkste en sla het meest simpele over.

Bedankt, ik kan weer verder.

 

[csshunter]

... over het hoofd gezien ...

Dat is geen schande!
Je zou immers verwachten dat de positiebepaling in de gewone #nav li ul {...} zou plaatsvinden of (wat hier op hetzelfde neerkomt) in de #nav ul {...}, en dan ga je niet in de #nav li:hover ul {...} zoeken.

Maar hier wordt deze <ul> verborgen (buiten beeld gehouden) via de posities in de #nav ul {...}: {left:-9999px; top:-9999px;}.

En via de #nav li:hover ul {...}, alleen bij een hover, wordt het handeltje op de goede plaats geschoven. Dus daar moeten ook de goede top- en bottom-afstanden worden aangegeven.

Als je 't weet is het altijd makkelijk!
En als je het niet weet, roep je Firebug te hulp:

( vergroot tot ware grootte )​

Dan is het ook makkelijk!

Met vriendelijke groet,
CSShunter

 

[Broertjuhhh]

Hallo,

Ik probeerde het toe te passen op mijn site met frames en dat werkt wel maar... het submenu verdwijnt dan achter het mainframe.
Is daar een oplossing voor ?

 

[csshunter]

Ik ben bang van niet. Dan zou je twee overlappende frames moeten hebben, en dat gaat niet in een frameset.

• Toch maar ombouwen tot een php-site zoals hierboven en in het andere topic aangegeven?

(Het enige wat je nog zou kunnen doen, is het bovenste frame meer hoogte geven, zodat het uitgeklapte menu er nog in past.

Maar ja, dan krijg je dus een lelijk loos gat tussen het onuitgeklapte menu en de twee frames er onder.)

==========
O, nog een mogelijkheid: het menu bovenaan zetten, en het logo er onder; dan heb je er minder last van:

Met vriendelijke groet,
CSShunter

 

[Broertjuhhh]

Hallo csshunter,

Kan het ook niet met "Z order" ?

Ik ben nog bezig met het bestuderen van css en php, dat moet ik eerst onder de knie krijgen en in de tussen tijd hou ik nog wel mijn oude site aan, maar het gaat zeker gebeuren.

 

[csshunter]

Nops, de z-index werkt alleen als er lagen over elkaar kunnen liggen. Maar de onderdelen van een frameset kunnen niet gedeeltelijk over elkaar komen te liggen (anders zou ook het principe van de frame-indeling aangetast worden).

• <iframe>'s kunnen dacht ik wel over elkaar heen gezet worden (met aan hack'je voor IE).
• Maar dan zou je de site moeten ombouwen tot "echte pagina's", waarbij de kop met menu en de linkerkolom in een <iframe> zitten.
• Contra-indicatie: als je dat zo gaat doen, kost het evenveel extra werk. En dan is het net zoveel moeite om die onderdelen er met een php-include in te zetten (+ beter voor Google en toegankelijkheid; en ook makkelijker in onderhoud).

Voorlopig zou ik maar lekker de oude site aanhouden, en css en php gaan doorgronden. CSS is het lastigste, het php-includen is één regeltje code.
Maar de css en php staan al in het andere topic: het eindresultaat heb je al, dat kan je zo kopiëren.
Dus het doorgronden van de details kan later ook nog.

Met vriendelijke groet,
CSShunter

 

[arjan96s]

frames gebruiken is eigenlijk ook hopeloos ouderwets. als ik een tip mag geven.

structuur met div,s dat is veel makkelijker.
als je dan zegt van ja mijn banner en alles hoef ik dan niet 10 keer te plakken. leer dan php!!

zomaar een tip :thumb: verder mooi design

 

[Broertjuhhh]

Hallo,

Ik ben al bezig om PHP en CSS te bestuderen maar dat kost wat tijd.

Bedankt voor het compliment betreffende het design.

 

[arjan96s]

ik vindt persoonlijk een goed design maken moeilijk en doe er altijd erg lang over.
dit ziet er mooi doch simpel uit. zo hoort het.

ik ben vaak ook meer de man achter de knopjes en de data. (db)