Blue navigation

Vezi subiectul anterior Vezi subiectul urmator In jos

Blue navigation

Mesaj Scris de Ulrick la data de Sam Mar 17, 2012 10:21 am

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]
avatar
Ulrick


Mesaje Mesaje : 54
Puncte Puncte : 180
Localizare Localizare : Pe Netuts
Reputatie : 0

Vezi profilul utilizatorului http://uniogame.ace.st

Sus In jos

Re: Blue navigation

Mesaj Scris de Rawr la data de Sam Mar 17, 2012 10:37 am

Tutorial acceptat şi mutat în zona corespunzătoare!
avatar
Rawr


Mesaje Mesaje : 213
Puncte Puncte : 480
Varsta Varsta : 18
Localizare Localizare : Cluj-Napoca
Reputatie : 6

Vezi profilul utilizatorului http://fg-d.forumz.ro

Sus In jos

Vezi subiectul anterior Vezi subiectul urmator Sus


 
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum