Share
Animatie en visuele feedback zijn geweldige manieren om een gebruiker te helpen bij het navigeren en communiceren met een website. Terwijl traditioneel Flash van Adobe de basis was voor alles wat geanimeerd was, kunnen we tegenwoordig met de magie van javascript Flash helemaal vermijden. Vandaag gaan we een echt cool geanimeerd navigatiemenu bouwen met alleen CSS en jQuery.
Het menu dat we bouwen, is te zien in de onderstaande schermafbeelding. Je kunt de definitieve werkversie hier ook bekijken.
Ik ga deze tutorial als volgt in vijf delen splitsen:
Laten we eerst eens kijken wat we hier moeten doen.
Dus hier is een globaal idee van wat we zouden moeten doen:
Nu gebruiken we meestal
Dus om het samen te vatten
huiswat betreftDienstenoplossingencontact
Het kan helpen om de mappenstructuur die ik ben te laten zien. De directory-structuur is als volgt:
Ik neem aan dat je basiskennis hebt in het omgaan met Photoshop, dus ik zal niet te gedetailleerde instructies geven over het maken van de bronnen.
Er zijn verschillende dingen die we moeten maken.
Merk op dat als u deze stap wilt overslaan, u de volledige zip van bestanden aan het einde van de zelfstudie kunt downloaden en mijn exemplaren kunt extraheren!
Oké, laten we de header-achtergrond maken. Open Photoshop en maak een doek van 1x181 px, of u kunt het groter maken en vervolgens de afbeelding bijsnijden.
Maak een laag en geef het een lineair verloop met Voorgrond naar achtergrond voorinstelling voor 171px, dit is het hoofdverloop.
Maak nog een laag en geef het een lineair verloop met Voorgrond naar Transparant voorinstelling voor ongeveer 10px onderaan de eerste laag voor een schaduweffect.
Hier is hoe het eruit zou moeten zien, het is 100x181 px dat ik later bijsnijd naar 1x181 px.
Bewaar deze als 'Hdr-bkg.png' in onze 'Img' map.
Vervolgens maken we de inhoudstitel. Nogmaals, open Photoshop en maak 934x284 px.
Maak een afgeronde rechthoek met het juiste gereedschap, selecteer de gemaakte vorm, maak een nieuwe laag, voeg een verloop toe en geef het wat slagschaduw.
Dan zullen we zoiets hebben als dit:
Bewaar deze als 'Content-title.png' in 'Img' map.
Laten we nu de middelen maken die de navigatie nodig heeft. We hebben twee navigatiesets en een witte doos nodig.
De witte doos is eenvoudig. Maak gewoon een afgeronde rechthoek van ongeveer 98px x 58px en schilder deze met wit. Zorg ervoor dat de achtergrond transparant is.
Bewaar deze als 'White.jpg' in 'Img' map.
Voor het navigatie-item opent u uw Photoshop en maakt u een 490px x 58px-document.
Maak een afgeronde rechthoek met ongeveer 98px x 58px en plaats wat tekst erin. We hebben twee exemplaren van elke tekst nodig.
Ik heb een beetje slagschaduw op elke tekst toegepast, dit is natuurlijk optioneel. Je kunt je eigen kleuren kiezen om hier te plaatsen.
Dupliceer nu eenvoudig deze laag langs de horizontale lijn. Pas verschillende kleuren en tekst toe.
Bewaar deze als 'Nav.jpg' in 'Img' map.
Tot slot, voor de achtergrondstreep heb ik eenvoudig een online tool gebruikt, de Stripe Generator. De uitvoer ziet er als volgt uit:
Je kunt mijn instellingen hier bekijken.
Natuurlijk kunt u de streep zelf gewoon in Photoshop maken, maar waarom zou u in plaats daarvan geen handige kleine webtool gebruiken :-)
Laten we nu onze HTML noteren.
slick geanimeerd menu huiswat betreftDienstenoplossingencontact
Dit is volgens veel van onze gameplan uitgelegd in Stap 1.
Ik heb een koppeling toegevoegd aan een 'main.css'-bestand dat nog moet worden aangemaakt en
Ik heb ook enkele verwijzingen toegevoegd naar enkele Javascript-bestanden. Omdat elk navigatie-item uniek is, heb ik elk item een ID gegeven.
We zullen nog steeds een gemeenschappelijke stijl nodig hebben voor elk van de menu-items, dit zal het ons gemakkelijk maken om de stijl in latere stadia te beheren.
We hebben ook een wit vak boven elk navigatie-item weergegeven, wanneer we over het menu zweven of een menu-item wordt geselecteerd, dus we hebben een ander item nodig
slick geanimeerd menu huiswat betreftDienstenoplossingencontact
Bewaar deze als 'Index.html'. Tot nu toe hebben we dit als onze HTML-pagina:
Laten we wat basisstijl toepassen op de webpagina. We beginnen met het definiëren van de achtergrond en het toevoegen van een koptekstgebied.
body background: url (... /img/body-bkg.jpg) herhaal scroll; marge: 0; opvulling: 0; .containe r margin: 0pt auto; width: 950px; #header background: url (... /img/hdr-bkg.jpg) repeat-x scroll; Hoogte: 181px;
Bewaar deze als 'Main.css' in 'Css' map.
Nu hebben we iets dat eruit ziet als:
Laten we nu stijl aan elk van de menu-items toevoegen. Onthoud dat we het witte vak bovenaan elk menu-item willen hebben,
dus de positie moet op absoluut zijn ingesteld. Voeg de volgende stijl toe in ons 'main.css'-bestand.
#navigation height: 60px; #home, #home div, #about, #about div, #services, #services div, #solutions, #solutions div, #contact, #contact div height: 80px; positie: absoluut; width: 97px; float: left; #home, #about, #services, #solutions, #contact background-image: url (... /img/nav.jpg); achtergrond-bijlage: scroll; achtergrondherhaling: geen herhaling; top: 171px; #home background-position: 0px -25px; margin-left: 6px; #about background-position: -98px -25px; margin-left: 105px; #services background-position: -196px -25px; margin-left: 204px; #solutions background-position: -294px -25px; margin-left: 303px; #contact background-position: -392px -25px; margin-left: 402px; #home div, #about div, #services div, #solutions div, #contact div background-image: url (... /img/white.jpg); achtergrond-bijlage: scroll; achtergrondherhaling: geen herhaling; achtergrond-positie: 0px -60px;
Nu hebben we :
Eén probleem: de koppeling wordt boven aan de menu-items weergegeven. Laten we deze met een groot tekstinkeping verwijderen, waardoor deze effectief van het scherm wordt verwijderd.
Voeg dit toe aan onze stylesheet.
.pri-nav a display: block; text-decoration: none; text-indent: -30000px;
Nu ziet het er zo uit:
Er is nog steeds een probleem. We willen dat het navigatiemenu wordt weergegeven onder de koptekst. We kunnen dat bereiken door onze headerstijl aan te passen.
#header background: url (... /img/hdr-bkg.jpg) repeat-x scroll; Hoogte: 181px; positie: absoluut; z-index: 100; / * zorg ervoor dat de header boven het navigatiegebied is * / top: 0px; left: 0px; Breedte: 100%;
Omdat we een PNG-bestand met transparantie hebben gebruikt, zou dit er als volgt uit moeten zien:
Perfect! Laten we de inhoud toevoegen zodat we ons animatiescript kunnen openen.
.inhoud margin-top: 160px; # content-title background: url (... /img/content.jpg) no-repeat scroll; Hoogte: 323px; positie: absoluut; Breedte: 100%;
Laten we eerst het nieuwste jQuery-script downloaden en in de 'Js' map.
De animatie is in feite een manipulatie van de achtergrondpositiestijl.
Jammer genoeg heeft jQuery fouten bij het animeren van de achtergrondpositiestijl. Maar maak je geen zorgen! Alexander Farkas heeft een plug-in gemaakt die dit probleem oplost.
Download het bestand en hernoem het naar jquery-bp.js en sla het op in de 'Js' map.
Er is iets dat we moeten begrijpen voordat we verder gaan. Ik citeer uit de plugin-documentatie:
Vanwege sommige browser bugs (zoals Firefox, moet je je (initiële) achtergrond-positie inline instellen:
- Natuurlijk kunt u dit ook met JavaScript (jQuery) bereiken:
$ ('# background'). css (backgroundPosition: '10px 20px');
Oké nu dat we dat begrijpen, laten we beginnen. We zullen de achtergrondstijl van de achtergrond instellen voor elk item in het begin van ons script.
// id voor elk van onze menu-items var nav = ['#home', '#about', '#services', '#solutions', '#contact']; $ (document) .ready (function () setBkgPos ();); function setBkgPos () for (i = 0; i < nav.length; i++ ) $(nav[i]).css(backgroundPosition: i*(-98) + 'px -25px'); $(nav[i] + ' div').css( backgroundPosition: '0px -60px');
Bewaar deze als 'Navigation.js' in 'Js' map.
Nu zullen we 3 evenementen aan elk van de menu-items binden. We kunnen dit doen door de bindfunctie aan te roepen.
$ (document) .ready (function () setBkgPos (); // bindt de gebeurtenis aan functie hier voor (i = 0; i < nav.length; i++ ) $(nav[i]).bind( 'mouseover', mMouseOver ); $(nav[i]).bind( 'mouseout', mMouseOut ); $(nav[i]).bind( 'click', mClick ); );
Wanneer een gebruiker over het navigatie-item zweeft, roept ons script de functie 'mMouseOver'.
Wanneer de gebruiker uit het navigatie-item zweeft, roept ons script de functie 'mMouseOut'.
En wanneer de gebruiker op het navigatie-item klikt, zal ons script de 'mClick'-functie oproepen.
Laten we een "storyboard" maken voor onze muis over animatie.
Op 'Mouse Over':
Oké laten we deze functies toevoegen onder het vorige script:
Accentsconagua
functie _getHPos (id) voor (i = 0; i < nav.length; i++ ) if ( '#' + id == nav[i] ) return i*(-98); return 0; function mMouseOver(e) $(this) // stop any animation that took place before this .stop() // step 1. change the image file and change the cursor .css(backgroundImage: 'url('+site_url+'img/nav-over.jpg)',cursor: 'pointer') // step.2 move up the navigation item a bit .animate( backgroundPosition:'(' + _getHPos( this.id ) +'px -30px',"fast", // this section will be executed after the step.2 is done function() $(this) .children() // step. 3 move the white box down .animate(backgroundPosition:'(0px -40px)',20) // step 4. move the white box down .animate(backgroundPosition:'(0px -20px)',"fast"); $(this) // step 4. move the navigation item down .animate(backgroundPosition:'(' + _getHPos( this.id ) +'px 50px)',"fast") // step 5. move the navigation item to its final position .animate(backgroundPosition:'(' + _getHPos( this.id ) +'px 25px)',"fast"); // store the parent element id for later usage var parent = this; $(this) .children() // step 5. move the white box to its final position .animate( backgroundPosition:'(0px -45px)',"fast", // this section will be executed after the step.2 is done function() // step.6 change the image to its original image $(parent).css(backgroundImage: 'url(img/nav.jpg)'); ); ); Ik moet hier verschillende dingen uitleggen:
Dat is nu gebeurd. Laten we een "storyboard" maken voor het evenement 'mouse out'
On 'Mouse Out':
De code:
function mMouseOut (e) $ (this) // stop alle animatie die hiervoor plaatsvond. stop () // stap 1 navigeer item navigeer .anim (backgroundPosition: '(' + _getHPos (this.id) + 'px 40px)', "fast", // deze sectie zal worden uitgevoerd nadat stap 1 is gedaan, functie () // stap.2 wit vakje verplaatsen erg snel $ (this) .children (). animeren ( backgroundPosition: '(0px 70px)', "fast"); // step 3. verplaats het navigatie-item omhoog $ (this) .animate (backgroundPosition: '(' + _getHPos (this.id) + 'px -40px ) ', "fast", // deze sectie wordt uitgevoerd nadat stap 3 klaar is function () // stap 4. verplaats navigatie-item naar zijn oorspronkelijke positie $ (this) .animate (backgroundPosition:' ( '+ _getHPos (this.id) +' px -25px) ', "fast", // deze sectie wordt uitgevoerd nadat stap 4 klaar is function () // wit vak naar de oorspronkelijke positie verplaatsen, klaar voor volgende animatie $ (this) .children (). css (backgroundPosition: '0px -60px');))) .css (backgroundImage: 'url (img / nav.jpg)', cursor: "); Bijna daar! Nu moeten we behandelen wanneer een gebruiker op het navigatie-item klikt.
function mClick (e) location.href = this.id;
Natuurlijk kunt u wijzen naar elke locatie die u hier ziet passen. Deze specifieke functie zal je browser naar [current_url] / [navigation_id] leiden, dus voor 'home' is het '[current_url] / home', voor 'about' is dit '[current_url] / about' enzovoort.
Natuurlijk hebben we een indicator nodig als we al op een pagina zijn. Daarvoor hebben we een andere CSS-klasse nodig.
We zullen die klasse 'actief' noemen. Als we bijvoorbeeld nu 'thuis' zijn, wordt het HTML-bestand:
huis
Of als we 'ongeveer' zijn, wordt het:
wat betreft
enzovoorts.
Dus nu het idee is dat nadat een pagina is geladen, ons script zal controleren om te zien welk navigatie-item de 'actieve' klasse heeft.
Vervolgens passen we een animatie-effect toe. En we moeten ervoor zorgen dat eventuele andere gebeurtenissen ('mouseover', 'mouseout', 'klik') geen animatie-effect op dit 'actieve' item veroorzaken.
Daarvoor moeten we onze code een beetje veranderen. Hier is de volledige code na de wijzigingen:
var site_url = "; var nav = ['#home', '#about', '#services', '#solutions', '#contact']; $ (document) .ready (function () setBkgPos (); voor (i = 0; i < nav.length; i++ ) $(nav[i]).bind( 'mouseover', mMouseOver ); $(nav[i]).bind( 'mouseout', mMouseOut ); $(nav[i]).bind( 'click', mClick ); for ( i = 0; i < nav.length; i++ ) // element with 'active' class will start animation if ( $(nav[i]).get(0).className.indexOf('active') >= 0) $ (nav [i]) .animation (backgroundPosition: '(' + _getHPos (nav [i]) + 'px -30px', "fast", function () $ (this). children () .animation (backgroundPosition: '(0px -40px)', 20) .animation (backgroundPosition: '(0px -20px)', "fast"); $ (this) .animate (backgroundPosition: '(' + _getHPos (nav [i]) + 'px 50px)', "fast") .anim (backgroundPosition: '(' + _getHPos (nav [i]) + 'px 25px)', "snel "); var parent = this; $ (this) .children () .animation (backgroundPosition: '(0px -45px)'," fast ", function () $ (parent) .animate (backgroundPosition: ' ('+ _getHPos (parent.id) +' px 25px) ', "fast"); $ (parent) .css (backgroundImage:' url (img / nav.jpg) '););) ; pauze;); En daarmee hebben we ons hele handige, kleine menu.
Download een ZIP van de site
Bekijk een demo!
