[css] pulldown vraagje - Softwareontwikkeling

woensdag 15 februari 2006 15:31

Acties:

Verwijderd

Topicstarter

ik heb het volgende menu:

code:

<html>
<head>
<script type="text/javascript" src="drop_down.js"></script>
<style type="text/css">
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

body {          font: normal 11px verdana;}
ul {            margin: 0;
            padding: 0;
            list-style: none;
            width: 150px;           /* breedte menu */
            border-bottom: 1px solid #ccc;}
ul li {         position: relative;}
li ul {         position: absolute; 
            left: 149px;            /* 1px smaller dan de width */
            top: 0;
            display: none;  }
ul li a {       display: block;         /* menu items */
            text-decoration: none;
            color: #777;
            background: #fff;           
            padding: 5px;
            border: 1px solid #ccc;
            border-bottom: 0;}
ul li a:hover {     color: #E2144A; 
            background: #f9f9f9; }      /* achtergrond bij hoveren */
li ul li a {        padding: 2px 5px; }         /* stijl van submenus */
li ul li ul li a {  padding: 0px 5px; }         /* stijl van sub-submenus */
li:hover ul, li.over ul { 
            display: block; }


</style>
</head>

<body>
<ul id="nav">
    <li><a href="#">A</a></li> 
    <li><a href="#">B</a> 
      <ul>
        <li><a href="#">B1</a></li> 
        <li><a href="#">B2</a></li> 
        <li><a href="#">B3</a></li> 
      </ul> 
    </li> 
    <li><a href="#">C</a> 
      <ul>
        <li><a href="#">C1</a>
     <ul>
      <li><a href="#">C11</a></li> 
          <li><a href="#">C12</a></li> 
          <li><a href="#">C13</a></li> 
          <li><a href="#">C14</a></li> 
         </ul>
    </li> 
        <li><a href="#">C2</a></li> 
        <li><a href="#">C3</a></li> 
        <li><a href="#">C4</a></li> 
        <li><a href="#">C5</a></li> 
      </ul> 
    </li>
    <li><a href="#">D</a> 
      <ul>
        <li><a href="#">D1</a></li> 
        <li><a href="#">D2</a></li> 
        <li><a href="#">D3</a></li> 
        <li><a href="#">D4</a></li> 
      </ul> 
    </li> 
  </ul>
</body>
</html>

alleen de '3e laag' die vouwt tegelijk uit met de 2e laag als je de eerste hoovert...
weet iemand een oplossing?
ik kan dus wel de stijl apart aanpassen, maar ik krijg het niet voor elkaar dat ze pas uitvouwen als je over het submenu heen hoovert...

[ Voor 55% gewijzigd door Verwijderd op 15-02-2006 16:39 ]

woensdag 15 februari 2006 17:05

Acties:

CaptBiele

No Worries!

volgens mij hoef je alleen de onderlinge niveau's van elkaar te onderscheiden met bijvoorbeeld id's of class.

want je probeert het nu wel erg generiek...

woensdag 15 februari 2006 18:42

Acties:

BtM909

Watch out Guys...

Dus zoiets: http://therealcrisp.xs4all.nl/upload/menu_hori.html

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

donderdag 16 februari 2006 08:57

Acties:

Verwijderd

Topicstarter

BtM909 schreef op woensdag 15 februari 2006 @ 18:42:
Dus zoiets: http://therealcrisp.xs4all.nl/upload/menu_hori.html

ja zoiets, maar dan zonder die hele meuk aan js

ik wil gewoon in mijn code wat css statements toevoegen zodat hij die 3e laag pas opent als je over de 2e hene gaat

donderdag 16 februari 2006 09:13

Acties:

Sappie

De Parasitaire Capaciteit!

Om wat javascript kom je toch niet heen om de :hover pseudo class in IE te laten werken op iets anders dan een anchor.

heb dit ooit eens voor iemand gemaakt (javascript kan wellicht nog wat kleiner / efficienter):

http://tienstra4.flatnet....~tom/rein-got/willempiet/

ajb

edit:
url weer ff valid gemaakt

[ Voor 9% gewijzigd door Sappie op 06-03-2006 20:42 ]

Specs | Audioscrobbler

donderdag 16 februari 2006 09:56

Acties:

BtM909

Watch out Guys...

Verwijderd schreef op donderdag 16 februari 2006 @ 08:57:
[...]

ja zoiets, maar dan zonder die hele meuk aan js

ik wil gewoon in mijn code wat css statements toevoegen zodat hij die 3e laag pas opent als je over de 2e hene gaat

Die JS is juist gemaakt dat het in iedere browser werkt EN als je met je muis van het menu afgaat, het even duurt voordat het menu sluit (vind ik vaak toch iets mooier).

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

donderdag 16 februari 2006 10:57

Acties:

Verwijderd

Topicstarter

BtM909 schreef op donderdag 16 februari 2006 @ 09:56:
[...]

Die JS is juist gemaakt dat het in iedere browser werkt EN als je met je muis van het menu afgaat, het even duurt voordat het menu sluit (vind ik vaak toch iets mooier).

ik ben nu met jouw voorbeeld bezig en ik heb het bijna voor elkaar,
behalve dan dat ik een horizontaal menu wil ipv vertikaal,
dat werkt helemaal behalve dat er tussen de knoppen in het hoofdmenu een witruimte komt te zitten

donderdag 16 februari 2006 11:04

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op donderdag 16 februari 2006 @ 10:57:
[...]

ik ben nu met jouw voorbeeld bezig en ik heb het bijna voor elkaar,
behalve dan dat ik een horizontaal menu wil ipv vertikaal,

Ik denk dat je dat andersom bedoelt? verticaal dus?
Overigens is het wel met puur CSS te doen - ook met multiple levels - maar dan zal je met de child-selector moeten werken (en dus ook daar weer een fix voor moeten implementeren voor IE) - zie het stukje commented CSS in het verticale voorbeeld

Daarbij vind ik dit behavior, en dus acht ik CSS daarvoor niet de juiste techniek...

[ Voor 5% gewijzigd door crisp op 16-02-2006 11:05 ]

Intentionally left blank

donderdag 16 februari 2006 11:15

Acties:

Verwijderd

Topicstarter

crisp schreef op donderdag 16 februari 2006 @ 11:04:
[...]

Ik denk dat je dat andersom bedoelt? verticaal dus?
Overigens is het wel met puur CSS te doen - ook met multiple levels - maar dan zal je met de child-selector moeten werken (en dus ook daar weer een fix voor moeten implementeren voor IE) - zie het stukje commented CSS in het verticale voorbeeld

Daarbij vind ik dit behavior, en dus acht ik CSS daarvoor niet de juiste techniek...

ik bedoelde horizontaal uitschuiven,

handig haha
maar dankje!!

donderdag 16 februari 2006 11:32

Acties:

BtM909

Watch out Guys...

crisp schreef op donderdag 16 februari 2006 @ 11:04:
[...]

Ik denk dat je dat andersom bedoelt? verticaal dus?

Aah die zocht ik dus

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

donderdag 16 februari 2006 13:27

Acties:

Sappie

De Parasitaire Capaciteit!

crisp schreef op donderdag 16 februari 2006 @ 11:04:
Daarbij vind ik dit behavior, en dus acht ik CSS daarvoor niet de juiste techniek...

Ik vind het ook behavior, maar vind toch dat het zowel met CSS als met javascript op te lossen is.

Het inbouwen van een delay kan de usability voor onhandige muisgebruikers (die er veel zijn) verbeteren. Desondanks kies ik er, vanwege de eenvoud waarmee het mbv CSS te bewerkstelligen (niet dat het met javascript erg ingewikkeld is) is, vaak voor dit soort menu's met CSS te creeren. Helaas kom je dan toch weer niet om het gebruik van javascript heen om het een en ander in IE goed te laten werken, maar dat is een ander verhaal.

Specs | Audioscrobbler

vrijdag 17 februari 2006 12:37

Acties:

Verwijderd

Topicstarter

ik zit nu met de volgende uitdaging,
tussen de <li> van het eerste rijtje wil ik graag een margin-top van 5px hebben zodat er tussen de knoppen een ruimte zit waardoor je de achtergrond kan zien, alleen nu doet de rest van de li's dat dus ook, is hier een oplossing voor? ik heb al het volgende gedaan:

code:

ul#menu li ul {
    position: absolute;
    margin-top: -15px;          
    margin-left: 175px;         
    display: none;
    margin-top: 0px; }

ik hoopte dat die de eerdere margin zou overschrijven,
maar dat werkt helaas niet

dit is de gehele code:

code:

<style type="text/css">

ul#menu, ul#menu li ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 180px;               
    border-bottom-width: 0px;
}
ul#menu li {
    /*border-left: 1px solid #E96A03;*/
    border-right: 1px solid #E96A03;
    border-top: 1px solid #E96A03;
    border-bottom: 1px solid #E96A03;
    background-color: #FFFFFF;
    margin-top: 5px;
}
ul#menu li a {
    display: block;
    padding: 0px 4px;
    color: #000000;
    font-family: arial, tahoma, helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-align: right;
    text-decoration: none;          
}
ul#menu li a:hover {
    background-color: #FFFFFF;
}
ul#menu li ul {
    position: absolute;
    margin-top: -15px;          
    margin-left: 175px;         
    display: none;
}
/*
ul#menu li:hover>ul {
    display: block;
}
*/

