Meniu Drop – Down cu jQuery

Bună ziua! Bine ați venit la un nou curs! În acest tutorial voi arată cum cu ajutorul lui jQuery puteți crea un buton, care va deshide lista de meniu. Pentru a vedea acest efect, intrati pe psd.tutsplus.com

Cînd faceți click pe buton se deschide un bloc cu o listă de link-uri și atunci cînd apasăm pe un link blocul este minimizat. Acest lucru poate fi realizat cu jQuery și în acest tutorial voi arata cum. În primul rînd trebuie sa creem butonul nostru, ca mai apoi sa ne concentram asupra codului. Puteți crea un buton absolut de orice dimensiune. Dimensiunea la butoanele mele – 182 x 32 pixeli. Faceți dublu click pe stratul de fundal și adaugă “Gradient Overlay”.

În partea dreapta a butonului adaugă o mică săgeată albă și un separator vertical din două culori: #252525 și #302f2f

La stînga puteți insera o imagine și un text, nu voi intra în detalii la crearea butonului pentru ca fiecare își va crea singur meniul. Aici este butonul meu.(Salvați imaginea în folderul cu imagini.)

Acum deschideți Notepad și salvați documentul gol ca styles.css în folderul ”sliding menu” de pe desktop. Închideți Notepad, deschideți folderul ”slideng menu” și creați creați două foldere noi ”js” și ”images”. Du-te la jquery.ocom descarcă biblioteca ”jquery-1.4.4.min.js”, redenumiți fișierul doar ”jquery” și salvați-l în folderul ”js”. Deschideți Dreamweaver și creați un fișier nou HTML. Salvați-l direct pe desktop. (Numele fișierul nu joacă nici un rol, de aceea dații ce nume doriți, de exemplu ”sliding_menu.html”). În Dreamweaver comutăm în regim de cod

În primul rînd ce trebuie să facem este sa punem referințele către fișierele noastre javascript și css. Pentru aceasta copiem aceasta bucată de cod înt tag-ul HEAD.

<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>

Probabil ați observat ca am menționat 3 fișiere styles.css, jquery.js și slider.js (Desigur ca vă veți întreba de la treilea fișier). Deschideți Notepad și salvați documentul gol într-un folder cu numele de slider.js Acum deschideți fișierul în Dreamweaver și scriți codul de mai jos.

$(document).ready(function () {
    $('img.menu_class').click(function () {
        $('ul.the_menu').slideToggle('medium');
    });
});

Permiteți-mi să explic fragmentul de cod de mai sus. Prima linie înseamnă că atunci cînd documentul este încărcat, este apelată funcția(în cazul nostru sliding menu). Următoarea linie înseamnă că, îndată ce faceți click pe imagine cu clasa menu_class meniul se va desfășura.l Urmează al 3-lea rînd.  Meniul se va desfășura în jos la o viteză medie.  Puteți seta viteza slow(lent) sau fast(rapid). Linia a doua și a treia sunt foarte importante deoarece ele conțin elemente legate de CSS și anume img.menu_class și ul.the_menu. Treci la documentul HTML în regim de cod pentru ca să începem să creem meniul nostru.

<img src="images/button.png" width="184" height="32" class="menu_class" />
<ul class="the_menu">
<li><a href="#">A Website #1</a></li>
<li><a href="#">A Website #2</a></li>
<li><a href="#">A Link #1</a></li>
<li><a href="#">A Link #2</a></li>
<li><a href="#">A Website #3</a></li>
<li><a href="#">A Website #4</a></li>
<li><a href="#">A Link #3</a></li>
<li><a href="#">A Link #4</a></li>
</ul>

În primul rînd de cod noi inserăm imaginea butonului nostru. Am specificat lățimea și înălțimea, și stabilim clasa menu_class. Clasa este unicul punct de referință pentru fișierul js care noi deja l-am creat. Clasa ne permite să aplicam orice stil CSS prin intermediul .menu_class. După care noi obținem o listă neordonată. Dacă vizualizați meniul în browser-ul dvs., trebuie să arate așa.

Deschideți fișierul CSS în Dreamweaver. Acum trebuie să stabilim stilul pentru documentul nostru.

body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    background-color: #333333;
}

Este nevoie de un font și fundal simplu. Setatți dimensiunea fontului după dorință. Am schimbat culoarea fundalului de la alb la gri închis. Creem stil pentru listele neordonate.

ul, li {
    margin:0;
    padding:0;
    list-style:none;
}

.menu_class {
    border:1px solid #1c1c1c;
}

Următorul stil se aplică pentru meniul care se va desfășura după apăsarea butonului.

.the_menu {
    display:none;
    width:300px;
    border: 1px solid #1c1c1c;
}

În acest fragment de cod, aveți posibilatea să modificați lățimea blocului meniului desfășurat. Lățimea meniului meu este de 300px, dar aveți posibilitatea să specificați orice lățime. Eu am setat și border cu 1px. Următoarea parte a codului se referă la culoarea de fundal a meniului desfășurat și stabilește și textului.

.the_menu li {
    background-color: #302f2f;
}

.the_menu li a {
    color:#FFFFFF;
    text-decoration:none;
    padding:10px;
    display:block;
}

.the_menu li a:hover {
    padding:10px;
    font-weight:bold;
    color: #F00880;
}

Sursa: net.tutsplus.com

4 Responsesto “Meniu Drop – Down cu jQuery”

1. Ion Grosu spune:

   11 mai 2011 la 13:56

   Salut,

   După cum ştii în curînd are loc cea mai mare conferinţă ICT din Moldova. Moldova ICT Summit 2011. Organizatorii au decis să ofere acces liber la toate conferinţele pentru 5 bloggeri. Pentru a putea fi unul din cei 5 bloggeri acreditaţi te invităm să participi la un concurs simplu. Scrii despre IT şi despre conferinţă şi primeşti acces la eveniment şi posibilitatea de a cîştiga 5 instruiri în valoare de sute de euro fiecare.

   Sper să-ţi prindă bine această informaţie.

   Detalii pe site-ul evenimentului la categoria Media – Bloggeri. Cine ştie google are patru ochi
2. nolimit spune:

   1 februarie 2011 la 12:47

   se poate de facut …
3. RoGeek spune:

   31 ianuarie 2011 la 12:11

   Salut conferentiare, imi place siteul tau, caut sa va schimb link/banner cu bloguri/siteuri in domeniul it-tutoriale. Esti interesat?
4. Shogun spune:

   4 ianuarie 2011 la 23:21

   Modifica putin:

   $(document).ready(function () {
   $(‘img.menu_class’).click(function () {
   if (!$(‘ul.the_menu:animated’).length)
   {
   $(‘ul.the_menu’).slideToggle(‘medium’);
   }
   });
   });

   sa nu poti incepe o alta animatie pina cind nu se termina curenta.
5. Meniu Drop – Down cu jQuery - Ziarul toateBlogurile.ro spune:

   4 ianuarie 2011 la 16:35

   [...] Meniu Drop – Down cu jQuery Tue Jan 04, 2011 17:55 pm Bună ziua! Bine ați venit la un nou curs! În acest tutorial voi arată cum cu ajutorul lui jQuery puteți crea un buton, care va deshide lista de meniu. Pentru a vedea acest efect, intrati pe psd.tutsplus.com Cînd faceți click pe buton se deschide un bloc cu o listă de link-uri și atunci cînd apasăm [...] [...]