Вернуться   Foxter.ru > Графика > Дизайнерам

Ответ
 
Опции темы Опции просмотра
Старый 18.12.2007, 21:23   #54803  
Он иногда здесь!!.
 
Аватар для Foxter
 
Репутация: 711422Репутация: 711422Репутация: 711422Репутация: 711422Репутация: 711422Репутация: 711422Репутация: 711422Репутация: 711422Репутация: 711422Репутация: 711422Репутация: 711422
Регистрация: 17.10.2005
Адрес: Moscow
Сообщения: 1,518
По умолчанию Как сделать Vista меню средствами CSS

Я хочу показать Вам, что Вы можете сделать с минимальным усилием и небольшим количеством воображения.
Вот - скриншот с 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 
  
/
/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 
  
/
/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 {
     
backgroundurl(left.pngno-repeat left center;   } 
       
 
#vista_toolbar a:hover span {
     
background:url(right.pngno-repeat right center
   } 
[живое превью тут]
оригинал статьи
перевел неизвестный
Foxter вне форума   Ответить с цитированием
Старый 28.12.2007, 20:07   #54887  
Новичок
 
Аватар для Hentony
 
Репутация: 1
Регистрация: 05.12.2007
Сообщения: 2
По умолчанию

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


Здесь присутствуют: 1 (пользователей - 0 , гостей - 1)
 

Ваши права в разделе
Вы не можете создавать темы
Вы не можете отвечать на сообщения
Вы не можете прикреплять файлы
Вы не можете редактировать сообщения

BB-коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.
Быстрый переход



Powered by vBulletin
Copyright ©2000-2024, Jelsoft Enterprises Ltd.
[Foxter Skin] developed by: Foxter.ru