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  

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