[css] Sub-menu's blijven achter aanroepend menu - Softwareontwikkeling

donderdag 3 mei 2007 08:33

Acties:

Verwijderd

Topicstarter

Ik probeer een super simpel verticaal menu te genereren met 3 niveaus.
Echter: wat ik ook probeer, ik krijg het niet voor elkaar om de sub-menu's volledig zichtbaar te krijgen.
Het bovenliggende menu blijft zichtbaar en het onderliggende sub-menu komt er achter.
Volgens mij staan alle z-indexen goed en ook de css valideert volledig.
Ik heb geen achtergrond-kleur aan de li's en a's meegegeven. (Deze optie heb ik wel geprobeerd, maar ook zonder resultaat).

Zou iemand mij hiermee kunnen helpen?

Dit is de bijbehorende code:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu test</title>
<style type="text/css" media="all">
/* Alle niveaus */
ul{
    list-style-type: none;
    padding: 0 0 0 0;
    width: 140px;
}
/* Eerste niveau */
ul{
    margin: 10px 0 10px 10px;
}
/* Tweede en diepere niveaus */
ul ul{
    position: absolute;
    margin: 0 0 0 0;
    border: 1px solid #CCCCCC;
    top: 17px;
    left: 10px;
}
/* Alle niveaus */
li{
    position: relative;
}
ul li, 
ul li a{
    display: block;
    width: 140px;
    line-height: 18px;
    height: 18px;
}
/* Eerste niveau */
ul,
ul li,
ul li a{
    z-index: 100;
    background-color: inherit;
    color: inherit;
}
/* Tweede en diepere niveaus */
ul ul{
    background-color: #CC6600;
    color: inherit;
}
ul ul,
ul ul li,
ul ul li a{
    z-index: 200;
}
/* Derde niveau en diepere niveaus: z-index moet per niveaus hoger worden gedefinieerd */
ul ul ul{
    /* Andere achtergrond kleur ter verduidelijking */
    background-color: #FFFF99;
    color: inherit; 
}
ul ul ul,
ul ul ul li,
ul ul ul li a{
    z-index: 300;
}
/* Tweede en diepere niveaus */
ul ul{
    display: none;
}
ul li:hover ul,
ul li.over ul{
    display: block;
}
/* Derde en diepere niveaus */
ul li:hover ul ul,
ul li.over ul ul{
    display: none;
}
ul ul li:hover ul,
ul ul li.over ul{
    display: block;
}
</style>
</head>

<body>
  <ul id="menu">
   <li><a href="#">Optie 1</a></li>
   <li>
    <a href="#">Optie 2</a>
    <ul>
     <li><a href="#">Optie 2.1</a></li>
     <li><a href="#">Optie 2.2</a></li>
    </ul>
   </li>
   <li>
    <a href="#">Optie 3</a>
    <ul>
     <li><a href="#">Optie 3.1</a></li>
     <li><a href="#">Optie 3.2</a></li>
    </ul>
   </li>
   <li>
    <a href="#">Optie 4</a>
    <ul>
     <li><a href="#">Optie 4.1</a>
      <ul>
       <li><a href="#">Optie 4.1.1</a></li>
       <li><a href="#">Optie 4.1.2</a></li>
      </ul>
     </li>
     <li><a href="#">Optie 4.2</a></li>
     <li><a href="#">Optie 4.3</a></li>
     <li><a href="#">Optie 4.4</a></li>
     <li><a href="#">Optie 4.5</a></li>
     <li><a href="#">Optie 4.6</a></li>
    </ul>
   </li>
  </ul>
</body>
</html>

donderdag 3 mei 2007 10:52

Acties:

chris

Je moet even zorgen dat die z-index op de UL is, niet op de a.

Dus je wilt zoiets:

Cascading Stylesheet:

1
2
3

ul { z-index: 10; }
ul ul { z-index: 11; }
ul ul ul { z-index: 12; }

donderdag 3 mei 2007 10:58

Acties:

Verwijderd

Topicstarter

Helaas, dat gaat m niet zijn!

Oh in Firefox werkt dat wel, in IE (7) niet ...
Iemand dus nog een tip of suggestie voor de IE variant?

[ Voor 69% gewijzigd door Verwijderd op 03-05-2007 11:29 ]

donderdag 3 mei 2007 11:54

Acties:

crisp

Devver

Pixelated

Sowieso geen position:relative op de LI's zetten; dat veroorzaakt een nieuwe stacking-context in IE. z-index is gewoon buggy as hell in IE en moet je gewoon zien te vermijden in dit soort gevallen.
En het kan ook zonder:

