Accentsconagua

Een 'Mootools-homepage' maken Geïnspireerd navigatie-effect met jQuery

Code
Share

Zoals je weet zijn er rond deze dagen een groot aantal concurrerende javascript-bibliotheken. Hoewel ik jQuery verkies, heb ik altijd genoten van de manier waarop het menu op MooTools werkte. Dus in deze zelfstudie maken we hetzelfde effect opnieuw ... maar we doen het in jQuery!

Demo en broncode


Stap 1

Laten we beginnen met het schrijven van de benodigde HTML om een ​​eenvoudige verticale navigatie te maken. Voor de structuur gebruiken we, zoals je misschien al geraden hebt, een ongeordende lijst

    met de ID-naam "Sliding-navigatie". Ook zullen we enkele links toevoegen en elk item in de lijst geven
  • de klassenaam "Sliding-element".

    Ik ga ook een titelelement toevoegen. Dit is een handig iets om zoveel WordPress-blogs te doen hebben met titelelementen in de zijbalknavigatie (bijvoorbeeld 'Archieven'). Dus het zou er ongeveer zo uitzien: 

     
       
    • Navigatietitel
      •  
    • Link 1
      •  
    • Link 2
      •  
    • Link 3
      •  
    • Link 4
      •  
    • Link 5
      •

    Stap 2

    Laten we nu een HTML-document maken waarin we het werk kunnen doen dat we net deden. Maak een nieuw HTML-bestand en noem het demo.html. Open vervolgens dit bestand met uw favoriete teksteditor en voeg de volgende code in:

        Navigatie-effect met behulp van jQuery      
     
       
    • Navigatietitel
      •  
    • Link 1
      •  
    • Link 2
      •  
    • Link 3
      •  
    • Link 4
      •  
    • Link 5
      •

    Er zijn een paar dingen om op te merken:

    1. De! DOCTYPE voor ons demo.html-bestand is ingesteld op XHTML 1.0 Strict. Dit is niet vereist om het effect te laten werken, maar ik probeer er de gewoonte van te krijgen om het zo veel mogelijk te gebruiken.
    2. U hebt misschien gemerkt dat de tag verwijst naar een bestand met de naam style.css. Er bestaat echter geen dergelijk bestand. Geen zorgen, dat is de volgende stap.
    3. Eindelijk heb ik mijn navigatieblok ingepakt in een
      . We zullen dit later gebruiken om het blok op de pagina te plaatsen.

    Stap 3

    Nu we ons HTML-bestand hebben gelabeld en werken, laten we enkele stijlen toevoegen. Vergeet niet dat ons HTML-document verwijst naar een CSS-bestand met de naam styles.css. Laten we beginnen met het maken van een bestand met de naam styles.css en het opslaan in dezelfde map waar ons HTML-document zich bevindt. Zoals we in de vorige stap hebben gedaan, opent u dit bestand met uw favoriete teksteditor en voegt u de volgende code in:

     body marge: 0; opvulling: 0; achtergrond: # 1d1d1d; font-family: "Lucida Grande", Verdana, sans-serif; tekengrootte: 100%;  ul # glijdende navigatie lijststijl: geen; lettertypegrootte: .75em; marge: 30 px 0;  ul # glijdende navigatie li.sliding-element h3, ul # sliding-navigatie li.sliding-element a display: block; breedte: 150 px; opvulling: 5px 15px; marge: 0; margin-bottom: 5px;  ul # sliding-navigation li.sliding-element h3 color: #fff; achtergrond: # 333; rand: 1px vast # 1a1a1a; font-gewicht: normaal;  ul # sliding-navigation li.sliding-element a color: # 999; achtergrond: # 222; rand: 1px vast # 1a1a1a; tekstdecoratie: geen;  ul # sliding-navigation li.sliding-element a: hover color: # ffff66;

    Stap 4

    Op dit punt ziet uw demo.html-pagina er ongeveer zo uit:

    Het is dus eindelijk tijd om jQuery te gaan gebruiken. Maar voordat we kunnen beginnen, moeten we een paar dingen doen:

    1. Download de nieuwste versie van jQuery.
    2. Maak een nieuw bestand met de naam sliding_effect.js en sla het op in dezelfde map als dat van uw HTML- en CSS-bestand.
    3. Ten slotte voegt u de twee vorige bestanden in uw HTML-document in .

    Dit is wat uw HTML-bestand is zou er nu uit moeten zien:

      Navigatie-effect met behulp van jQuery

    Stap 5

    Nu zullen we de functie creëren die al het "zware" hijsen doet om het glijdende effect te laten werken. Deze functie neemt vijf parameters (navigation_id, pad_out, pad_in, time en multiplier) en gebruikt ze als volgt:

    1. navigation_id: Dit is de ID-naam van de navigatie, die de elementen bevat waarop het effect wordt toegepast.
    2. pad_out: Dit is het aantal pixels dat nog moet worden opgevuld wanneer een van de links in de navigatie zweeft.
    3. pad_in: Dit is het aantal pixels dat nog moet worden opgevuld wanneer een van de links in de navigatie niet meer wordt verplaatst.
    4. tijd: Dit vertegenwoordigt de hoeveelheid tijd (in milliseconden) die nodig is voor een van de linkelementen om in te schuiven en weer terug naar de plaats wanneer de pagina is geladen.
    5. multiplier: De taak van de multiplier is het verhogen of verlagen van de hoeveelheid die het volgende linkelement nodig heeft om naar het scherm te gaan. Met andere woorden, als de vermenigvuldiger 1 is, zullen alle linkelementen met gelijke tijdsintervallen naar het scherm schuiven. Als het echter minder dan 0 is, zullen de volgende linkelementen sneller naar binnen schuiven en als het meer dan 1 is, gebeurt het tegendeel.

    Open uw sliding_effect.js-bestand en voeg de volgende code in:

     functiedia (navigation_id, pad_out, pad_in, time, multiplier) // creëert de doelpaden var list_elements = navigation_id + "li.sliding-element"; var link_elements = list_elements + "a"; // initieert de timer die wordt gebruikt voor de schuifanimatie var timer = 0; // maakt de dia-animatie voor alle lijstelementen $ (list_elements) .each (functie (i) // marge links = - ([breedte van element] + [totale verticale opvulling van element]) $ (this) .css ( "margin-left", "- 180px"); // update timer timer = (timer * vermenigvuldiger + tijd); $ (this) .anim (marginLeft: "0", timer); $ (this) .animate (marginLeft: "15px", timer); $ (this) .animate (marginLeft: "0", timer);); // maakt het hover-slide-effect voor alle link-elementen $ (link_elements) .each (functie (i) $ (this) .hover (function () $ (this) .animate (paddingLeft: pad_out, 150) ;, function () $ (this) .anim (paddingLeft: pad_in, 150);););

    Stap 6

    Alles wat we moeten doen om het script te activeren, is de functie oproepen wanneer de pagina is geladen. Er zijn twee plaatsen om het volgende codefragment te plaatsen. Het kan worden geschreven in het sliding_effect.js bestand (ik heb deze optie gekozen voor deze tutorial) of in de HTML gebeld met een

    Navigatie-effect met behulp van jQuery

    Door Bedrich Rios

    • Navigatietitel

    • Link 1
    • Link 2
    • Link 3
    • Link 4
    • Link 5

    Merk op dat ik de afbeelding in het element "navigation-block" heb toegevoegd en een ID heb gegeven met de naam "hide". Ik heb ook een titelelement en ondertitel toegevoegd. Nu voegen we een beetje extra CSS toe aan ons styles.css-bestand als volgt:

     h2 color: # 999; marge-bodem: 0; margin-left: 13px; achtergrond: url (navigatie.jpg) geen herhaling; hoogte: 40px;  h2 span display: none;  p color: # ffff66; margin-top: .5em; lettertypegrootte: .75em; padding-left: 15px;  # navigatie-blok positie: relatief; top: 200px; left: 200px;  #hide position: absolute; top: 30px; left: -190px;

    Dus eerst in de

    element, hebben we de HTML-tekst vervangen door "display: none" en een achtergrondafbeelding van een aantal mooiere tekst die ik eerder heb gemaakt.

    Merk ook op dat het element "navigatieblok" nu een relatieve positie heeft, zodat we het beeld "verbergen" naar links kunnen verplaatsen. Hierdoor verschijnen de tabbladen eronder.

    Ten slotte heb ik een subtiel achtergrondafbeelding toegevoegd die lijkt op schaduwen:

     ul # sliding-navigation li.sliding-element h3 color: #fff; achtergrond: # 333 url (heading_bg.jpg) repeat-y; font-gewicht: normaal;

    Afgewerkt

    En we zijn klaar!

    Bekijk het uiteindelijke effect

    Download de HTML / afbeeldingen / JS

    Code
×