Frontend webbutveckling har vuxit till en mycket populär nisch. Med expansion av jQuery börjar fler webbdesigners skapa fantastiska animationer och bieffekter. Möjligheterna är obegränsade!
I den här handledningen skapar vi en navigeringsmeny för magasinstil. Detta kommer att skapas med några snygga CSS3-tekniker för att fungera i standardkompatibla webbläsare. Även om du är skakig med jQuery borde du kunna följa med den här lilla koden och kanske lära sig något nytt. Kolla in live demo-skriptet i mitt exempel.
Testa
Visa Live Demo - Hämta källa
Strukturering av vår sida HTML
Vi bör börja med att bygga den grundläggande sidlayouten. Jag har gjort det i HTML med en orörd lista för meny länkar. Både CSS-format och jQuery-biblioteket exkluderas externt vilket sparar lite utrymme. Tillagt nedan är rubriken till vår HTML-kod.
JQuery-biblioteket v1.6.2 är värd på Googles servrar för webbutvecklare att använda. Detta kan ofta skära av lite av belastningen till dina egna servrar. Skillnader är särskilt märkbara om du behandlar tiotals eller hundratusentals besökare dagligen. Jag har också satt min doktyp till HTML5, inte att den ska påverka vårt script.
Att flytta ner lite i koden, låt oss ta en titt på det inre kroppsinnehållet. Nedan finns en kopia / klistra in allt inom kropps taggen. Jag har tagit bort den sista jQuery-koden eftersom vi tittar på det i ett senare avsnitt.
Så detta borde slutföra vår huvudsakliga HTML-struktur. Alla nestade listor använder ul-element som är placerade i ett förälderlistobjekt. Inte för svårt om du har ett grundläggande grepp i webbdesign och kodning. Så låt oss gå direkt fram i CSS-stilar.
Designa med CSS
Jag bryter ner varje segment av filen small style.css som bifogas demokoden. Vi börjar med en gruppblock som återställer marginaler / vadderingar för hela dokumentet. En enkelmans sida återställs, verkligen.
Huvudinnehållet kommer att innehålla en liten logotyp som jag gjorde i Photoshop. Jag har använt .wrap som en klass så att vi kan använda samma stilar med vår nav-meny. Detta omslag skapar en 800px innehålls div och centrerar den på sidan.
Nästa grupp är lite större, vilket ger stilar för root navmenyn och dess listobjekt. Notera #nav väljaren finns på vårt ursprungliga oorderade listelement, så vi kan använda detta för att välja alla sub-ul-element senare.
På roten UL har jag lagt 3 solida gränser: vänster, höger och botten. Den övre gränsen spänner över hela webbplatsen och detta läggs till i rubrikområdet. Jag har dessutom rundat längst ned till vänster och höger hörn. Denna teknik som gjorts i CSS3 använder -moz, -webkit och standardradiusegenskaperna.
Listobjekten ges a z-index av 999 för att visas över alla andra element. Så på detta sätt skulle vi sväva av den ursprungliga li på vår subnav och förlora popupen. I stället expanderar li-elementet för att ta upp hela höjden på vår nya skjutmeny och stanna uppe när vi mus över länkarna. Också position: relativ; läggs till för att korrekt använda absolut positionering på den inre listan.
Ankarlänkarna är inte så intressanta i sig själva. De markerar med en vit bakgrund på svävar med ytterligare två gränser till vänster och höger sida. På den sista svängväljaren lade jag till en annan klass .hov att användas av jQuery. Detta kommer att göra det när du flyttar muspekaren över undermenylänkarna fortsätter den ursprungliga navlänken att svängas! Ganska snyggt.
Undernavigationsmenyn Styles
Den här sista CSS-koden kommer att ställa in våra undermeny länkar. Vi använder absolut positionering för att flytta runt vårt sub-ul-element direkt till toppen av behållaren. Också en bra drop shadow effekt med några nya CSS3 egenskaper.
De enskilda egenskaperna jag har använt och deras stödjande webbläsare kan bli lite förvirrande. Nedan följer en liten översättningsguide.
- -moz-box-skugga - Firefox / Mozilla Engine
- -å-box-skugga - Opera
- -webkit-box-skugga - Standard WebKit-webbläsare, Google Chrome eller Safari
- boxskugga - De flesta andra inklusive Microsoft Internet Explorer
Varje del-nav-listobjekt är inställt på 180px i bredd. Detta definierar max storlek vår meny kommer att dyka upp för att vara. Om du hamnar över koden bör du ändra detta för att rymma storlekar i din egen mall.
Varje undermenyankare ställs in till en höjd och linjens höjd på 20px. Detta håller menytexten centrerad vertikalt i varje menyblock. På svängareffekt har jag gömt gränserna som är ärvda från föräldrarnas navlänkar. Allt ganska enkelt med CSS-stilar, och nu är den sista biten av JavaScript för att styra allt tillsammans.
jQuery Visa / Dölj Undermeny
Direkt efter finalen .slå in div innehållet slutar. Så här har jag lagt till en ny skript tagg och placerat all jQuery-koden inuti. Detta gör att redigering mycket enklare, och vår kod är ganska liten ändå.
Starta skriptet genom att kontrollera om siddokumentet har slutförts. Vi vill utlösa vår första funktion efter att användaren har flyttat över ett listobjekt i root #nav ul. Det första blocket av funktionskoden består av två linjer.
Den riktar sig mot vårt inre ul-element och lägger till en nedsläppseffekt för att slutföra på 200 millisekunder. För det andra måste vi lägga till .hov klass på den aktuella valda ankarlänken. Detta håller den svängda effekten i huvudlänken även när du flyttar över delnavigationslänkar. Den andra funktionen är vår återuppringningsparameter för .sväva() metod som händer på musen.
Detta består också av 2 enkla kodrader. Dessa faktiskt bara vända vad vi har gjort i det första området. Den inre ulen tvingas glida upp i en snabbare animation (100 millisekunder lång) och vi tar bort svängklassen också.
Visa Live Demo - Hämta källa
Slutsats
Jag har lämnat menyn ganska grundläggande så andra designers kan tweak mallen för att passa sin egen hemsida. Det är ganska imponerande vad som är möjligt med bara ett par linjer i jQuery! Om du har genomfört något liknande på din egen webbplats, var god och kontakta oss. Och glöm inte att ladda ner och spela runt med demokällkoden.