Sederhana Verticale Menu Tutorial, Css, Tutorial

Sederhana Verticale Menu Tutorial

Ini adalah sangat sederhana, menu css verticale. Tutorial ini membantu untuk menciptakan cara yang mudah dan menarik dengan CSS menu yang dingin hover efek.

Langkah: 1

Pertama-tama mari kita tuliskan kode CSS untuk menu. disini berjalan kode ..


  # nav ul ( 
  margin: 0; 
  padding: 0; 
  list-style-type: none; 
  ) 


  # nav ul li ( 
  ; /*IE 6*/ display: inline; / * IE 6 * / 
  ) 


 display :block ; background : #d9d9d9 ; width : 200px ; text-decoration :none ; padding : 4px /*padding for top, bottom*/ 7px /*padding for left, right*/ ; border-bottom : 1px solid #eeeeee ; border-top : 1px solid #cccccc ; border-left : 5px solid # 333333 ; color : # 333333 ; # nav ul li a (display: block; background: # d9d9d9; width: 200px; text-decoration: none; padding: 4px / * untuk padding atas, bawah * / 7px / * padding untuk kiri, kanan * /; perbatasan - bottom: 1px solid # eeeeee; border-top: 1px solid # CCCCCC; border-left: 5px solid # 333333; color: # 333333; 
  { border-left-color : #0099FF ; color : #0066FF ; background : #c4c4c4 ; } # nav ul li a: hover (border-left-color: # 0099FF; color: # 0066FF; background: # c4c4c4;)

Langkah: 2

Sekarang kita membuat struktur dasar html.


 > <ul> <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About Us </a> </li> <li> <a href = "#" > Services </a> </li> <li> <a href = "#" > Sitemap </a> </li> <li> <a href = "#" > Contact </a> </li> < /ul> </div> <div id = "nav"> <ul> <li> <a href = "#"> Rumah </ a> </ span> <li> <a href = "#"> Tentang Kami </ a> </ li> <li> <a href = "#"> Layanan </ a> </ li> <li> <a href = "#"> Sitemap </ a> </ li> <li> <a href = " # "> Hubungi </ a> </ li> </ ul> </ div>