home > tutoriale > javascript-ajax > meniu-slide-out-cu-jquery-html-si-css.php
Tutorial jquery html si css

Meniu Slide-Out cu Jquery, Html si CSS

12 Noiembrie 2011 de Bogdan Anastasie

In acest tutorial Bogdan Anastasie ne prezinta cum putem face un meniu cu HTML si CSS si cum sa il animam folosind un simplu script bazat pe libraria Jquery,realizand efectul de Slide Out.

tutoriale web design online
Autor :   Bogdan Anastasie

As dori sa incep acest tutorial prin a va saluta , acesta este primul meu tutorial scris pentru Rotuts.com si as dori sa aflu parerile voastre despre el.
Pentru a vede ceea ce v-om realiza pe parcursul acestui tutorial , apasati pe butonul de mai jos :

vezi rezultatul final al acestui tutorial jquery cu html si css

Fisierele necesare si aranjarea acestora in folder

Dupa cum spune si numele acestui tutorial , acest meniu foloseste jquery pentru animatie.De aceea primul si primul lucru care trebuie sa il facem , este sa downloadam libraria Jquery.
Odata ce avem libraria downloadata , facem un nou folder pe care il numim scripts in interiorul folder-ului principal.
Aditional , mai facem inca doua foldere pentru imagini si css.Facem si un fisier HTML chiar in folderul principal si il numim slide.Deci pana acum, ar trebui sa avem urmatoarea structura de foldere :

tutorial meniu Slide Out cu jquery html si css
EDIT : Eu am facut fisierul slide cu extensia .php , voi puteti sa il faceti cum doriti, nu conteaza .

Imaginile care dorim sa le folosim pentru meniu, sunt aleatorii, atata timp cat marimea acestora este de 64x64 ( bineinteles ca puteti folosi mai mari sau mai mici, insa eu am ales aceasta marime, pt ca , parerea mea, la aceasta marime arata cel mai bine meniul ) .

marimea icoanelor din acest tutorial de web design

Link-uirea fisierelor externe la pagina principala ( slide.html )

In aceasta parte a acestui tutorial o sa "legam" fisierul de stiluri CSS si fisierul care contine libraria Jquery cu pagina principala.Acest cod trebuie scris intre etichetele <head </head> pe pagina slide.html : 

<!-- link catre fisierul CSS -->
<link href="css/styles.css" media="screen" type="text/css" rel="stylesheet">

<!-- Link catre fisierul Jquery -->

<script src="scripts/jquery-1.7.min.js" type="text/javascript"> </script>

Meniul in HTML

Acum urmeaza partea in care codam meniul in HTML.Nimic special in aceasta parte , meniul este facut cu ajutorul faimoaselor liste.Acest cod, bineinteles, il scriem intre etichetele <body> </body> :

<div class="header">
        <ul id="navigation">
            <li class="home"><a href="" title="Home"></a></li>
            <li class="blog"><a href="" title="Blog"></a></li>
            <li class="register"><a href="" title="Register"></a></li>
            <li class="rssfeed"><a href="" title="Rss Feed"></a></li>
            <li class="saywhat"><a href="" title="Ce zici bre ?"></a></li>
            <li class="contact"><a href="" title="Contact"></a></li>
        </ul>
</div>

In acest moment tot ce ar trebui sa vedem atunci cand incarcam pagina slide.html intr-un browser sunt punctele negre ale listei.

Formatarea meniului folosind CSS

Acum este timpul sa incepem formatarea meniului folosind CSS. Abia acum incepe sa imi placa acest tutorial :).
In folder-ul css facem un fisier numit styles.css.O sa scriem urmatorul cod in acest fisier : 

 
body{
	font-family:Arial;
	height:1200px;
	background-color: #fff;
	background-image: url(../images/bg.jpg);
	background-repeat: repeat;
        }
        .header
        {
	width:900px;
	height:56px;
	position:absolute;
	top:0px;
	left:25%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 50px;
	font-style: normal;
	font-weight: bold;
	color: #999999;
        }

 
/* aici incepe meniul din stanga */
 
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#navigation li {
    width: 100px;
}
ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
    opacity: 0.5;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}

Dupa cum bine puteti vedea, nu este nimic special in acest fisier de stiluri. Daca inca nu ati auzit de -moz-border-radius sau -webkit-border-top-right-radius puteti vedea cateva exemple in acest tutorial facut de Mihail Alin.
Si acum introducem imaginile care le avem in folderul images : 

ul#navigation .home a{
    background-image: url(../images/Home.png);
}
ul#navigation .blog a      {
    background-image: url(../images/Blog.png);
}
ul#navigation .register a      {
    background-image: url(../images/Register.png);
}
ul#navigation .saywhat a      {
    background-image: url(../images/what.png);
}
ul#navigation .rssfeed a   {
    background-image: url(../images/rss.png);
}
ul#navigation .contact a     {
    background-image: url(../images/Contact-blue.png);
}

