[css]Verticale menu - Stukken zichtbaar / onzichtbaar - Softwareontwikkeling

zaterdag 31 mei 2008 08:13

Acties:

Topicstarter

Hey

Ik zit met een probleempje in verband met een verticale menu.

Eigenlijk is het eenvoudig wat ik wil

, maar ik wil het volledig met css & ul/li doen, en dat lijkt een beetje moeilijk.

Wat wil ik precies doen?

Als ze op mijn site komen wil ik deze menu laten zien :
Afbeeldingslocatie: http://nele-tom.hs-service.be/temp/menu1.gif

Afbeeldingslocatie: http://nele-tom.hs-service.be/temp/menu1.gif

als ze dan bijvoorbeeld op menu1 klikken, wil ik dat menu 1.1 tevoorschijn komt (en ook 1.2 & 1.3) zoals hieronder getoond :
Afbeeldingslocatie: http://nele-tom.hs-service.be/temp/menu2.gif

Afbeeldingslocatie: http://nele-tom.hs-service.be/temp/menu2.gif

na de klik, moet dit dus gewoon zo blijven staan. Indien er dan bijvoorbeeld op menu 2 geklikt wordt, klapt menu 1 terug in, en krijgen we
Afbeeldingslocatie: http://nele-tom.hs-service.be/temp/menu3.gif

Afbeeldingslocatie: http://nele-tom.hs-service.be/temp/menu3.gif

Ik geraak wel zo ver dat ik mijn menustructuur volledig in mijn html kan zetten. Mijn html ziet er als volgt uit :

HTML:

<html>
<head>
    <title>Test</title>
    <link rel="stylesheet" media="all" type="text/css" href="menu.css" />   
</head>
<body>

<div class="divNav">
    <ul class="nav">
        <li>menu 1</li>
            <ul>
                <li>menu 1.1</li>
                <li>menu 1.2</li>
                <li>menu 1.3</li>
            </ul>
        <li>menu 2</li>
            <ul>
                <li>menu 2.1</li>
                <li>menu 2.2</li>
                <li>menu 2.3</li>
            </ul>
        <li>menu 3</li>
    <ul>
</body>
</html>

En met onderstaande css, slaag ik er in om de submenu's onzichtbaar te maken... Maar hoe krijg ik ze nu opnieuw wel zichtbaar?

Cascading Stylesheet:

.divNav {
    font-family: "Verdana", "Arial";
   font-size:  8pt;
   color: #3A373E;
    line-height: 200%;
   background-color: #DCDCDE
    margin: 0;
    padding: 0;
    width: 185px;
}

.nav {
    position: relative;
    top: 55px;
    width: 185px;
    list-style-type: none;
}
    
.nav ul {
    padding: 0;
    margin: 0;
    visibility: hidden;
    position: absolute;
}

.nav li {
    position:relative;
    background-color: #DCDCDE
}


.nav ul li{
    padding-left: 5px;
    margin-left: 5px;
}

Iemand een idee hoe je dit kunt oplossen?

Thanks,
c00kie

Build a bridge, get over it... Specs : yes !!! website over bouwen & verbouwen

zaterdag 31 mei 2008 09:57

Acties:

Geert.H

Zoals je het wilt kun je het niet alleen met CSS/html oplossen. Hiervoor zal je javascript moeten gebruiken. Ook kan je het doen door het te programmeren in php.

Het nadeel van de javascript is dat bij een refresh alles weer zal worden ingeklapt (alhoewel je dat waarschijnlijk ook wel weer kan opvangen). Dus daarom is wellicht een php/asp functie het beste.

Wat je doet is de ul die open moet klappen een id/class meegeven die ervoor zorgt dat die opengeklapt staat. Dit kan je dus doen door met php te checken welk menu moet worden opengeklapt, en die de class meegeven.

zaterdag 31 mei 2008 09:58

Acties:

c00kie

Topicstarter

daar vreesde ik dus al voor. Heb nu wel een oplossing gevonden met javascript, maar ik ben daar voorlopig nog niet zo voor te vinden

.

Ik ga effe verder op zoek, maar toch in ieder geval al bedankt, dan weet ik dat ik niet meer verder moet zoeken, puur css.

Build a bridge, get over it... Specs : yes !!! website over bouwen & verbouwen

zaterdag 31 mei 2008 10:14

Acties:

Muthas

O+

Geert.H schreef op zaterdag 31 mei 2008 @ 09:57:
Ook kan je het doen door het te programmeren in php.

Wat je doet is de ul die open moet klappen een id/class meegeven die ervoor zorgt dat die opengeklapt staat. Dit kan je dus doen door met php te checken welk menu moet worden opengeklapt, en die de class meegeven.

Eh, PHP is serverside. Daarmee krijg je dus niet voor elkaar dat wanneer je klikt op menu 2 terwijl menu 1 open is, menu 2 open gaat en menu 1 dicht gaat.

Zal inderdaad met JavaScript moeten, maar valt allemaal heel erg mee

Kan je genoeg over vinden ook

