Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Maak een koel geanimeerd navigatie met CSS en jQuery

by
Difficulty:IntermediateLength:LongLanguages:

Dutch (Nederlands) translation by Meyria (you can also view the original English article)

Animatie en visuele feedback zijn grote manieren om een gebruiker helpen bij het navigeren en interactie met een website. Hoewel traditioneel Adobes Flash de goto voor om het even wat geanimeerde was, deze dagen met de magie van javascript kunnen we voorkomen dat Flash helemaal. Vandaag gaan we naar het bouwen van een echt cool geanimeerde navigatiemenu met alleen CSS en jQuery.

Demo en Source Code


Overzicht

Het menu die we bouwen kan worden gezien in de screenshot hieronder. Ook kunt je de uiteindelijke werkende versie hier.

Ik ga deze tutorial breken in vijf secties als volgt:

  • Ruwe schets
  • Creëren van Resources
  • Het neerschrijven van de HTML
  • Het neerschrijven van de CSS
  • De met behulp van jQuery animatie maken

Stap 1: Ruwe Schets

Allereerst laten we zien wat we moeten doen hier.

Dus is hier een ruw idee van wat we moeten doen:

  • We zullen de pagina opgesplitst in 4 delen, header, navigatie en inhoud kop en de rest van de inhoud
  • Het gebied voor koptekst zullen eenvoudig<div>container
  • Het navigatiegebied zal worden opgesplitst in verschillende<div>container overeenkomen met het menu-item.
  • Nu de meeste van de tijd die we gebruiken<ul><li>container maar sinds elk menu item is uniek,
    Ik begrijp niet de voordelen van het gebruik<ul><li>dus ik ga gebruiken<div>container in plaats daarvan.

  • De inhoud zal worden een eenvoudige<div>container

Dus om samen te vatten het

Het kan helpen om te laten zien van de directory-structuur die ik ben De directory structuur is als volgt:

Stap 2: Resources

Ik neem aan dat je hebt basiskennis in de omgang met Photoshop, dus ik zal niet te gedetailleerd instructie over het maken van de middelen.
Er zijn verschillende dingen die we moeten maken.

  • Koptekst achtergrond
  • Inhoud Titel
  • Navigatie
  • Achtergrond stripe

Let op dat wilt je deze stap overslaan kunt je downloaden van de volledige zip bestanden aan het einde van de tutorial en uitpakken van mijn kopieën!

Oke, laten we het maken van de header achtergrond. Open Photoshop en maak een 1 x 181 px canvas, of je kunt het groter maken en vervolgens de afbeelding bijsnijden.
Maak een laag zal en geven het een lineair verloop met voorgrond achtergrond preset voor 171px, dit het belangrijkste verloop.
Maak een andere laag en geef het een lineair verloop met voorgrond op transparant preset voor over 10px aan de onderkant van de eerste laag voor sommige schaduweffect.

Hier is wat het moet eruit, het is 100 x 181 px die ik later gewas tot en met 1 x 181 px.

Bewaar dit als  'hdr-bkg.png' in onze 'img' map.

Vervolgens, maken we de inhoud titel. Opnieuw, open Photoshop en maken van 934 x 284 px.
Afgeronde rechthoek met het juiste gereedschap maken, selecteert je de gemaakte shape, maak een nieuwe laag, een verloop toevoegen en geef het een slagschaduw.
Dan hebben we iets als dit:

Bewaar dit als 'inhoud-title.png' in 'img' map.

Laten we maken nu de middelen die nodig zijn voor de navigatie. We moeten twee sets van navigatie en een wit vak.

Het witte vak is eenvoudig. Gewoon maken van een afgeronde rechthoek met over 98px x 58px en schilderen met wit. Zorgen voor dat de achtergrond is transparant.

Sla dit op als 'white.jpg' in 'img' map.