</style>

vrijdag 17 februari 2006 12:41

Acties:

Sappie

De Parasitaire Capaciteit!

je specificeert een margin-top voor je 'first-level' li.. om die voor hogere li's teniet te doen dien je dus de 'hogere-level' li's een andere margin-top te geven.

code:

1	#menu li li { margin: 0; }

Specs | Audioscrobbler

vrijdag 17 februari 2006 12:45

Acties:

Verwijderd

Topicstarter

Sappie schreef op vrijdag 17 februari 2006 @ 12:41:
je specificeert een margin-top voor je 'first-level' li.. om die voor hogere li's teniet te doen dien je dus de 'hogere-level' li's een andere margin-top te geven.
code:
1
#menu li li { margin: 0; }

iets dergelijks werkt dus helaas niet ik zit ook al van alles te proberen maar het helpt niet..
correctie
het werkt nu uiteindeljik wel,
vreemd genoeg maakt het ook nog uit waar je het in de code zet,
en een deel van de borders vredwijnt ineens,
ik ga ff verder testen dankje!

[ Voor 22% gewijzigd door Verwijderd op 17-02-2006 12:47 ]

vrijdag 17 februari 2006 12:47

Acties:

Sappie

De Parasitaire Capaciteit!

ik zie niet in waarom dat niet zou werken.. de specificity is immers hoger. Ervaar je dit probleem in alle browsers?

