Tutorial til at skabe en smuk, enkel, horisontale CSS menu |

Tutorial til at skabe en smuk, enkel, horisontale CSS menu

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

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

  # nav 
  ( 
  padding: 0; 
  ) 

  # nav li 
  ( 
  display: inline; 
  ) 

 # nav li en 
  ( 
  font-family: Arial; 
  font-size: 12px; 
  ; text-decoration: none; 
  float: left; 
  padding: 10px; 
  ; background-color: # 333333; 
  ; color: # ffffff; 
  border-bottom: 1px; 
  ; border-bottom-color: # 000000; 
  border-bottom-style: solid; 
  ) 

  # nav li a: hover 
  ( 
  ; background-color: # 9B1C26; 
  padding-bottom: 12px; 
  border-bottom: 2px; 
  ; border-bottom-color: # 000000; 
  border-bottom-style: solid; 
  margin: - 1px; 
  ) 

Andet af alle lad os skrive HTML-liste for menuen. Sige, at vi har 7 links, som vist på billedet, her går det kode ..


 > <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About </a> </li> <li> <a href = "#" > Services </a> </li> <li> <a href = "#" > Products </a> </li> <li> <a href = "#" > Sitemap </a> </li> <li> <a href = "#" > Help </a> </li> <li> <a href = "#" > Contact Us </a> </li> </ul> <ul id = "nav"> <li> <a href = "#"> Hjem </ a> </ li> <li> <a href = "#"> Om </ a> </ li> <li > <a href = "#"> Services </ a> </ li> <li> <a href = "#"> Produkter </ a> </ li> <li> <a href = "#"> Sitemap </ a> </ li> <li> <a href = "#"> Hjælp </ a> </ li> <li> <a href = "#"> Kontakt os </ a> </ li> < / ul>