Motanel Tutorials


 
AcasaAcasa  RegulamentRegulament  FAQFAQ  CautareCautare  MembriMembri  InregistrareInregistrare  ConectareConectare  

Menu with CSS3


Navigare :: CSS - Cascading Style Sheets
AutorMesaj
 Vizitato
avatar
Rang: Vizitator


MesajSubiect: Menu with CSS3 Mar 8 Mar 2011 - 7:38
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


 Cretsu`
avatar
Rang: Membru - MT™

Respetarea regulilor 100%

Vezi profilul utilizatorului
MesajSubiect: Re: Menu with CSS3 Mar 8 Mar 2011 - 7:42
Ideea e buna, dar nu facuta cum trebuie. Trebuia sa pui acele tabele in care scrie linkul, main stanga, ca si cum ar iesi din gaura aia cand pui mousu pe el.
 Kozmyn
avatar
Rang: Membru - MT™

Respetarea regulilor 100%

Vezi profilul utilizatorului
MesajSubiect: Re: Menu with CSS3 Mar 8 Mar 2011 - 7:57
..destul de frumusel, bravo.
Apropo, legat de demonstratie: tag-ul de incheierea zonei de introducere a unor propietati css se numeste , nu (de aceea nu fucntioneaza demo-ul)
 Rylled
avatar
Rang: Fondator

Respetarea regulilor 100%

Vezi profilul utilizatorului
MesajSubiect: Re: Menu with CSS3 Mar 8 Mar 2011 - 8:08
Dragut, doar ca era mai bine daca era acea bara mai...nu stiu cum sa spun dar arata mai frumos daca ii puneai o mica umbra. Bravo!
 Vizitato
avatar
Rang: Vizitator


MesajSubiect: Re: Menu with CSS3 Mar 8 Mar 2011 - 8:14
Andrei, probabil ca daca am sa am timp am sa il mai personalizez putin zilele astea.
 Continut sponsorizat
Rang:


MesajSubiect: Re: Menu with CSS3



Copyright © 2013 - Toate drepturile rezervate
Design creat si codat de Alexandru Miron si Stefan Patrascu