Verticale menu voor de site in de vorm van een accordeon met jQuery

Het menu, zoals u weet - een integraal onderdeel van de site. Interessante navigate online bron is in staat om rente bezoekers. Daarnaast is een belangrijke eigenschap van elk menu - zijn compactheid. Een eenvoudige verticale menu gemakkelijk gemaakt met behulp van HTML en CSS. Maar wij gaan verder: Laten we leren om menu- "accordeon" te creëren met behulp van jQuery.

Maak een menu- "accordeon"

Wat is een verticale menu in de vorm van een accordeon? Dit is een drop-down lijst, die een gemakkelijk te navigeren creëert en geeft een stijlvolle locatie. Menu, uitgevoerd op deze manier kun je veel sub-items te schakelen. De toegang tot deze optreedt wanneer u klikt op het gewenste item. Iemand kan zeggen dat het mogelijk is om een eenvoudig menu op deze manier te maken zonder het gebruik van jQuery. Ja, het is. Maar dit object zou niet erg nuttig om eigenaars van smartphones of tablets zijn. Laten we een verticale menu, aantrekkelijk voor iedereen. Dan veranderen van de kleur styling een navigatiesysteem, zal het mogelijk zijn om het ontwerp naar een site aan te passen.

HTML-code

Dus, om onze verticale menu te maken, moet u eerst het nummer van de HTML-code, die de volgende regels bevat:

Sla deze code op in een bestand met de naam Accord_menu.html.

Zoals u kunt zien, hebben we een ongeordende lijst. Het bestaat uit 3 belangrijke punten:

- foto's;

- films;

- boeken.

Elk item heeft een paar alinea's. Waar zijn #, moet u links toe te voegen. Nu is het belangrijk om de stijl te beschrijven. Het hangt allemaal af van het uiterlijk van uw internetbron. Verticale menu voor de site moet harmonieus te integreren in het ontwerp.

CSS-code

Met stijlen die u moet niet moeilijk zijn. Wij constateren alleen dat in dit voorbeeld wordt een kleurverloop. Hier is de CSS-code:

kleur is opgegeven in het CSS-bestand, worden de grootte markers verwijderd uit de items in de lijst aan de linkerkant. Het bepaald hoe zich te gedragen in elk item en submenu wanneer u de muisaanwijzer over. Bijvoorbeeld:

# E1fee2 - deze lichtgroene kleur sub.

# C4f0f7 -golubovaty schaduw sub wanneer u de muisaanwijzer over hen.

Weergave eigenschap vragen blok waarde voor de noodzakelijke opvulling en de grootte aan te passen. De kleur, grootte, lettertype, de ligging - alles is zoals beschreven in het CSS-bestand. Noem het bijvoorbeeld accordionmenu_my1.css.

Het aansluiten van jQuery menu verbeteringen

Als je nog, ons doel - om een verticale menu jQuery te creëren. Als u niet bekend bent met deze technologie, maak je geen zorgen. We maken gebruik van de Google-repository en sluit JQuery script. Dit maakt het aantrekkelijker menu te maken. jQuery is een JavaScript-bibliotheek op basis van de interactie van Hypertext Markup HTML en JavaScript. jQuery krijgt u toegang tot de inhoud en de attributen van de elementen.

Dus, sluit de nodige script in het lichaam van het HTML-bestand en stel de regels voor de opslag van 2 variabelen, met uitzondering van de paardenraces elementen. Code bijdragen, sluiten andere tabs bij de opening van de ene waarop zich een muisklik. Hier is hoe het eruit ziet:

Alle wijzigingen opslaan, zien hoe het eruit ziet in de browser menu. Dat is een veelvoorkomend gevolg van: Als gevolg daarvan zijn we gaan een aantrekkelijke menu dat je altijd kan veranderen, afhankelijk van hun voorkeuren. En het verwerven van nieuwe kennis op het gebied van jQuery, CSS, vindt u de unieke elementen van de site te maken, het verbeteren van hun vaardigheden.