In tutorialul de astazi am sa va arat cum puteti adauga un meniu vertical pe forumul dvs. Tot ce trebuie sa faceti este sa urmatii pasii de mai jos.
Demonstratie:
Demonstratie:
Instalare:
1. CSS
Adaugati codul urmator in CSS:
Cod:
*/-------------CSS Vertical Navigation-----------/*
ul.sidenav {
font-size: 1.2em;
float: left;
width: 200px;
margin: 0;
padding: 0;
list-style: none;
background: #005094;
border-bottom: 1px solid #3373a9;
border-top: 1px solid #003867;
}
ul.sidenav li a{
display: block;
color: #fff;
text-decoration: none;
width: 155px;
padding: 10px 10px 10px 35px;
background: url(sidenav_a.gif) no-repeat 5px 7px;
border-top: 1px solid #3373a9;
border-bottom: 1px solid #003867;
}
ul.sidenav li a:hover {
background: #003867 url(sidenav_a.gif) no-repeat 5px 7px;
border-top: 1px solid #1a4c76;
}
ul.sidenav li span{ display: none; }
ul.sidenav li a:hover span {
display: block;
font-size: 0.8em;
padding: 10px 0;
}
*/-------------CSS Vertical Navigation-----------/*
2.HTML
Codul Meniului il puteti pune unde doriti:
Cod:
<ul class="sidenav">
<li>
<a href="#">Home
<span>Descriere.Descriere.Descriere.Descriere.Descriere
.Descriere.Descriere.Descriere.Descriere.
Descriere.Descriere.Descriere.Descriere.
Descriere.Descriere.Descriere.Descriere.
</span>
</a>
</li>
<li>
<a href="#">Home
<span>Descriere.Descriere.Descriere.Descriere.Descriere.
Descriere.Descriere.Descriere.Descriere.Descriere.Descriere
.Descriere.Descriere.Descriere.Descriere.Descriere.Descriere.
</span>
</a>
</li>
<li>
<a href="#">Home
<span>Descriere.Descriere.Descriere.Descriere.Descriere.
Descriere.Descriere.Descriere.Descriere.Descriere.
Descriere.Descriere.Descriere.Descriere.Descriere.
Descriere.Descriere.
</span>
<a href="#">Home
<span>Descriere.Descriere.Descriere.Descriere.Descriere.
Descriere.Descriere.Descriere.Descriere.Descriere.Descriere.
Descriere.Descriere.Descriere.Descriere.Descriere.Descriere.
</span>
<a href="#">Home
<span>Descriere.Descriere.Descriere.Descriere.
Descriere.Descriere.Descriere.Descriere.Descriere.
Descriere.Descriere.Descriere.Descriere.Descriere.
Descriere.Descriere.Descriere.
</span>
<a href="#">Home<span>
Descriere.Descriere.Descriere.Descriere.Descriere.
Descriere.Descriere.Descriere.Descriere.Descriere.
Descriere.Descriere.Descriere.Descriere.Descriere.
Descriere.Descriere.
</span>
</a>
</li>
</ul>
Tutorial scris de Emanuel
Copyright Extrem-Tutorials.com - Nici o parte a acestui tutorial nu poate fi reprodusa fara acordul autorului.