zaterdag 31 mei 2008 10:26

Acties:

Kiphaas7

Zonder javascript zal je menu ook moeten werken, als je een beetje aardig wil zijn voor je bezoekers zonder javascript. Ik denk dat als je googled op suckerfish je behoorlijk ver komt met een functioneel css menu, alleen is het dan zo dat je menu openklapt en dichtklapt met behulp van hoovers.

Wil dat het met klicks werkt, zoals je aangeeft, kun je je menu enhancen met javascript, zodat het (sub)menu openblijft na een klick op de titel van het submenu.

[ Voor 8% gewijzigd door Kiphaas7 op 31-05-2008 10:30 ]

zaterdag 31 mei 2008 10:40

Acties:

c00kie

Topicstarter

Kiphaas7 schreef op zaterdag 31 mei 2008 @ 10:26:
Zonder javascript zal je menu ook moeten werken, als je een beetje aardig wil zijn voor je bezoekers zonder javascript. Ik denk dat als je googled op suckerfish je behoorlijk ver komt met een functioneel css menu, alleen is het dan zo dat je menu openklapt en dichtklapt met behulp van hoovers.

Wil dat het met klicks werkt, zoals je aangeeft, kun je je menu enhancen met javascript, zodat het (sub)menu openblijft na een klick op de titel van het submenu.

dat heb ik dus ondertussen ook gevonden, maar het maakt het allemaal iets moeilijker omdat het eigenlijk een aanpassing van een bestaande site is...
Ik ga in ieder geval proberen kijken naar een php oplossen, op basis van de getoond pagina, niet het mooiste misschien, maar op dit moment gaat dat wel het snelste gedaan zijn. 't Is om nog een paar jaar te overbruggen, en de aanpassingen net iets makkelijker te maken in de toekomst!

Build a bridge, get over it... Specs : yes !!! website over bouwen & verbouwen

zaterdag 31 mei 2008 10:46

Acties:

Borizz

Kiphaas7 schreef op zaterdag 31 mei 2008 @ 10:26:
Zonder javascript zal je menu ook moeten werken, als je een beetje aardig wil zijn voor je bezoekers zonder javascript. Ik denk dat als je googled op suckerfish je behoorlijk ver komt met een functioneel css menu, alleen is het dan zo dat je menu openklapt en dichtklapt met behulp van hoovers.

Wil dat het met klicks werkt, zoals je aangeeft, kun je je menu enhancen met javascript, zodat het (sub)menu openblijft na een klick op de titel van het submenu.

Het menu toegankelijk maken voor gebruikers zonder javascript is redelijk eenvoudig in dit geval. Standaard klap je je menuboom gewoon uit. En met javascript zorg je ervoor dat hij na het inladen wordt ingeklpat (indien JS aanwezig is dus).

