Funktionen "Dashboard" på en Mac ser bra ut, och menyn som låter dig lägga till / ta bort widgets är en väl utformad funktion. En liknande effekt kan lägga till en helt ny nivå av funktionalitet på en webbplats, vilket ger en enkel rullgardinsmeny högst upp på en sida. Denna handledning kommer att gå dig igenom processen från början till slut.
Innan du börjar kan du kolla in demoen eller ladda ner fullständig källkod här.
Börjar i Photoshop
1) Skapa en grate repeat bakgrund.
Börja med att skapa en 56 (W) x 64 (H) px-bild i Photoshop. Gör sedan en 3 färgad gradient från # 111111 till # 313131 och slutligen tillbaka till # 111111. Det ska se ut så här.
Nu är det dags att lägga till dimples.
Välj borstverktyget och välj en kvadratborste som är 2px i storlek och # 000000. Skapa ett nytt lager och se till att det är valt. Börja med att göra en prick någonstans på det här nya lagret. Flytta nu den punkten 3px från toppen av bilden och 1px från vänster sida. Du kan sedan duplicera det här laget 11 gånger (så du har en rad med 12 punkter totalt) och varje gång flytta pricken ner 5px.
Du kan nu sammanfoga alla dessa lager (förutom bakgrunden.) Duplicera den här nya raden med punkter 6 gånger, och varje gång flytta raden åt höger 8px.
Använd den första raden som skapats, duplicera den en gång till och flytta den 4px höger och 2px neråt. Den här nya raden kan också dupliceras 6 gånger och varje flyttad 8px höger. Du borde nu ha bakgrunden på instrumentpanelen.
2) Hitta en ikon pack som den som används i denna handledning. Gruvan hittades på: http://www.smashingmagazine.com/2008/10/01/dellipack-2-a-free-icon-set/
3) Skapa ett textområde för ikontipsen.
Skapa en ny bild 292px (W) x 34px (H) och skapa ett nytt lager. Ta bort bakgrundsskiktet. Rita nu en rundad rektangelväg precis som vi gjorde för ikonen, men den här gången vill den vara 290px (W) x 32px (H) och göra den till ett val igen och fylla den med en vit. Ställ in fyllningen på detta lager till 10%. Nu är allt som är kvar att göra, lägga till en 1px vit stroke runt det som lämnar dig med det här. (Jag har lagt en svart bakgrund på exemplet som du inte kommer att ha, bara så att du kan se hur det ska se ut)
Nu är vi redo att placera lite HTML och CSS i detta och göra det!
HTML och CSS
För att bygga detta exempel behöver du den senaste J-Query-utgåvan.
Första sak att göra är att förbereda HTML. Vi kommer att behöva DIV-taggar, en som en övergripande behållare av allt, vilket kommer att se till att instrumentbrädan spänner över bredden på webbläsarfönstret. Den andra kommer att fungera som en behållare för ikonerna, så att de hålls fasthållna inom en bredd på 945 px. Detta är för att säkerställa att de alla kommer att synas på de flesta vanliga skärmupplösningar.
En du kan se från det här har jag bifogat ett stilark som heter index.css, jag har lagt till några stilar på det stilarket för att se till att dessa DIV ser ut och utför det jag önskar.
Bakgrundsbilden har en repetitions-x på den för att möjliggöra att bilden spänner över bredden på webbläsarfönstret. Höjden ska vara samma höjd som gratingRepeat.png vi skapade tidigare.
Förskottsbehållaren har en bredd på 945 px så att även de minsta skärmupplösningarna kan visa instrumentpanelen i sin helhet. Jag designar alltid mina webbplatser till minst 1024 x 768 eftersom det brukar vara den vanligaste skärmupplösningen vid skrivningstillfället. Dessutom, genom att ha marginal: automatiskt satt på behållaren, kommer webbläsaren att centrera ikonerna oavsett hur stor webbläsaren är inställd på. För att detta ska fungera måste elementet ha en bredduppsättning.
Nästa sak vi behöver lägga till är UL, som kommer att hålla alla våra ikoner.
Som du kan se har varje LI en annan klass kopplad till den. Det här är så att vi kan tilldela olika attribut till varje ikon. Var noga med att namnge dina klasser för att motsvara ikonen så att du kommer att förstå var du ska lägga allt.
Först kommer vi att gå igenom de viktigaste områdena av styling på UL och LI.
För det första tar UL-listestilen: ingen bort oönskade kulpunkter. Jag har också lagt en padding: 0 och margin: 0 här, detta borde stoppa alla kompatibilitetsproblem i webbläsaren som placerar saker i oväntade områden. Jag har satt dessa till attribut på UL webbplats bredvid eftersom vi kommer att använda en annan UL senare och dessa inställningar kommer också att gälla.
På förskottslistan har jag valt att placera ikonerna med float-metoden. (Jag finner det här ger mig störst kontroll över positionering.) Bredden är viktig vid flytande för att säkerställa korrekt placering. Jag har valt 645px eftersom vi måste lämna utrymme för tipsområdet, vilket kommer att läggas till senare.
LI inom denna UL har sedan fått en höjd och bredd (samma höjd och bredd som ikonerna) och sedan floats åt vänster. Genom att göra detta placeras LI i en horisontell linje som överskrider standard vertikal anpassning av UL. Margen-vänster här placeras på varje enskild LI vilket innebär att det kommer att finnas ett 15px mellanrum mellan varje ikon.
Nästa avsnitt av CSS måste upprepas och ändras något för varje ikonklass. Jag kommer att inkludera ett exempel för vägledning. Det är väldigt enkelt, sätt bakgrunden till ikonen.png och ställ sedan in bakgrunden för ikonens svävarläge. Det innebär att ikonen ändras om ikonen är svävad (i alla webbläsare förutom IE6).
Se till att du replikerar detta för att ändra klassen för varje ikon du väljer att använda. Se till att du också ändrar bilden som de använder som bakgrund.
Slutligen lägger vi till tipsområdet och stilar det. HTML-filen är mycket lik den i ikonuppsättningen. Använda UL och LI. Vi använder emellertid bara en LI med en rad olika DIV-klasser inom den.
Även om detta kan se ut som ett skrämmande kodstycke är det faktiskt väldigt enkelt. Varje DIV avser en ikon och med CSS kommer endast en eller ingen DIV att synas åt gången. Var noga med att ge varje DIV en separat klass som rör den ikon som den kommer att markera. Detta kommer att behövas i nästa steg.
För att börja, har jag float UL höger och gav den en bredd. Detta kommer att placera tipsområdet till höger om ikonerna, eftersom bredden som ges till ikonen UL låter båda elementen sitta på samma rad.
Jag har sedan fått klassen en bakgrund, som laddas i den textArea.png som skapades tidigare. Detta har fått en höjd för att den ska vara synlig.
Jag har varje DIV-klass att visa: ingen som betyder att varje DIV inom LI kommer att först döljas. Vi använder javascript för att aktivera dem senare.
Varje DIV är inställd på samma höjd och bredd som textArea.png, så att vi kan placera texten inom exakt. Text-align: Center flyttar hela texten till mitten av DIV och därmed textområdet. Slutligen linjens höjd: 35px; säkerställer att texten är centrerad vertikalt. Detta värde kommer att variera beroende på typsnittstyp och typsnittfamiljval, rättegång och fel kan behövas lite här.
Slutligen behöver vi en knapp för att klicka på instrumentpanelen. Utanför de två DIV vi har skapat sätter vi in en länk och ger den en klass av advanceMenuBtn. Detta kommer att behövas när du ringer det inom javascript senare.
Om du laddar in det i en webbläsare kan du se instrumentpanelen överst och ikonerna ändrar färg när du placerar din mover över dem, väldigt spännande!
Nu är det dags att lägga till javascript-funktionaliteten. Var noga med att placera alla efterföljande javascript i HEAD-taggarna högst upp på din sida.
Den här första biten av kod växlar siktigheten på instrumentbrädan när knappen advanceMenuBtn klickas. För att försäkra dig om att instrumentpanelen börjar osynlig bör du nu placera en display: ingen på förskottetMenu DIV i CSS.
Den andra raden i denna chunk ställer in funktionen för att vara klar att köra när sidan är klar och laddad, vilket innebär att den kommer att fungera när sidan är synlig. Nästa rad fokuserar på förskottetMenuBtn och ställer in en annan funktion som ska köras när den knappen är klickad. När du använder JQuery för att fokusera på element används den använda syntaxen väldigt lik CSS. Först förklarar du elementstypen med 'a' och då förklarar du klassen med '.advanceMenuBtn.'
Nästa rad anropar då instrumentpanelen och deklarerar vilken funktion som ska utföras och anger en variabel som berättar hur man utför det? slideToggle är en JQuery-funktion som är inbyggd i ramen och har olika hastighetsvariabler kopplade till den. Du kan välja mellan långsam, normal eller snabb. Instrumentpanelen kommer nu att visas gömd när du tittar på sidan. Genom att klicka på länken kommer då instrumentpanelen att visas.
Det sista stycket av javscript kommer att få textområdet att visa spetsen när användaren svänger över en ikon. Återigen är det här skriptet mycket repetitivt så jag ska visa dig ett exempel som behöver anpassas något för de andra ikonerna.
Detta skript är återigen väldigt enkelt och mycket effektivt. Återigen är funktionen klar att användas när sidan laddas, enligt den tredje raden. Nästa rad anropar sedan ikonen med en klass av information och ställer in en funktion för att köra när användaren lägger musen över den.
Därefter fokuseras klassen som visar textstycket i samband med den ikonen och berättar att ".show" när det händer. Denna funktion måste sedan vändas för att andra textstycken ska visas när andra ikoner svängs över.
De sista linjerna gör det exakta omvända av den första funktionen som ändrar 'mouseover' till 'mouseout' och '.show' till '. Hide'
Dessa två funktioner måste sedan upprepas för varje ikon som ändrar de klasser som kallas för att samordna med ikonen i fråga.
Nu ska vi vara redo att se det fungera i det hela!
Kolla in demoen och ladda ner full källkod här
Bra gjort och jag hoppas att du kan använda det här bra.
Observera att på grund av att IE6 inte förstår: svängfunktionen är det här exemplet mycket begränsat i den specifika webbläsaren. Det finns dock korrigeringar för det som kan hittas med hjälp av ytterligare javascript.
Prosems - E-handel webbdesign och utveckling lösningar