Hoi pasmaskas,
Even in verdiepen ...
=====
De background
Het eerste dat me opvalt als ik de pagina
www.pmkmedia.nl/menudemo/index.html open, is dat de pagina er ont-zet-tend lang over doet om de achtergrondfiguur te tonen...
Als je even naar de images gaat kijken, ben je er gauw achter waarom: de
back.jpg is maar liefst 815kB.
Waarom zoveel?
- het formaat is 1920px*1500px (waarvan op mijn 1024px*768px scherm dus nog geen 30% getoond wordt),
- het onderste deel van 650px hoog is ... wit, net als de background-kleur van de site,
- dat zijn dus 650px*1920px = 1.248.000 witte pixels die voor nop gedownload moeten worden, oftewel iets meer dan 40% van de download is overbodig,
- met deze er af hakken is de grootte maar 500kB,
- er is geen of heel weinig jpg-compressie toegepast, met 20% compressie heb je nauwelijks kwaliteitsverlies,
- al met al kan je toe met een back-nw.jpg die is teruggebracht tot nog geen 120KB ,
- dat is meer dan 6,5 keer zo snel binnengehaald!
Los hiervan blijft het de vraag: waarom zo loei-breed? Lang niet iedereen heeft een scherm van zo'n breedte. Op een toch redelijk grote resolutie van 1280*1024 is er weinig van de rechterfiguur te zien, en op een resolutie van 1024*768 helemaal niets:
=====
html-validatie
Vervolgens (zie m'n handtekening!) valt op: het is
valid html, maar wel html5. Eventueel zouden een aantal browsers (of browserversies) sommige dingen het niet zo mooi kunnen doen als bedacht.
=====
css-validatie
Vervolgens valt op: het is géén valid css2.1 (
17 fouten). Als je 'm laat testen op css3 ook niet, dan worden het
11 fouten. Vijf daarvan zijn niet erg, dat zijn browser-specifieke extra's die oudere versies tot de orde roepen.
Ook hier een kanttekening: niet alle browsers (browserversies) kunnen al het moois van css3 aan.
=====
Niet werkende menu-links
Dat ze naar het # worden doorgelinkt dat klopt, dan komtie (wat ik geleerd heb) terug naar de index.
Alléén als je al op de index-pagina zit!
Als er staat
<a href="#">HOME</a>, dan is het een link die op zoek gaat naar een bladwijzer zonder naam > en die blijft altijd op dezelfde pagina. Dat kan je ook zien in de statusbar van je browser: daar staat, als je op de pagina "HOME" met de muis over "HOME" hovert:
http://www.pmkmedia.nl/menudemo/index.html#.
Maar hier is er iets anders aan de hand: een grapje van het gebruikte accordion-script!
Via het script wordt er bij solo menu-items kennelijk voor gezorgd dat dit menu-item niet meer aanklikbaar is. Dat is er sneaky in gezet, dat krijg je met die zelfdenkende scripts!
- Test: www.bliksekaters.nl/tests/testleeuw-1.htm (de HOME-pagina)
- Hierin laat ik de HOME-knop verwijzen naar een echte andere pagina:
<h3><a href="http://developerscorner.nl/">HOME</a></h3>
- Deze link is aanwijsbaar, staat wel in de statusbar, maar reageert niet op een klik!
- Hierin laat ik de LINKS-knop ook verwijzen naar een echte andere pagina:
<h3><a href="http://developerscorner.nl/">LINKS</a></h3>
- Deze link is ook aanwijsbaar, staat ook in de statusbar, en doet het ook niet.
- (Tegelijkertijd is hierin ook het snellere background-img gezet.)
De oorzaak zou kunnen zijn:
Het gebruikte model houdt geen rekening met solo-items, en gaat ervan uit dat alle menu-items een accordion moeten krijgen; of je hebt de aanroep van jQuery niet op de goede manier gedaan.
Nu zijn er veel varianten van accordions met jQuery in omloop, die het allemaal net weer anders doen. Er zal dus in de script-code gebaggerd moeten worden, maar ik ben ik niet sterk in jQuery ...
Dan doen we het anders!
- De accordion in- en uitklappers worden getriggerd door een <h3>.
- Dus als je die <h3> er uit haalt zou ie het moeten doen.
- Hier is er bij de knop "LINKS" een <h4> voor in de plaats gezet: testleeuw-2.htm.
- Kassa! De HOME-knop doet het nog steeds niet, maar de LINKS-knop nu wel.
- Alleen zijn de css-styles van de knop verloren gegaan.
- Maar met Firebug kan je er achter komen dat het script aan de andere menu-items een serie classes vastknoopt met de namen:
class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all"
- Dat doen we hier dus maar handmatig: <h4 class="(het hele riedeltje)">
- Daarmee wordt het: testleeuw-3.htm.
- Er ontbreekt nog het driehoekje in de knop, maar in plaats van uitzoeken hoe dat via de scripts en de "jquery-ui-1.8.16.custom.css" gaat, is een identiek driehoekje gauw gemaakt en makkelijk in de css gezet (met z'n hover-variant).
- Dat levert dan deze: testleeuw-4.htm.
- Hierin doen de submenu-links het ook nog gewoon.
- De opmaak is nog wat verder ge-css'd.
Zo kan je met schoffelen in de css toch ook nog een heel eind komen.
Het alternatief is: kijken wat de bron van je accordion-scripts over solo menu-items te zeggen heeft, of een andere variant van het jQuery accordion nemen (die meteen al in een demo een solo item laat zien en werken!).
Met vriendelijke groet,
CSShunter
[Edit]Door gebruik van de <base href="..."> en het verwijderen van de jQuery-ingrediënten aldaar doen de voorbeelden het inmiddels niet meer!
[/edit]
