Meniu Slide-Out cu Jquery, Html si CSS
12 Noiembrie 2011 de Bogdan AnastasieIn 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 :
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 :
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 ) .
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 ? :
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
Tweet
Daca ti-a fost folositor acest tutorial/articol, poti copia urmatorul cod pe pagina ta