Voor het navigatie item, opent je Photoshop en maak een 490px x 58px document.
Maak een afgeronde rechthoekig met over 98px x 58px en doe er wat tekst in. Zullen we twee kopie van elke tekst.
Ik heb een beetje Slagschaduw toegepast op elke tekst, dit natuurlijk is optioneel. Je kunt kiezen je eigen kleuren om hier zetten.

Nu gewoon dupliceren deze laag langs de horizontale lijn. Verschillende kleuren en tekst toepassen.

Sla dit op als 'nav.jpg' in 'img' map.

Ten slotte heb ik voor de achtergrondstrip eenvoudig een online tool gebruikt, de Stripe Generator. De output ziet er zo uit:

Je kunt zien mijn instellingen hier.
Natuurlijk kon je enkel de streep zelf maken in Photoshop, maar waarom niet gebruik in plaats daarvan een keurig klein web hulpmiddel :-)

Stap 3: HTML code

Nu laten we noteren onze HTML.

Dit is prety veel volgens onze gameplan uitgelegd op stap 1.

Ik heb een link toegevoegd naar een 'main.css' bestand dat nog moet worden gemaakt en
Ik heb ook enkele verwijzingen naar sommige javascript bestanden toegevoegd. Aangezien elke navigatie item uniek heb ik gegeven elk item een ID.
We moeten nog enkele gemeenschappelijke stijl aan elk van de menu items, dit maakt het makkelijk voor ons om het beheren van de stijl in latere stadia.

We hebben ook een witte doos op de top van elke navigatie item worden weergegeven, wanneer we de muisaanwijzer op het menu of een menu item wordt geselecteerd, dus zullen we een ander<div>container voor dat. De uiteindelijke HTML code zal er zo uitzien:

Sla dit op als 'index.html'. Tot op dit punt hebben we dit als onze HTML pagina:

Stap 4: CSS

Laten we enkele fundamentele stijl toepassen op de webpagina. Wij zullen beginnen door te definiëren van de achtergrond en het toevoegen van een gebied van de koptekst.

Sla dit op als 'main.css' in 'css' map.

Nu hebben we iets dat lijkt op:

Nu laten we stijl toevoegen aan elk van de menu items. Vergeet niet dat wij willen het witte vak bovenaan elk menu item
Zo moet de positie op absolute zijn ingesteld. De volgende stijl in ons bestand 'main.css' toe te voegen.

Nu hebben we:

Een probleem, de <a href> koppeling verschijnt op de top van de menu items, die laten we met een enorme tekst inspringen -het effectief opstijgen met het scherm verwijderen.
Voeg dit toe aan onze opmaakmodel.

Het ziet er nu als volgt:

We hebben nog steeds een probleem, wij willen het navigatiemenu te verschijnen onder de schaduw van de koptekst. We kunnen bereiken dat door aanpassing van onze kopstijl.

Nu omdat we een PNG bestand met transparantie gebruikt, het moet als volgt uitzien:

Perfect! Laten we voeg de inhoud zo kunnen we aan ons script animatie.

Stap 5: Animatie script

Laten we eerst het nieuwste jQuery script downloaden en in de map 'js'.

De animatie is in feite een achtergrond positie stijl manipulatie.
Helaas heeft de jQuery bug in het animeren van de positie van de achtergrond stijl. Maar me maak niet ongerust! Alexander Farkas heeft gemaakt een plugin die dit probleem oplost.
Download het bestand en hernoem het naar jquery-bp.js en opslaan in de map 'js'.

Er is iets wat die we moeten begrijpen voordat je verdergaat. Ik citeer uit de documentatie van de plugin:

