Share
In deze screencast-tutorial laat ik je zien hoe je een geweldig, veelzijdig navigatiemenu kunt bouwen. Het bevat notificatie bubbels, een megamenu en onbeperkte submenu's (zoals we slim zullen zijn met onze CSS selectors). Er zullen coole CSS3-overgangen zijn, en we zullen een jQuery-plug-in schrijven om oudere browsers te redden die de effecten niet ondersteunen.
In dit eerste deel concentreren we ons op het bouwen en stylen van ons basismenu, inclusief het submenu.
In dit deel zullen we enkele CSS3-effecten toevoegen; een eenvoudig fade-in effect, plus een meer uitgebreide glijdende overgang.
Laten we nu beginnen met het bouwen van ons mega-menu, te beginnen met de markup ...
Om alles af te ronden, laten we nu een jQuery-plug-in schrijven om te fungeren als een back-up van effecten voor verouderde browsers.
Bijlage: In dit laatste gedeelte, op 4m50s, heb ik het var-zoekwoord weggelaten (resulterend in een globale variabele in plaats van een lokale variabele). Het werkt nog steeds natuurlijk, maar een lokale variabele heeft de voorkeur.
Accentsconagua