Blue navigation

Categorie tutorial: Tutoriale HTML
Originalitate: 100%
Tutorial:
Salut Vizitator , azi am sa iti prezint un meniu simplu.

Pasul 1 :

Codul se adăugă în PA - Afişare - Imagini şi culori - Culori - Foaia de stil CSS:

Cod:

ul.sidenav {
  float: left;
  margin: 0;
  padding: 0;
  width: 200px;
  list-style: none;
  border-bottom: 1px solid #3373a9; /*--Bevel Effect--*/
  border-top: 1px solid #003867; /*--Bevel Effect--*/
  font-size: 1.2em;
}
ul.sidenav li {
  position: relative; /*--Add a relative positioning--*/
  float: left;
  margin: 0;
  padding: 0;
}
ul.sidenav li a{
  border-top: 1px solid #3373a9; /*--Bevel Effect--*/
  border-bottom: 1px solid #003867; /*--Bevel Effect--*/
  padding: 10px 10px 10px 25px;
  display: block;
  color: #fff;
  text-decoration: none;
  width: 165px;
  background: #005094 url(sidenav_li_a.gif) no-repeat 5px 10px;
  position: relative; /*--Add a relative positioning--*/
  z-index: 2; /*--z-index allows the popup to tuck underneath the nav--*/
}
ul.sidenav li a:hover {
  background-color: #004c8d;
  border-top: 1px solid #1a4c76;
}

HTML

Cod:

<ul class="sidenav">
  <li>
      <a href="#">Home</a>
  </li>
  <li>
      <a href="#">About Us</a>
  </li>
  <li>
      <a href="#">Contact</a>
  </li>
</ul>

Demo : [Trebuie sa fiti inscris si conectat pentru a vedea acest link]