Cascading Stylesheet:

ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 120px;
}
ul li a {
    display: block;
    padding: 0px 4px;
    line-height: 18px;
}
ul ul {
    position: absolute;
    margin-top: -18px;
    margin-left: 20px;
    display: none;
}

ul ul {
    background-color: yellow;
}
ul ul ul {
    background-color: lightgreen;
}

ul li:hover ul {
    display: block;
}
ul li:hover ul ul {
    display: none;
}
ul ul li:hover ul {
    display: block;
}
ul ul li:hover ul ul {
    display: none;
}

oftewel: keep it simpel

Overigens ben ik van mening dat :hover niet bedoelt is voor behavior. Misschien is dit een aardig alternatief ?

Intentionally left blank

donderdag 3 mei 2007 12:28

Acties:

Verwijderd

Topicstarter

Thanks! Kijk aan die informatie heb ik nog eens wat! Bedankt en ik zal weer eens wat research plegen hierover!

donderdag 3 mei 2007 12:35

Acties:

Verwijderd

Ik gebruik de volgende css code voor een verticaal menu. Werkt perfect in firefox, maar niet in internet explorer. Wat kan ik eraan doen zodat hij het wel doet in internet explorer. Want ik heb niet kunnen vinden wat het kan zijn.

code:

<style>
 #nav, #nav ul, #nav ul ul{
padding: 0;
margin: 0;
list-style: none;
background: url(none.gif) repeat 0 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 75%;
}

#nav{
width: 95px;
}

#nav li{
width: 95px;
}

#nav ul{
position: absolute;
width: 100px;
left: -1000px;
margin: -22px 0 0 95px;
font-size: 100%;
}

* html #nav ul{
margin: -23px 0 0 95px;
}

#nav li li{
width: 100px;
}

#nav ul ul{
width: 140px;
margin: -22px 0 0 100px;
font-size: 100%;
}

* html #nav ul ul{
margin: -23px 0 0 100px;
}

#nav li li li{
width: 140px;
}

#nav li:hover ul, #nav li.ie_does_hover ul{
left: auto;
}

#nav li:hover ul ul, #nav li.ie_does_hover ul ul{
left: -1000px;
}

#nav ul li:hover ul, #nav ul li.ie_does_hover ul{
left: auto;
}

#nav a {
display: block;
text-decoration: none;
padding: 2px 4px 3px 4px;
margin: 1px;
}

#nav a:link, #nav a:visited{
background: #B8F270;
border: 1px solid green;
color: black;
}

#nav a:hover, #nav a:active{
background: red;
border: 1px solid green;
color: white;
}
</style>

donderdag 3 mei 2007 12:40

Acties:

robkamp

Nog één gerelateerde vraag.

Is het mogelijk om een CSS-gedreven menu te maken met een horizontaal eerste niveau ipv een verticaal eerste niveau?

dus

Eerste

Tweede

Derde

Vierde

ipv

Eerste

Tweede

Derde

Vierde

donderdag 3 mei 2007 13:08

Acties:

crisp

Devver

Pixelated

Ik heb ook een horizontaal voorbeeld ja: http://therealcrisp.xs4all.nl/upload/menu_hori.html

Intentionally left blank

donderdag 3 mei 2007 14:52

Acties:

robkamp

crisp schreef op donderdag 03 mei 2007 @ 13:08:
Ik heb ook een horizontaal voorbeeld ja: http://therealcrisp.xs4all.nl/upload/menu_hori.html

Dat was niet helemaal wat ik bedoelde. Via javascript zijn er al vele horizontale menu's.

De vraag die ik stelde is of dit ook mogelijk is alleen door gebruik te maken van CSS/CSS2 rendering.

donderdag 3 mei 2007 14:57

Acties:

Zerora

Ik Henk 'm!

Natuurlijk is dat mogeljik

Kijk hier eens:
[google=horizontal CSS menu]

[ Voor 29% gewijzigd door Zerora op 03-05-2007 14:59 ]

Trans-life! :::: "All things change, whether from inside out or the outside in. That is what magic is. And we are magic too."

donderdag 3 mei 2007 15:32

Acties:

Verwijderd

Verwijderd schreef op donderdag 03 mei 2007 @ 12:35:
Ik gebruik de volgende css code voor een verticaal menu. Werkt perfect in firefox, maar niet in internet explorer. Wat kan ik eraan doen zodat hij het wel doet in internet explorer. Want ik heb niet kunnen vinden wat het kan zijn.
code:
1
2
<style>
zie mijn vorige post

Weet iemand wat ik moet veranderen zodat dit werkt in IE?

donderdag 3 mei 2007 16:26

Acties:

crisp

Devver

Pixelated

robkamp schreef op donderdag 03 mei 2007 @ 14:52:
[...]