Afhankelijk van je doelgroep zou ik namelijk meer tijd besteden aan het toegankelijk maken van je websites (menu's ook uit te klappen met het toetsenbord via js bijvoorbeeld) dan een CSS alternatief bieden indien JS is uitgeschakeld.

If I can't fix it, it ain't broken.

zaterdag 31 mei 2008 11:25

Acties:

Muthas

O+

Kiphaas7 schreef op zaterdag 31 mei 2008 @ 10:26:
Zonder javascript zal je menu ook moeten werken, als je een beetje aardig wil zijn voor je bezoekers zonder javascript. Ik denk dat als je googled op suckerfish je behoorlijk ver komt met een functioneel css menu, alleen is het dan zo dat je menu openklapt en dichtklapt met behulp van hoovers.

Wil dat het met klicks werkt, zoals je aangeeft, kun je je menu enhancen met javascript, zodat het (sub)menu openblijft na een klick op de titel van het submenu.

Suckerfish = hover = niet aanwezig in IE6 = JavaScript

zaterdag 31 mei 2008 11:42

Acties:

Verwijderd

Google heeft voorbeelden die allemaal werken onder IE6. Geen Javascript voor nodig. Misschien had er meer aandacht besteed kunnen worden aan de ongeldige HTML opmaak. Ik weet niet hoe ik het het best kan omschrijven.

HTML:

   <ul class="nav">
        <li>menu 1</li>
            <ul>
                <li>menu 1.1</li>
                <li>menu 1.2</li>
                <li>menu 1.3</li>
            </ul>

->

HTML:

   <ul class="nav">
        <li>menu 1
            <ul>
                <li>menu 1.1</li>
                <li>menu 1.2</li>
                <li>menu 1.3</li>
            </ul> 
        </li>

zaterdag 31 mei 2008 12:09

Acties:

Muthas

O+

In IE6 kan zowel de klik als hover methode echt niet zonder JavaScript, IE6 (en lager) support alleen a:hover, meer niet.

zaterdag 31 mei 2008 14:53

Acties:

c00kie

Topicstarter

Verwijderd schreef op zaterdag 31 mei 2008 @ 11:42:
Google heeft voorbeelden die allemaal werken onder IE6. Geen Javascript voor nodig. Misschien had er meer aandacht besteed kunnen worden aan de ongeldige HTML opmaak. Ik weet niet hoe ik het het best kan omschrijven.

HTML:

   <ul class="nav">
        <li>menu 1</li>
            <ul>
                <li>menu 1.1</li>
                <li>menu 1.2</li>
                <li>menu 1.3</li>
            </ul>

->

HTML:

   <ul class="nav">
        <li>menu 1
            <ul>
                <li>menu 1.1</li>
                <li>menu 1.2</li>
                <li>menu 1.3</li>
            </ul> 
        </li>

ow zekers. Merci, daar had ik ff over gekeken.

Build a bridge, get over it... Specs : yes !!! website over bouwen & verbouwen

zaterdag 31 mei 2008 15:08

Acties:

curry684

left part of the evil twins

Muthas schreef op zaterdag 31 mei 2008 @ 12:09:
In IE6 kan zowel de klik als hover methode echt niet zonder JavaScript, IE6 (en lager) support alleen a:hover, meer niet.

Of je gebruikt IE7/IE8.

Professionele website nodig?

zaterdag 31 mei 2008 16:54

Acties:

Kiphaas7

Muthas schreef op zaterdag 31 mei 2008 @ 11:25:
[...]

Suckerfish = hover = niet aanwezig in IE6 = JavaScript

Tsja, ik zelf zou het dan geen probleem vinden om javascript te gebruiken om ie6 compatible te maken. Moet je maar geen brakke browser gebruiken.

Maar dat is mijn mening, hangt natuurlijk totaal van je doelgroep en eisen af.

curry684 schreef op zaterdag 31 mei 2008 @ 15:08:
[...]

Of je gebruikt IE7/IE8.

Het hele punt was dat ik zei dat het menu moest werken zonder javascript. Een javascript library toevoegen haalt dat punt een beetje onderuit.

[ Voor 29% gewijzigd door Kiphaas7 op 31-05-2008 16:55 ]

zaterdag 31 mei 2008 18:03

Acties:

curry684

left part of the evil twins

Kiphaas7 schreef op zaterdag 31 mei 2008 @ 16:54:
[...]

Het hele punt was dat ik zei dat het menu moest werken zonder javascript. Een javascript library toevoegen haalt dat punt een beetje onderuit.

Daar ben ik het niet mee eens - als iemand JS vrijwillig uitzet _{is ie een stomme idioot en} moet ie er maar mee leven dat websites minder subliem functioneren. Een dropdown menu hoort volledig te werken op CSS, maar als iemand een ancient deprecated kutbrowser gebruikt is het wmb perfect toelaatbaar om middels een conditional comment een Javascript patch te gebruiken - dat is namelijk heel wat anders dan een Javascript menu toepassen wat ik idd onacceptabel acht.

Alleen gebruikers met IE6 en geen Javascript hebben dan pech, en sja da's net zo'n combinatie als mensen die IE4 op Win95 gebruiken - support houdt ergens op.

Professionele website nodig?

zondag 1 juni 2008 00:33

Acties:

Kiphaas7

curry684 schreef op zaterdag 31 mei 2008 @ 18:03:
[...]

Daar ben ik het niet mee eens - als iemand JS vrijwillig uitzet _{is ie een stomme idioot en} moet ie er maar mee leven dat websites minder subliem functioneren. Een dropdown menu hoort volledig te werken op CSS, maar als iemand een ancient deprecated kutbrowser gebruikt is het wmb perfect toelaatbaar om middels een conditional comment een Javascript patch te gebruiken - dat is namelijk heel wat anders dan een Javascript menu toepassen wat ik idd onacceptabel acht.

Alleen gebruikers met IE6 en geen Javascript hebben dan pech, en sja da's net zo'n combinatie als mensen die IE4 op Win95 gebruiken - support houdt ergens op.

Zie het eerste gedeelte van mijn post die je quote, dan zie je dat ik het (in minder woorden) roerend met je eens ben.

Ik zei het alleen dat een functioneel puur uitklapbaar css menu, daarna verbeterd met javascript, dus niet mogelijk is op ie6, omdat je al javascript nodig hebt om het uberhaupt te laten functioneren. Ook zei ik dus dat ik dat persoonlijk acceptabel vind, maar als iemand die dit wil doen de pro-ie6-anti-javascript.com website runt, heeft hij/zij natuurlijk wel een probleem (doelgroep verhaal).

Ik denk dat iedereen hier precies hetzelfde zegt, maar dat we langs elkaar heen aan het praten zijn.

zondag 1 juni 2008 11:39

Acties:

Bozozo

Your ad here?

Zoveel moeite is het nou ook weer niet om rekening met IE6 zonder JS te houden. Even serverside het actieve item een menuutje meegeven en klaar is kees-de-crossbrowser-supporter.

Bij een menu met meerdere niveau's wordt het wel wat lastiger, maar ook dat is m.i. te doen.

Kleine moeite om even x% meer gebruikers te bedienen.

TabCinema : NiftySplit