Как сделать Vista меню средствами CSS

[Foxter]

Я хочу показать Вам, что Вы можете сделать с минимальным усилием и небольшим количеством воображения.
Вот - скриншот с Windows Vista.


Мы попробуем воспроизвести эту панель инструментов, с кнопками и эффектами для браузера. [посмотреть]



1. Панель инструментов (ToolBar)
Сначала определим панель инструментов как ul. Этот ul тэг будет в div тэге. Каждый li тэг будет кнопкой панели инструментов. Теперь, когда Вам будет нужна новая кнопка нужно будет всего лишь добавить li тэг. Как это выглядит в HTML:

PHP код:

div id="vista_toolbar" 
  ul 
    li.../li 
  /ul 
/div 


Итак, теперь определим CSS для панели инструментов.

Сначала "vista_toolbar"

PHP код:

#vista_toolbar { 
   float:left; 
   font:normal 12px 'Trebuchet MS','Arial'; 
   margin:0; 
   padding:0; 
   } 


Теперь ul тэг.

PHP код:

#vista_toolbar ul { 
    background-image:url(back.gif); 
    background-repeat:repeat-x; 
    float:left; 
    line-height:32px; 
    list-style:none; 
    margin:0; 
    padding:0 10px 0 10px; 
    width:500px; 
   } 


Высоту нашего тулбара сделаем "line-height:32px;" а ширину "width:500px;". И 10 дополнительных px, чтобы сделать отступ с начала панели инструментов ("padding: 0 10px 0 10 px;").

Дальше идет li-тэг.

PHP код:

#vista_toolbar li { 
    display:inline; 
    padding:0; 
    } 


Указываем "inline", потому что мы хотим, чтобы наши кнопки были показаны последовательно.

Теперь приступим к созданию кнопок
При необходимости подрежьте изображения кнопки.
- левая часть
-правая часть

теперь мы добавим эту картину на a:hover в CSS

PHP код:

li 
  a href="#" 
     span Add New /span 
  /a 
/li 


Если Вы хотите добавить картинку следом за текстом добавьте в HTML

PHP код:

img align="left" src="files/add.gif" alt="add new" 


в span

Ну например:

PHP код:

li  
  a href="#"  
    span  
       img align="left" src="files/add.gif" alt="add new" Add New 
    /span 
  /a 
/li 


Далее, чтобы обойти стандартное определение цвета определим для некоторых тегов свои цвета:

PHP код:

  #vista_toolbar a span { 
   display:block; 
   float:none; 
   padding:0 10px 0 7px; 
   } 
     
   #vista_toolbar a span img { 
   border:none; 
   margin:8px 4px 0 0; 
   } 


Если у нас есть картинка за текстом, мы должны определить ее вертикаль и края.

Вот - CSS листинг, чтобы сделать эффект подсвечивания:

PHP код:

#vista_toolbar a:hover {
     background: url(left.png) no-repeat left center;   } 
       
 #vista_toolbar a:hover span {
     background:url(right.png) no-repeat right center; 
   } 


[живое превью тут]
оригинал статьи
перевел неизвестный

[Hentony]

классно получилось. Я тоже меню делаю ul-ами горизонтальными)