Tutoriál pre vytvorenie Krásne, jednoduché, horizontálne CSS menu |

Tutoriál pre vytvorenie Krásne, jednoduché, horizontálne CSS menu

To je veľmi jednoduché, horizontálne css menu. Tento výukový program slúži na vytvorenie jednoduchého a atraktívneho CSS menu s cool hover efekt.

V prvom rade nám napíšte CSS kódu pre menu. Tu je kód ..

  # Nav 
  ( 
  padding: 0; 
  ) 

  # Nav li 
  ( 
  zobrazenie: inline; 
  ) 

  # Nav li jeden 
  ( 
  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; 
  ) 

Druhá všetkých nás písať HTML zoznamu menu. Povedz sme 7 väzby, ako ukazuje obrázok, tu ide o kód ..


  > <ul id = "nav"> 
  > Home </a> </li> <li> <a href = "#"> Domov </ a> </ li> 
  > About </a> </li> <li> <a href = "#"> O </ a> </ li> 
  > Services </a> </li> <li> <a href = "#"> Služby </ a> </ li> 
  > Products </a> </li> <li> <a href = "#"> Produkty </ a> </ li> 
  > Sitemap </a> </li> <li> <a href = "#"> Mapa stránok </ a> </ li> 
  > Help </a> </li> <li> <a href = "#"> Pomoc </ a> </ li> 
  > Contact Us </a> </li> <li> <a href = "#"> Kontaktujte nás </ a> </ li> 
  </ Ul>