enne.. staat het misschien ergens online?

edit:

naar aanleiding van je edit.. als je goed kijkt naar specificity en nix dubbel in je css opneemt, zou het niet uit moeten maken waar je de selectors in je CSS opneemt.

[ Voor 38% gewijzigd door Sappie op 17-02-2006 12:51 ]

Specs | Audioscrobbler

vrijdag 17 februari 2006 12:54

Acties:

Verwijderd

Topicstarter

dit is het geworden:

code:

<style type="text/css">

ul#menu, ul#menu li ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 180px;               
    border-bottom-bottom: 1px solid #E96A03;
}
ul#menu li {
    /*border-left: 1px solid #E96A03;*/
    border-right: 1px solid #E96A03;
    border-top: 1px solid #E96A03;
    border-bottom: 1px solid #E96A03;
    background-color: #FFFFFF;
    margin-top: 5px;
}
ul#menu li li { 
    margin-top: 0px;
    border-left: 1px solid #E96A03;
    border-bottom: 0px solid #E96A03;}
ul#menu li ul { 
    border-bottom: 1px solid #E96A03;}

ul#menu li a {
    display: block;
    padding: 0px 4px;
    color: #000000;
    font-family: arial, tahoma, helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-align: right;
    text-decoration: none;          
}
ul#menu li a:hover {
    background-color: #FFFFFF;
}
ul#menu li ul {
    position: absolute;
    margin-top: -15px;          
    margin-left: 175px;         
    display: none;
    /*background-color: #E96A03;*/
}
/*
ul#menu li:hover>ul {
    display: block;
}
*/

</style>

nee dat zou je zeggen, ik had het eerst onderaan geplakt toen deed het het niet, vervolgens na het andere statement en toen werkte het wel, apart...

vrijdag 17 februari 2006 12:57

Acties:

Sappie

De Parasitaire Capaciteit!

wellicht dat je het dan per ongeluk in je uitgecommenteerde gedeelte had geplaatst ofzo, want zoals ik het nu zie zou het echt niet uit moeten maken.

verder is dit dubbel op:

code: