Simpelt Verticale Menu selvstudium, CSS, Tutorials

Simpelt Verticale Menu Tutorial

Dette er en meget enkel, verticale css menu. Denne tutorial bidrager til at skabe et enkelt og attraktivt CSS menu med en cool hover virkning.

Trin: 1

Først og fremmest lad os skrive CSS koden for menuen. her går koden ..


  # nav ul ( 
  margin: 0; 
  padding: 0; 
  list-style-type: none; 
  ) 


  # nav ul li ( 
  ; /*IE 6*/ display: inline; / * IE 6 * / 
  ) 


  # nav ul li a ( 
  display: block; 
  ; background: # d9d9d9; 
  width: 200px; 
  text-decoration: none; 
  7px /*padding for left, right*/ ; padding: 4px / * padding for top, bund * / 7px / * padding til venstre, højre * /; 
  #eeeeee ; border-bottom: 1px solid # eeeeee; 
  #cccccc ; border-top: 1px solid # cccccc; 
  # 333333 ; border-left: 5px solid # 333333; 
  ; color: # 333333; 


  { # nav ul li a: hover ( 
  ; border-venstre-color: # 0099FF; 
  ; color: # 0066FF; 
  ; background: # c4c4c4; 
  )

Trin: 2

Nu skal vi skabe en grundlæggende html struktur.


  > <div id = "nav"> 
  <ul> 
  > Home </a> </li> <li> <a href = "#"> Hjem </ a> </ li> 
  > About Us </a> </li> <li> <a href = "#"> Om os </ a> </ li> 
  > Services </a> </li> <li> <a href = "#"> Services </ a> </ li> 
  > Sitemap </a> </li> <li> <a href = "#"> Sitemap </ a> </ li> 
  > Contact </a> </li> <li> <a href = "#"> Kontakt </ a> </ li> 
  </ Ul> 
  </ div>