Als gevolg van enkele browser bugs (dwz Firefox, heb je voor troep je inline (initiële) achtergrond-positie:
<div style="background-position: 10px 20px"></div>
-Natuurlijk kunt je dit bereiken met JavaScript (jQuery), ook:
$('#background').css ({backgroundPosition: '10px 20px'});

Oke nu dat wij dat begrijpen, laten we beginnen. We zullen het achtergrondgeluid positie opmaakprofiel voor elk item in het begin van ons script instellen

Sla dit op als 'navigation.js' in 'js' map.

Nu zullen we 3 evenementen aan elk van de menu items binden. We kunnen dit doen door inroepen van de bind functie.

Wanneer een gebruiker het navigatie item aanwijst noem ons script 'mMouseOver' functie.
Wanneer de gebruiker uit het navigatie item zweeft zal ons script 'mMouseOut' functie aanroepen.
En wanneer de gebruiker op de navigatie item klikt, onze script 'mClick' functie oproept.

Stap 5.1: Muis over

Laten we het maken van een "verhaal board" voor onze muis via animatie.

Op 'Mouse Over':

  • Wijzig de navigatie menu afbeelding (gloed) en de cursor naar de aanwijzer wijzigen.
  • De navigatie wordt een beetje omhoog.
  • Het witte vak zal omlaag.
  • Het witte vak en de navigatiemenu zal beide naar beneden.
  • Het navigatiemenu en de witte doos zal omhoog naar haar definitieve standpunt.
  • En de navigatie menu afbeelding wijzigen in de oorspronkelijke staat.

Oke laten we deze functies onder het vorige script toe te voegen:

Ik moet verschillende dingen hier uitleggen:

  1. De _getHPos is gebruikt om de achtergrond van de horizontale positie navigatie voor elk item.
    Bijvoorbeeld, de achtergrond van 'Thuis' item zal starten vanaf 0, het 'Over' horizontale achtergrond-positie begint van - 98px, enzovoort.
  2. Merk ook op dat we in het begin van de functie de 'stop'-functie aanroepen. Wij doen dit om ervoor te zorgen wat animatie was voordat het evenement 'muis over' heeft gestopt.
    Waarom? We zullen het toevoegen van een andere animatie later voor het evenement 'muis uit'.
    Nu plaats laten we stel dat de gebruiker de muisaanwijzer op een item en verplaats de muisaanwijzer snel enkele anders en weer snel zweven boven hetzelfde item.
    Als we niet de animatie vóór elke gebeurtenis stoppen, zal er een vertraging omdat een deel van de animatie in de wachtrij kan worden geplaatst of nog erger de animatie zal niet langer consistent en ergeren van de gebruiker.

Stap 5.2: Muis uit

Nu dat is gedaan. Laten we maken "storyboard" voor het evenement 'muis uit'

Op 'Muis uit':

  • Het navigatie item omlaag.
  • Het witte vak omlaag.
  • De navigatie omhoog.
  • Het navigatie item verplaatsen tot de oorspronkelijke positie.
  • Het witte vak verplaatsen naar de oorspronkelijke positie (onzichtbare).
  • De cursor terug naar normaal.

De code:

Stap 5.3: Klik op

Bijna daar! Nu moeten we om te verwerken wanneer een gebruiker klikt je op het navigatie item.

Natuurlijk kunt je aanwijzen waar locatie Zie je passen hier. Deze bijzondere functie zal direct je browser [current_url]/[navigation_id] dus voor 'huis' zal ' [current_url]/home', voor 'over' zullen ' [current_url]/ongeveer', enzovoort.

Stap 5.4: Huidige pagina indicator

Natuurlijk moeten we een indicator wanneer we al op een pagina. Daarvoor moeten we een andere CSS klasse.
We zullen die klasse 'actief' noemen. Voor bijvoorbeeld als we nu 'thuis' het HTML bestand worden zal:

Of als we op 'about' zal worden:

en zo verder.

Dus nu het idee is nadat een pagina is geladen zal onze script controleren om te zien welke navigatie-item heeft de 'actief' klasse.
Wij vervolgens toepassen een animatie effect. En we moeten om eventuele andere gebeurtenissen ('mouseover', 'mouseout', 'Klik') zal niet leiden tot een animatie effect van deze 'actieve' item.

Daarvoor moeten we veranderen onze code een beetje. Hier is de volledige code na de wijzigingen:

Klaar!

En daarmee hebben we de hele handige kleine menukaart.

Download een ZIP van de Site

Bekijk een Demo!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.