Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

hoe werkt deze navigatie??

Anoniem
thor2002
5 antwoorden
  • Wellicht een leuk item voor deze site….
    Ik wil een navigatie / menu maken dat grotendeels met CSS werkt. Uiteraard kijk ik dan ook bij andere sites en probeer uit te vogelen hoe zij diverse zaken uitvoeren. Zo kwam ik bij een site waar ik de navigatie wel aardig vind, maar er is één iets waar ik niet uit kom.
    De site is van admiral display en het gaat mij dus om het menu.
    De vraag: als ik op één van de pagina's sta, is in het menu de betreffende paginatitel in het menu blauw. Ik zou dit zelf regelen door op de betreffende pagina de tekst handmatig om te zetten. Maar bij de site in kwestie staat in de bron:
    [code:1:5dc0a5b350]<li class="knowledge"><a href="knowledge.html" title="Our experience" accesskey="6"><span>Knowledge</span></a></li>[/code:1:5dc0a5b350]
    Bij mij gaat het 'fout' bij het gedeelte [code:1:5dc0a5b350]accesskey=[/code:1:5dc0a5b350]. Hoe functioneert dit nou precies? Is er een script o.i.d. wat ervoor zorgt dat het menu uiterlijk wordt aangepast? In de CSS staat geen accesskey, de pagina's hebben zelf ook geen accesskey. Is er een 'systeem' dat ervoor zorgt dat het menu zelf inziet dat deze pagina nummer zes is en daarom voor dit menu item een ander CSS activeert?

    Thor2002
  • Halekidee!

    Ik ben er deels uit. De navigatie wordt visueel bepaald doordat er (een klein beetje verstopt…) ergens een heel kort regeltje staat:
    [code:1:63b752197c]<body id="knowledge">[/code:1:63b752197c]

    Dit vertelt de navigatie op welke bladzijde je zit. In het menu wordt daar vervolgens weer gebruik van gemaakt (in CSS ook ingesteld). Blijft echter de vraag staan waarom er een accesskey in zit???

    Thor2002
  • Accesskey is een extra attribuut dat je kunt gebruiken om je site toegankelijker te maken:

    Setting a Label and Access Key
  • Stel je hebt de pagina's 'aap', 'noot' en 'mies'. En je hebt de menu-items 'aap', 'noot' en 'mies'.

    Je wilt dat menu-item 'noot' blauw is als je op pagina 'noot' bent, maar niet blauw is als je op een andere pagina bent. Menu-item 'noot' mag dus alleen blauw zijn als je op pagina 'noot' bent: én de juiste pagina én het juiste menu-item. 'Aap' is alleen rood wanneer je op pagina 'aap' bent, etc.

    Als je de body van elke pagina een eigen class (of id) meegeeft en elk menu-item een eigen class (of id) die anders is dan de andere menu-items, dan kun je zeggen:
    [code:1:9ce95183fe].aap-pagina .aap-menu-item {background-color: blue}
    .noot-pagina .noot-menu-item {background-color: red}
    .mies-pagina .mies-menu-item {background-color: green}[/code:1:9ce95183fe]Zo wordt .aap-menu-item alleen blauw als je op .aap-pagina bent, en .mies-menu-item wordt alleen rood als je op .mies-pagina bent.

    Of volg de uitleg van Jon Hicks:
    www.hicksdesign.co.uk/journal/highlighting-current-page-with-css

    Die accesskey heeft helemaal nix met CSS te maken en is zelfs af te raden om te gebruiken, hoewel het wel staat vermeld als één van de eisen in de WCAG 1.0, prioriteit 3. Het is af te raden, omdat het in de praktijk niet blijkt te werken (leuk in theorie, maar door verschillen in OS en browsers niet goed toepasbaar).
    Zie ook:
    - Webrichtlijnen: sneltoetskoppelingen
    - WCAG Samurai errata
  • Ik wil ook nog ff zeggen dat die site waar je naar refereert niet echt handig omgaat met plaatjes. Heel wat tekst in de site, zoals in het menu en de header, en het plaatje onder de header en het menu (…en de heading boven de tekst, en de plaatjes naast de tekst…), zouden veel beter ook werkelijk uit tekst kunnen bestaan in plaats van tekst in een plaatje. Dat ziet er veel beter uit (ik kan nu compressie artefacten zien), en is onnodig aangezien er niet van een apart font gebruik wordt gemaakt. Daarnaast zorgt het er ook voor dat de site groter is (in de zin van bytes) dan hij hoeft te zijn.

    Daarmee bekritiseer ik niet het ontwerp, alleen het gebruik van tekst in plaatjes.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.

Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord