Това е много проста, verticale CSS меню. Инстркцията помага да се създаде проста и атрактивни CSS меню с хладен навъртам ефект.

Стъпка: 1

Преди всичко нека пишат CSS код за меню. тук е кода ..

  # навигация ул. ( 
  граница: 0; 
  подложка: 0; 
  Списъкът стил тип: няма; 
  ) 


  # навигация ул. Li ( 
  ; /*IE 6*/ дисплей: Вградени; / * 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 ; # навигация ул. Ли един (дисплей: блок; фон: # d9d9d9; ширина: 200px; текстови декорация: няма; капитониране: 4px / * подложките за отгоре и отдолу * / 7px / * подложките за леви, десни * /; граничния дъно: 1px твърди # eeeeee; граничен-нагоре: 1px твърди # cccccc; граничния наляво: 5px твърди # 333333; цвят: # 333333; 
  { border-left-color : #0099FF ; color : #0066FF ; background : #c4c4c4 ; } # навигация ул. Li A: навъртам (граничния лявата цвят: # 0099FF; цвят: # 0066FF; фон: # c4c4c4;) 

Стъпка: 2

Сега ние създаваме основен 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 = "#"> Начало </ A> </ Напред> <li> <a href = "#"> За нас </ A> </ Напред> <li> <a href = "#"> Услуги </ A> </ Напред> <li> <a href = "#"> Карта на сайта </ A> </ Напред> <li> <един href = " # "> Контакти </ A> </ Напред> </ ул.> </ div> 

Да ..! му направи! виж колко е просто да се създаде CSS меню ... А демо ..?

Пила под: CSS, уроци от Admin