Dat was niet helemaal wat ik bedoelde. Via javascript zijn er al vele horizontale menu's.

De vraag die ik stelde is of dit ook mogelijk is alleen door gebruik te maken van CSS/CSS2 rendering.

Als je dit stukje CSS in dat voorbeeld enabled dan doet hij het ook zonder javascript:

Cascading Stylesheet:

/*
ul#menu li:hover>ul {
    display: block;
}
*/

Je zal dan alleen nog wat aanpassingen moeten doen voor IE < 7

Maar de vraag is of je dat wel moet willen. CSS is niet bedoelt voor behavior en het wel daarvoor gebruiken brengt accessibility issues met zich mee.

Intentionally left blank

vrijdag 4 mei 2007 11:42

Acties:

Zerora

Ik Henk 'm!

Het grote voordeel dat als je alleen CSS gebruikt voor zo'n menu dat men geen aparte scripten hoeven toe te staan. Er zijn nog altijd gebruiker die bijv. javscript uit hebben staan.

Trans-life! :::: "All things change, whether from inside out or the outside in. That is what magic is. And we are magic too."

vrijdag 4 mei 2007 11:48

Acties:

crisp

Devver

Pixelated

Zerora schreef op vrijdag 04 mei 2007 @ 11:42:
Het grote voordeel dat als je alleen CSS gebruikt voor zo'n menu dat men geen aparte scripten hoeven toe te staan. Er zijn nog altijd gebruiker die bijv. javscript uit hebben staan.

Ik vind dat een beetje een non-argument. Ten eerste is het top-level menu dan nog altijd bereikbaar en ten tweede is dat de eigen keus van de gebruiker en vind ik accessibility voor gebruikers die geen eigen keus hebben (vanwege bijvoorbeeld een handicap die ze noodzaakt een ander soort browser te gebruiken) belangrijker.

Daarbij is het met javascript eenvoudiger om de behavior unobtrusive te laten zijn (bijvoorbeeld default de submenu's wel te tonen en die pas te verbergen als de UA javascript ondersteund) en kan je de behavior beter verfijnen (bijvoorbeeld een delay voor het sluiten van een submenu).

Intentionally left blank

vrijdag 4 mei 2007 11:58

Acties:

Zerora

Ik Henk 'm!

crisp schreef op vrijdag 04 mei 2007 @ 11:48:
[...]

Ik vind dat een beetje een non-argument. Ten eerste is het top-level menu dan nog altijd bereikbaar en ten tweede is dat de eigen keus van de gebruiker en vind ik accessibility voor gebruikers die geen eigen keus hebben (vanwege bijvoorbeeld een handicap die ze noodzaakt een ander soort browser te gebruiken) belangrijker.

Daar heb ik eerlijk gezegd nog niet over nagedacht. Maar als ik erover nadenk valt dit toch te combineren zonder javascript te gebruiken (bijv. een switch maken tussen verschillende CSS files). Ligt ook aan met wat voor website je te maken hebt.

Daarbij is het met javascript eenvoudiger om de behavior unobtrusive te laten zijn (bijvoorbeeld default de submenu's wel te tonen en die pas te verbergen als de UA javascript ondersteund) en kan je de behavior beter verfijnen (bijvoorbeeld een delay voor het sluiten van een submenu).

Ja, je kan idd wel wat meer je zaken finetunen. Het is maar net wat wenselijk is.

Trans-life! :::: "All things change, whether from inside out or the outside in. That is what magic is. And we are magic too."

vrijdag 4 mei 2007 12:33

Acties:

Verwijderd

Weet iemand voor mijn probleem(zie boven) al een oplossing?

vrijdag 4 mei 2007 12:56

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op vrijdag 04 mei 2007 @ 12:33:
Weet iemand voor mijn probleem(zie boven) al een oplossing?

Ten eerste is het niet erg handig dat je voor je eigen probleem andermans topic gebruikt, en daarnaast mis ik nog behoorlijk wat informatie:
- welke versie IE? (5.x, 6, 7, allemaal?)
- wat gebruik je om :hover functionaliteit te simuleren in IE < 7?
- waarom heb je IE-specifieke 'hacks' niet gescheiden van je reguliere CSS en getarget op enkel die versie IE die het nodig heeft? (ik doel dan mn op de * html hack)?

en natuurlijk:
- wat heb je zelf al geprobeerd en waarom werkte dat niet?

Zoals je nu je vraag stelt komt het nogal over als "dit is de code, ik heb dit ergens vandaan ge-c/p'ed en snap er eigenlijk niets van dus kan iemand dat even voor me fixen?" - dat noemen we ook wel een "script-request" en die zijn hier op GoT niet toegestaan...

Intentionally left blank