Navigare rapidă

Ultimele subiecte
» Ying-Yang Tutorial
Scris de Lucifer Mar 24 Apr - 11:34
» Avatar forumotion toolbar
Scris de Lucifer Mar 24 Apr - 11:33
» Salutare
Scris de Lucifer Mar 24 Apr - 11:32
» Avatar User in Online List
Scris de Emanueltutorials Vin 9 Feb - 21:18
Cuvinte-cheie

edit  

Meniu albastru afisat pe verticala


Bun gasit,

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.

Comentariile utilizatorilor

Fii primul care comenteaza acest articol