Handledning för att skapa en vacker, enkel, horisontell CSS meny |

Handledning för att skapa en vacker, enkel, horisontell CSS meny

Detta är en mycket enkel, övergripande css menyn. Denna handledning bidrar till att skapa en enkel och attraktiv CSS meny med en cool hover effekt.

Först och främst låt oss skriva CSS-koden för menyn. här 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; 
  ) 

Andra av alla låt oss skriva HTML listan för menyn. Säg att vi har 7 länkar, som visas i bild, här går koden ..


 > <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 = "#"> hemsida </ a> </ li> <li> <a href = "#"> Om </ a> </ li> <li > <a href = "#"> Tjänster </ a> </ li> <li> <a href = "#"> Produkter </ a> </ li> <li> <a href = "#"> Sitemap </ a> </ li> <li> <a href = "#"> Hjälp </ a> </ li> <li> <a href = "#"> Kontakta oss </ a> </ li> < / ul>