Accentsconagua

Hur man skapar en Mootools hemsida Inspirerad navigationseffekt med jQuery

Koda
Share

Som ni vet finns det en mängd konkurrerande javascript-bibliotek runt om i tiden. Även om jag föredrar jQuery, har jag alltid gillat hur menyn på MooTools fungerade. Så i denna handledning återskapar vi samma effekt ... men vi gör det i jQuery!

Demo och källkod


Steg 1

Låt oss börja med att skriva den nödvändiga HTML för att skapa en enkel vertikal navigering. För strukturen, som du kanske har gissat, kommer vi att använda en oorderad lista

    med ID-namnet "Glidande-navigering". Vi lägger också till några länkar och ger varje listobjekt
  • klassnamnet "Glidande-element".

    Jag ska också lägga till i ett titelelement. Det här är en bra sak att göra så många WordPress-bloggar har till exempel rubrikelement i deras sidoregistrering (t.ex. "Arkiv"). Så det skulle se ut så här: 

     
       
    • Navigeringstitel
      •  
    • Länk 1
      •  
    • Länk 2
      •  
    • Länk 3
      •  
    • Länk 4
      •  
    • Länk 5
      •

    Steg 2

    Låt oss nu skapa ett HTML-dokument där vi kan lägga det arbete vi just gjorde. Skapa en ny HTML-fil och kalla den demo.html. Öppna sedan den här filen med din favorit textredigerare och sätt in följande kod:

        Navigationseffekt med jQuery      
     
       
    • Navigeringstitel
      •  
    • Länk 1
      •  
    • Länk 2
      •  
    • Länk 3
      •  
    • Länk 4
      •  
    • Länk 5
      •

    Det finns några saker att notera här:

    1. DOCTYPE för vår demo.html-fil är inställd på XHTML 1.0 Strict. Detta krävs inte för att effekten ska fungera, men jag försöker att vana att använda den så mycket jag kan.
    2. Du kanske märker att tagg hänvisar till en fil som heter style.css. Ingen sådan fil finns emellertid. Det är ingen oro, det är nästa steg.
    3. Äntligen har jag blivit mitt navigationsblock i en
      . Vi använder detta senare för att placera blocket på sidan.

    Steg 3

    Nu när vi har vår HTML-fil märkt och fungerar, låt oss lägga till några stilar. Kom ihåg att vårt HTML-dokument pekar på en CSS-fil som heter styles.css. Så, låt oss börja med att skapa en fil som heter styles.css och spara den i samma katalog där vårt HTML-dokument lever. Som vi gjorde i föregående steg, öppna den här filen med din favorit textredigerare och sätt in följande kod:

     kropp marginal: 0; vaddering: 0; bakgrund: # 1d1d1d; font-family: "Lucida Grande", Verdana, sans-serif; typsnittstorlek: 100%;  ul # glidnavigering list-style: none; typsnittstorlek: .75em; marginal: 30px 0;  ul # glidnavigering li.sliding-element h3, ul # glidnavigering li.sliding-element a display: block; bredd: 150px; vaddering: 5px 15px; marginal: 0; marginal-botten: 5px;  ul # glidnavigering li.sliding-element h3 färg: #fff; bakgrund: # 333; gräns: 1px fast # 1a1a1a; typsnitt: normal;  ul # glidande navigering li.sliding-element a färg: # 999; bakgrund: # 222; gräns: 1px fast # 1a1a1a; text-dekoration: ingen;  ul # glidande navigering li.sliding-element a: svävar färg: # ffff66;

    Steg 4

    Vid denna tidpunkt ska din demo.html sida se något ut så här:

    Så det är äntligen dags att börja använda jQuery. Men innan vi kan komma igång behöver vi göra några saker:

    1. Hämta den senaste versionen av jQuery.
    2. Skapa en ny fil som heter sliding_effect.js och spara den i samma katalog som din HTML- och CSS-fil.
    3. Slutligen, sätt in de två föregående filerna i ditt HTML-dokument .

    Det här är vad din HTML-fil är ska se ut nu

      Navigationseffekt med jQuery

    Steg 5

    Nu ska vi skapa den funktion som kommer att göra all "tung" lyftning för glidande effekten att fungera. Den här funktionen tar fem parametrar (navigation_id, pad_out, pad_in, time och multiplikator) och använder dem enligt följande:

    1. navigation_id: Detta är ID-namnet på navigeringen, som innehåller de element som effekten ska tillämpas på.
    2. pad_out: Det här är antalet pixlar som ska polstras till vänster när en av länkarna i navigeringen svängs.
    3. pad_in: Detta är antalet pixlar som ska polstras till vänster när en av länkarna i navigeringen inte längre svängs.
    4. tid: Detta representerar hur mycket tid (i millisekunder) som krävs för att ett av länkelementen ska glida in och tillbaka in för att placera när sidan laddas.
    5. multiplikator: Arbetet med multiplikatorn är att öka eller minska mängden som tar ett följande länkelement för att skjuta in på skärmen. Med andra ord, om multiplikatorn är 1, kommer alla länkelement att glida in på skärmen i lika tidsintervaller. Om emellertid det är mindre än 0, kommer de följande länkelementen att glida in snabbare och om det är mer än 1 så kommer motsatsen att hända.

    Så öppna din sliding_effect.js-fil och sätt in följande kod:

     funktionsdia (navigation_id, pad_out, pad_in, tid, multiplikator) // skapar målvägarna var list_elements = navigation_id + "li.sliding-element"; var link_elements = list_elements + "a"; // initierar timern som används för glidande animering var timer = 0; // skapar glidanimering för alla listelement $ (list_elements) .each (funktion (i) // marginal kvar = - ([bredd av element] + [total vertikal kodning av element]) $ (detta) .css "margin-left", "- 180px"); // uppdateringstimern timer = (timer * multiplikator + tid); $ (this) .animate (marginLeft: "0", timer); $ (marginLeft: "15px", timer); $ (this) .animate (marginLeft: "0", timer);); // skapar svängdjupseffekten för alla länkelement $ (link_elements) .each (funktion (i) $ (this) .hover (function () $ (this) .animate (paddingLeft: pad_out, 150) ;, funktion () $ (detta) .animate (paddingLeft: pad_in, 150);););

    Steg 6

    Allt vi behöver göra för att utlösa skriptet är att ringa funktionen när sidan har laddats. Det finns två ställen att ange följande kodavsnitt. Det kan antingen skrivas in i filen sliding_effect.js (jag valde det här alternativet för denna handledning) eller kallas i HTML med hjälp av en

    Navigationseffekt med jQuery

    Av Bedrich Rios

    • Navigeringstitel

    • Länk 1
    • Länk 2
    • Länk 3
    • Länk 4
    • Länk 5

    Lägg märke till att jag har lagt till bilden i "navigationsblocket" -elementet och ge det ett ID som heter "hide". Jag har också lagt till ett rubrikelement och textning. Nu lägger vi till lite extra CSS i vår styles.css-fil enligt följande:

     h2 färg: # 999; marginalbotten: 0; margin-left: 13px; bakgrund: url (navigation.jpg) no-repeat; höjd: 40 bildpunkter;  h2 span display: none;  p färg: # ffff66; margin-top: .5em; typsnittstorlek: .75em; padding-vänster: 15px;  # navigeringsblock position: relativ; top: 200px; vänster: 200px;  #hide position: absolute; top: 30px; vänster: -190px;

    Så först i

    element, vi har satt HTML-texten att försvinna med "display: none" och ange en bakgrundsbild av en snyggare text som jag förberedde tidigare.

    Observera också att "navigationsblock" -elementet nu har en relativ position, så att vi kan flytta "dölj" bilden till vänster. Detta gör att flikarna visas under den.

    Slutligen, för att ge våra flikar lite finish, har jag lagt till en subtil bakgrundsbild som ser ut som skuggning så här:

     ul # glidnavigering li.sliding-element h3 färg: #fff; bakgrund: # 333 url (heading_bg.jpg) repeat-y; typsnitt: normal;

    Färdiga

    Och vi är klara!

    Visa den slutliga effekten

    Ladda ner HTML / Images / JS

    Koda
×