Tutorial upang lumikha ng isang Beautiful, simple, pahiga CSS menu |

Tutorial upang lumikha ng isang Beautiful, simple, pahiga CSS menu

Ito ay isang napaka-simple, pahiga css menu. Tutorial na ito ay tumutulong na lumikha ng isang simple at kaakit-akit CSS menu na may isang cool-aligid epekto.

Una sa lahat ipaalam sa amin isulat ang CSS code para sa menu. dito napupunta ang code ..

  # nav 
  ( 
  padding: 0; 
  ) 

  # nav li 
  ( 
  display: inline; 
  ) 

  # nav li ng isang 
  ( 
  font-family: Arial; 
  font-size: 12px; 
  ; text-labor: none; 
  lamo: kaliwa; 
  padding: 10px; 
  ; background-color: # 333333; 
  ; kulay: # FFFFFF; 
  hangganan-ilalim: 1px; 
  ; hangganan-ilalim-color: # 000000; 
  hangganan-ilalim-style: solid; 
  ) 

  # nav li ng: mag-agaw-buhay 
  ( 
  ; background-color: # 9B1C26; 
  padding-ilalim: 12px; 
  hangganan-ilalim: 2px; 
  ; hangganan-ilalim-color: # 000000; 
  hangganan-ilalim-style: solid; 
  margin: - 1px; 
  ) 

Pangalawa sa lahat ng mga ipaalam sa amin isulat ang HTML para sa listahan ng menu. Say namin ay may 7 link, tulad ng ipinakita sa imahe, dito napupunta ang code ..


  > <ul id = "nav"> 
  > Home </a> </li> <li> <a href = "#"> Home </ a> </ li> 
  > About </a> </li> <li> <a href = "#"> Tungkol sa </ a> </ li> 
  > Services </a> </li> <li> <a href = "#"> Serbisyo </ a> </ li> 
  > Products </a> </li> <li> <a href = "#"> Produkto ng </ a> </ li> 
  > Sitemap </a> </li> <li> <a href = "#"> Sitemap </ a> </ li> 
  > Help </a> </li> <li> <a href = "#"> Tulong </ a> </ li> 
  > Contact Us </a> </li> <li> <a href = "#"> Makipag-ugnayan sa amin </ a> </ li> 
  </ ul>