Navigare rapidă

Ultimele subiecte
» nike roshe one gs damen
Scris de VGXDSFE6 Mar 16 Ian - 10:16
» nike air presto damen
Scris de VGXDSFE6 Mar 16 Ian - 10:15
» adidas nmd r2
Scris de VGXDSFE6 Mar 16 Ian - 10:14
» adidas nmd r2
Scris de VGXDSFE6 Mar 16 Ian - 10:13
» adidas nmd r2
Scris de VGXDSFE6 Mar 16 Ian - 10:13
Cuvinte-cheie

edit  

Menu with CSS3


Salut, Vizitator in acest tutorial am sa iti prezint meniul Menu with CSS3, acest nuniu este un meniu foarte dreagut care ne permite sa navigam mult mai repede pe pe forumul ,siteul, blogul nostru.Este foarte usor de instalat daca veti urma atent pasi de instalare.


Demonstratie:
Click pe lupa pentru a vedea meniul.



Mod de instalare



1.CSS
Panou de administrare > Afisare > Imagini si culori > Culori > Foaie de stil CSS
Cod:



.navbox {
position: relative;
float: left;
}

ul.nav {
list-style: none;
display: block;
width: 200px;
position: relative;
top: 100px;
left: 10px;
padding: 60px 0 60px 0;
background: url(http://i60.servimg.com/u/f60/15/90/76/08/shad210.png) no-repeat;
-webkit-background-size: 50% 100%;
}


li {
margin: 5px 0 0 0;
}

ul.nav li a {
-webkit-transition: all 0.3s ease-out;
background: #cbcbcb url(http://i60.servimg.com/u/f60/15/90/76/08/border10.png) no-repeat;
color: #174867;
padding: 7px 15px 7px 15px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
width: 100px;
display: block;
text-decoration: none;
-webkit-box-shadow: 2px 2px 4px #888;
}

ul.nav li a:hover {
background: #ebebeb url(http://i60.servimg.com/u/f60/15/90/76/08/border10.png) no-repeat;
color: #67a5cd;
padding: 7px 15px 7px 30px;
}




2.HTML
Acest meniu il puteti pune ori unde doriti dumneavoastra pe forum, ca de ex: il puteti pune ca widget.Acesta a fost doar un exemplu,dar dumneavoastra puteti pune codul ori unde doriti.


Cod:

<div class="navbox">
<ul class="nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>


Tutorial realizat de Emanuel

Comentariile utilizatorilor
Vizitator
avatar
la data de Joi 3 Mai - 16:00
Vizitato Vizitator
Conectat
Foarte frumos meniul, îmi place efectul la mouse over .
Membru premium
avatar
la data de Joi 3 Mai - 21:26
Hissae2 Membru premium
Conectat
Imi place foarte mult hover-ul.
Membru ET
avatar
la data de Vin 18 Mai - 21:45
Mos Craciun Membru ET
Conectat
Mda... tare. Nu am vazut nici un tutorial creat de Emanuel pe aici. A scris doar unde se adauga codurile, si sunt luate de pe diverse site-uri sau bloguri. Nimic original. Si eu as putea lua toate meniurile de pe google si sa zic in toate cele 100 de mii de tutoriale:

adaugati in Foaie de stil CSS:
...

adaugati in template:
...
Membru dedicat
la data de Vin 28 Mar - 16:49
Branny Membru dedicat
Conectat
problema e ca l-am adaugat si nu schimba nimic
Membru ET
avatar
la data de Sam 28 Mar - 13:16
hamsahaq Membru ET
Conectat
thank you sir!