Acum meniul nostru arata total diferit, nu credeti ? :

meniul dupa formatarea CSS

Animarea meniului cu Jquery

He He He , acum partea cea mai frumoasa , este timpul sa codam un pic in Jquery.Foarte foarte simplu.
Pe pagina principala slide.html, imediat dupa codul HTML al meniului , scriem urmatorul script :

<script type="text/javascript">
            $(function() {
                $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);
 
                $('#navigation > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
                    }
                );
            });
</script>

Daca nu stiti Jquery dar doriti sa invatati , nu va faceti griji , este foarte foarte simplu.Cateva notiuni si exemple de baza le puteti invata din acest scurt Tutorial Jquery pentru incepatori scris tot de Mihail Alin.
Dupa cum puteti observa pe pagina Demo, acolo am pus trei meniuri.Pentru ca nu toti avem neaparata nevoie de un meniu pe partea stanga.Am facut unul si pentru partea de sus si unul pentru partea dreapta.In codul sursa al paginii Demo puteti vedea atat codul Jquery folosit pentru animarea celor doua meniuri cat si codul CSS.

Acesta a fost tutorial care l-am pregatit.Sper ca va este de ajutor si de asemenea sper sa nu fie ultimul care il voi scrie pentru Rotuts.com , asteptam comentariile si parerile voastre.



Da si tu un like
  


Daca ti-a fost folositor acest tutorial/articol, poti copia urmatorul cod pe pagina ta

Tutoriale din Categoria JavaScript & Ajax

  Meniu Slide-Out cu Jquery, Html si CSS   -   Tutorial Jquery pentru incepatori   -   Cum sa centrezi o fereastra/popup   -   Cum sa faci un ceas cu JavaScript   -   Verificare formular cu JavaScript   -

Tutoriale aleatorii

  CSS3 border-radius si -moz-boder-radius   -   Cum sa faci un simplu web-site pe 3 coloane   -   Trimiterea datelor din formular la adresa de e-mail   -   Validarea unui formular   -   Tutorial Jquery pentru incepatori   -   Cum sa centrezi o fereastra/popup   -   Ferestre in Javascript/popups   -
Spune-le prietenilor tai despre acest tutorial/articol
Nume:
Email:
Email-ul prietenului tau:
Mesajul:

Comenturi

8 comenturi pana acum... (posteaza si tu)

Merge si in blogger daca se inchide "link href" din head.

Postat de ok pe data de: Saturday, 02.15.14 @ 16:53pm

Salut,felicitari pentru tutorial,insa vreau un pic de ajutor in crearea unui popup la un slideshow si nu stiu cum pot face,ma poti ajuta ?

Postat de iulian pe data de: Thursday, 04.11.13 @ 14:42pm

Multumesc mult de tot Bogdane . Imi place tutorialul foarte mult si am folosit acest meniu pe pagina mea. Abia astept sa vad urmatoarele tutoriale care le adaugi

Postat de Andrei pe data de: Monday, 01.23.12 @ 09:59am

Stefan , care parte si ce in concret nu ai inteles ? Ne-ar fi de mare ajutor daca ne-ai spune ca sa putem schimba partea care nu ai inteles-o . Asa altii pot intelege mai bine.
Multumesc, Alin.

Postat de Mihail Alin pe data de: Wednesday, 01.11.12 @ 21:09pm

AM reusit!!
Mercic!!!

Postat de Stefan pe data de: Wednesday, 01.11.12 @ 19:02pm

Am incercat si eu,dar nu am inteles ultima parte :cea legata de codatul in jquery.Se poate sa fii mai explicit? Mercic anticipat.

Postat de Stefan pe data de: Wednesday, 01.11.12 @ 18:46pm

Frumos tutorial.Exact ceea ce cautam , cu toate ca a trebuit sa ii fac eu cateva schimbari :D

Postat de Alex pe data de: Sunday, 11.13.11 @ 22:29pm

Multumim Bogdan.Foarte frumos tutorialul.

Postat de Mihail Alin pe data de: Friday, 11.11.11 @ 21:01pm

Comentarii:

Nume:

Email:

Comentariu:
 

*Intrebare de verificare : Raspunde la intrebarea din imaginea de mai jos ...
 
HINT : Raspunsul este din 6 litere, incepe cu r si se termina cu s
 


Important:
E-mailul nu va fi vizibil si NU va fi folosit de catre rotuts.com .
Nu sunt permise linkuri catre alte pagini.
Va rugam , comentariile sa ramana strict relationate cu topicul.
Comentariile considerate ofensive sau care nu au nici o legatura cu topicul vor fi sterse(trolling).

Folosirea codului HTML nu este permisa.
Puteti folosi BBcode pentru a va formata textul.