CSS hover menu i.pv. javascript rollovers
Hoi Nathalia:
Over het privébericht: ah, ik begrijp. Nu is het zo dat ik een "abonnement" heb op topics waar ik op gereageerd heb. D.w.z. ik krijg automatisch een e-mailtje als er een nieuwe reactie in zo'n topic is gekomen, ook als de oorspronkelijke vraag al beantwoord is. Dus een vervolgvraag kan er rustig onder komen, dan hoor ik er vanzelf van.
Dit forum zit best handig in elkaar!
Over je nieuwe oplossing voor het menu: prima-de-luxe! :thumb:
Deze rollovers worden er door Dreamweaver altijd ingezet met javascript:
onmouseover="...",
onmouseout="...", en de bijbehorende functies in de <head>:
MM_swapImgRestore() enz.
- Even een wist-u-datje: het merkwaardige voorvoegsel MM_ bij al die functies stamt nog uit de tijd dat Dreamweaver van het bedrijf MacroMedia was. Dat werd in 2005 opgekocht door Adobe, dat nu Dreamweaver verkoopt. Maar die MM_ hebben ze er nog steeds in laten staan.
Het kan ook anders: met pure css-rollovers, wat ik zelf wat mooier vind.
Dat gaat als volgt.
- In de html geef je elk menu-item een eigen id.
- Vervolgens kunnen alle onmouseover's en onmouseout's gemist worden.
- Ook de images in de menu-items hoeven er niet meer in!
Daarmee wordt de html heel simpel:
HTML:
<nav>
<ul>
<li>
<a id="m-home" href="index.html"></a>
<a id="m-tegel" href="tegelwerken.html"></a>
<a id="m-natuur" href="natuursteen.html"></a>
<a id="m-sier" href="sierbestrating.html"></a>
<a id="m-ref" href="referenties.html"></a>
<a id="m-cont" href="contact.html"></a>
</li>
</ul>
</nav>
We gaan de afbeeldingen er namelijk met css in zetten als background-images. Omdat css ook een hover-eigenschap heeft, kunnen we de achtergrond veranderen bij een hover.
Via het template hebben de menu-links al een breedte en hoogte, die hoeft er niet bij: ze zijn al precies zo groot als ze moeten zijn, alleen nu nog transparant.
Om de images er in te zetten pakken we telkens de
id van het betreffende item, en geven zo elk item z'n eigen afbeelding en z'n eigen hover-afbeelding:
Code:
#m-home { background: url(../images/home1.jpg); }
#m-home:hover,
#m-home:focus { background: url(../images/home2.jpg); }
#m-tegel { background: url(../images/tegelwerken1.jpg); }
#m-tegel:hover,
#m-tegel:focus { background: url(../images/tegelwerken2.jpg); }
enz.
Dit kan toegevoegd worden aan het stylesheet
www.discountin.es/css/style.css
Maar het kan nog mooier (1)
Voor de normale toestand zitten er nu 6 losse afbeeldingen in. Maar als je die samenvoegt tot het hele rijtje aan elkaar vastgeplakt, is er maar één img nodig voor allemaal, die er als achtergrond voor de hele <ul> ingezet wordt.
Maar het kan nog mooier (2)
Ook alle hover-toestanden kunnen aan het ene plaatje worden toegevoegd! Dan wordt het deze
tegelmenu.png:
Hierin wordt de bovenste helft gebruikt als achtergrond voor de normale toestand. Omdat het element waar het de achtergrond van is, maar half zo hoog is, komt de onderste helft niet in beeld.
Voor het hoveren kan nu het nodige stukje uit de onderste helft opgepikt worden met de eigenschap
background-position. Hiermee kan je steeds schuiven: verticaal de helft omhoog, dan is de onderste serie in beeld. Vervolgens per item (dat maar 148px breed is, en niet méér van de achtergrond kan laten zien) steeds een stukje naar links opschuiven voor het goede hover-partje.
Zo is een zogenaamde "
css-sprite" gemaakt.
Voordelen:
- Er is maar 1 afbeelding nodig in plaats van 12. Dat scheelt in downloadtijd: anders moest elk van de 12 afzonderlijk opgevraagd worden bij de server (wat veel tijd kost), en vervolgens gedownload.
- Die ene afbeelding (van 16kB) is ook nog eens kleiner dan de som van de 12 aparte (van elk ca. 4kB). Nog meer winst voor de pagina-snelheid!
- Google gebruikt ze ook (bv. deze en deze), want bij miljoenen pageviews per dag scheelt het enorm aan dataverkeer en belasting van hun servers.
- Alle javascript kan gemist worden. Ook het preloaden is niet meer nodig: op het moment dat de normale achtergrond is opgehaald, zijn tegelijk ook alle hover-toestanden opgehaald: want die zitten buiten beeld in dezelfde afbeelding!
Aardig bedacht van meneer/mevrouw css, niet?
Wat theorie & praktijk hierover:
Succes verder!
CSShunter
