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.
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 :
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 :
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 ) .
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>
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.
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 ? :
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
Tweet
Daca ti-a fost folositor acest tutorial/articol, poti copia urmatorul cod pe pagina ta
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