Vertikal meny för webbplatsen i form av ett dragspel med jQuery

Menyn, som ni vet - en integrerad del av webbplatsen. Intressant navigera på nätet resurs kan ränte besökare. Dessutom en viktig egenskap hos en meny - dess kompakthet. En enkel vertikal meny lätt skapas med hjälp av HTML och CSS. Men vi går vidare: Låt oss lära oss att skapa Menu- "dragspel" med hjälp av jQuery.

Skapa en meny- "dragspel"

Vad är en vertikal meny i form av ett dragspel? Detta är en list, vilket skapar en lätt att navigera och ger en elegant plats. Meny, som utförs på detta sätt gör det möjligt att vända en hel del delposter. Tillgång till dem uppstår när du klickar med musen på önskad post. Någon kan säga att det är möjligt att göra en enkel meny på detta sätt utan att använda jQuery. Ja, det är det. Men detta objekt inte skulle vara mycket användbar för ägare av smartphones eller tabletter. Låt oss skapa en vertikal meny, tilltalande för alla. Sedan ändra färg styling ett navigationssystem, kommer det att vara möjligt att justera design till en webbplats.

HTML-kod

Så, för att skapa vår vertikal meny måste du först slå HTML-kod, som kommer att innehålla följande rader:

Spara koden i en fil som heter Accord_menu.html.

Som ni ser har vi skapat en oordnad lista. Den består av 3 huvudpunkter:

- bilder;

- filmer;

- böcker.

Varje objekt har ett par stycken. Var är #, måste du lägga till länkar. Nu är det viktigt att beskriva stilen. Det beror på utseendet på din Internet-resurs. Vertikal meny för webbplatsen måste integrera harmoniskt i sin design.

CSS-kod

Med stilar bör du inte vara svårt. Vi noterar bara att i detta exempel använder en övertoningsfyllning. Här är CSS-kod:

färg anges i CSS-filen är storleksmarkörer bort från objekten i listan till vänster. Det bestäms hur man beter sig i varje objekt och undermeny när du för muspekaren över den. Till exempel:

# E1fee2 - denna ljusgrön färg sub.

# C4f0f7 -golubovaty skugga sub när du för muspekaren över dem.

Display egendom ber blocket värde för att justera den nödvändiga stoppning och storlek. Färg, storlek, typsnitt, platsen - allt är som beskrivs i CSS-fil. Kalla det, till exempel, accordionmenu_my1.css.

Anslutning meny förbättringar jQuery

Som ni kanske minns, vårt mål - att skapa en vertikal meny jQuery. Om du inte är bekant med denna teknik, oroa dig inte. Vi använder Google förvaret och ansluter JQuery skript. Detta kommer att göra det mer attraktivt menyn. jQuery är ett JavaScript-bibliotek baserat på interaktionen mellan Hypertext Markup HTML och JavaScript. jQuery ger dig tillgång till innehåll och egenskaper av element.

Så ansluter nödvändiga skript i kroppen av HTML-fil och ange regler för lagring av 2 variabler med undantag för hästkapplöpning element. Bidra kod, stänga andra flikar vid öppnandet av den på vilken det finns ett musklick. Såhär ser:

Spara alla ändringar, se hur det ser ut i webbläsarens meny. Det är en vanlig följd av: Som ett resultat har vi kommit en attraktiv meny som du alltid kan ändra beroende på deras preferenser. Och skaffa ny kunskap inom området jQuery, CSS, kommer du att skapa den unika delar av webbplatsen, förbättra sina färdigheter.