Tutorja biex joħolqu eine wunderschöne, sempliċi, orizzontali CSS menu |

Tutorja biex joħolqu eine wunderschöne, sempliċi, orizzontali CSS menu

Din hija sempliċi ħafna, orizzontali css menu. Tutorja Dan jgħin sabiex jinħoloq sempliċi u attraenti CSS menu bi jibred imbagħad jerġgħu effett.

First of all jgħidilna jiktbu CSS kodiċi għall menu. hawn tmur il-kodiċi ..

  # nav 
  ( 
  padding: 0; 
  ) 

  # nav li 
  ( 
  display: inline; 
  ) 

  # nav li a 
  ( 
  font-familja: Arial; 
  font-size: 12px; 
  ; text-decoration: none; 
  float: xellug; 
  padding: 10px; 
  ; background-color: # 333333; 
  ; color: # ffffff; 
  border-bottom: 1px; 
  ; border-bottom-color: # 000000; 
  border-bottom-stil: solidi; 
  ) 

  # nav li a: imbagħad 
  ( 
  ; background-color: # 9B1C26; 
  padding-bottom: 12px; 
  fruntiera tal-qiegħ: 2px; 
  ; border-bottom-color: # 000000; 
  border-bottom-stil: solidi; 
  marġini: - 1px; 
  ) 

Tieni kollha jgħidilna HTML tikteb lista għall menu. Ngħidu aħna 7 links, kif muri fl-immaġni, hawn tmur il-kodiċi ..


  > <ul id = "nav"> 
  > Home </a> </li> <li> <a href = "#"> Home </ a> </ li> 
  > About </a> </li> <li> <a href = "#"> About </ a> </ li> 
  > Services </a> </li> <li> <a href = "#"> Servizzi </ a> </ li> 
  > Products </a> </li> <li> <a href = "#"> Prodotti </ a> </ li> 
  > Sitemap </a> </li> <li> <a href = "#"> Sitemap </ a> </ li> 
  > Help </a> </li> <li> <a href = "#"> Għajnuna </ a> </ li> 
  > Contact Us </a> </li> <li> <a href = "#"> Contact Us </ a> </ li> 
  </ ul>