Een drijvend HTML-menu maken met jQuery en CSS

Voor ons allemaal die te maken hebben met lange webpagina's en naar het menu moeten scrollen, is hier een leuk alternatief: zwevende menu's die bewegen terwijl u op een pagina bladert. Dit gebeurt met HTML, CSS en jQuery, en het is volledig W3C-compatibel.

Demo en bron

Je kunt een demo van deze tutorial bekijken door hierboven op de knop "Demo" te klikken. Let er bij de brondownload op dat de jQuery-bibliotheek, de Dimensions-plugin en de resetcode van Eric Meyer niet in het ZIP-bestand staan.

Wat we bouwen

Deze tutorial behandelt hoe je een "zwevend menu" maakt met HTML, CSS en jQuery. Om opnieuw te bevestigen, blijft een zwevend menu zichtbaar, zelfs als u naar beneden scrolt op een webpagina. Ze zijn geanimeerd, dus ze gaan op en neer terwijl je het browservenster omhoog of omlaag bladert. Ik ga je laten zien hoe je een zwevend menu maakt met jQuery en CSS, en hopelijk een aantal nieuwe jQuery-discipelen maken: D.

Voordat we doorgaan met de codeerstappen, bekijk je de twee schermknaps hieronder. De eerste toont een webpagina met een zwevend menu rechtsboven. Natuurlijk kun je niet zeggen dat het zweeft totdat je het live ziet en daadwerkelijk door de pagina scrolt. Dus kijk naar de tweede snapshot en je kunt zien dat het menu is verplaatst.

Stap 1

Laten we beginnen met de HTML-opmaak voor een leuk menu dat bestaat uit drie submenu's:

 
 
 
 Huis 
 
 
 
 Inhoudsopgave 
 
 tentamen 
 
 wiki 
 
 
 
 Technische ondersteuning 
 
 

Dit is de basismarkering die we zullen gebruiken. Het grootste deel van dit stukje HTML is het

in regel 01, die het hele menu inkapselt. De drie lijsten worden alleen gebruikt om de structuur aan te tonen, die kan worden aangepast aan uw behoeften. In dit geval zijn er drie secties in het menu, die worden weergegeven door drie ongeordende HTML-lijsten.

Gewoonlijk schakel ik de klik op dummy-koppelingen uit (href = "#"). Om er zeker van te zijn dat een klik op een dummy-link de pagina niet naar de top stuurt, is er ook een on-klik = "return false;" in. Met deze methode kunnen menu-itemfuncties zoals lightboxing worden toegevoegd - iets waarvoor de pagina op de huidige verticale positie moet blijven wanneer de gebruiker op een menulink klikt.

Stap 2

Nu hebben we CSS-regels nodig om het menu te villen en te positioneren. (Ik heb CSS-reset van Eric A. Meyer gebruikt, dus daarom is er geen marge: 0 of opvulling: 0 op het ul-element):

body achtergrondkleur: # 000; hoogte: 2000 pixels; kleur: #ccc; lettertype: 10px "Lucida Grande", "Lucida Sans", "Trebuchet MS", verdana, sans-serif;  #floatMenu positie: absoluut; top: 150px; Links: 50%; margin-left: 235px; width: 200px;  #floatMenu ul margin-bottom: 20px;  #floatMenu ul li a display: block; rand: 1px vast # 999; background-color: # 222; border-left: 6px solid # 999; text-decoration: none; kleur: #ccc; opvulling: 5px 5px 5px 25px; 

De lichaamshoogte (Lijn 03, hierboven) is alleen ingesteld om voldoende ruimte te krijgen voor ons menu om met de pagina omhoog en omlaag te scrollen. Dit moet in een echt geval worden verwijderd. De twee andere dingen waar je rekening mee moet houden zijn de positie: absoluut (regel 08) en links: 50% (lijn 10), beide in de #floatMenu CSS-regel (regel 07) hierboven.

Het kenmerk "positie" wordt gebruikt wanneer u een element uit de stroom van het document moet verwijderen en het op een nauwkeurige plaats op uw pagina moet houden. Als u de tekstzoomfunctie van uw browser gebruikt, wordt een element met absolute positionering niet verplaatst, ook niet als de tekst eromheen groter wordt.

Het "left" -attribuut wordt gebruikt om het specifieke div-element horizontaal te positioneren. De waarde moet worden gedefinieerd als een percentage in het geval dat we een gecentreerd ontwerp willen. Met een waarde van 50% wordt de linkerkant van de container in het midden van de pagina geplaatst. Om het links of rechts te positioneren, moeten we het kenmerk "margin-left" (regel 11) gebruiken, met een negatieve waarde voor een offset naar links en een positieve voor een offset naar rechts.

De andere elementen in de bovenstaande stylesheetregels passen het visuele ontwerp aan.

Stap 3

Nu hebben we een menu met drie secties in de rechterbovenhoek van de pagina. Om het rollovereffect van het menu-item te verbeteren, laten we stijlklasmen menu1, menu2 en menu 3 toevoegen aan elke menusectie, respectievelijk (aan elk

element). We zullen 3 verschillende submenu's gebruiken met onze 3
-tags. De onderstaande code is een aanpassing van de HTML-code die wordt weergegeven in stap 1 hierboven:

 
 
... 
 
... 
 
... 
 

Laten we nu enkele CSS-hover-gebaseerde roll-over-effecten definiëren, die voor elke menusectie anders zullen zijn.

 #floatMenu ul.menu1 li a: hover border-colour: # 09f;  #floatMenu ul.menu2 li a: hover border-colour: # 9f0;  #floatMenu ul.menu3 li a: hover border-colour: # f09; 

Nu zal elke menusectie een andere kleur weergeven als de muis boven een menu-item zweeft. Als je wilt, kun je ook regels toevoegen voor andere menu-linkstatussen met: link,: visited,: hover en: active pseudo classes. De volgorde waarin u ze moet schrijven, kan gemakkelijk als volgt worden onthouden: LOVe en HAte, waarbij de hoofdletters de eerste letter van elke staat vertegenwoordigen.

Stap 4

We hebben een leuk uitziend menu en kunnen hier stoppen, maar we willen dat zwevende menu, dus het is tijd om wat jQuery toe te voegen. U moet de jQuery-bibliotheek en de Dimensions-plug-in downloaden. Deze plug-in wordt gebruikt om informatie over het browservenster (breedte, hoogte, bladeren, enz.) Te bemachtigen. U kunt een koppeling maken naar beide bits van jQuery-code vanuit uw HTML-bestand in de ... sectie. Vergeet niet om het URL-pad te wijzigen op basis van waar u op uw server de jQuery-bibliotheek en plug-inbestanden plaatst.

We hebben ook een aangepaste jQuery-code nodig, dus begin een nieuwe

Voeg de volgende jQuery-code toe binnen dee