Страница 1 из 11
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Серое горизонтальное меню для сайта
Серое горизонтальное меню для сайта
RICHMOND
Дата: Вторник, 15.01.2013, 00:25 | Сообщение # 1
Пользователи
Сообщений:19
Награды: 0




Серое горизонтальное меню с красивым эффектом при наведении. Меню по дизайну подойдет как светлым сайтам по дизайну так и к темным.

Установка:

В CSS стиль вставляем:

Код
#menu {padding:0;margin:0;list-style:none;}    
   #menu a {    
   list-style:none;    
   float:left;    
   position:relative;    
   padding:5px;    
   color:#fff;    
   background:-webkit-linear-gradient(top, #666 10%, #444 100%);    
   background:-moz-linear-gradient(top, #666 10%, #444 100%);    
   background:-o-linear-gradient(top, #666 10%, #444 100%);    
   background:linear-gradient(top, #666 10%, #444 100%);    
   border:1px solid #000;    
   text-decoration:none;    
   margin:0 0 0 -1px;    
   text-shadow:0 -1px 0 #000;    
   -webkit-transition:ease-in-out 100ms;    
   -moz-transition:ease-in-out 100ms;    
   -o-transition:ease-in-out 100ms;    
   transition:ease-in-out 100ms;    
   }    
   #menu a:hover {    
   background:-webkit-linear-gradient(top, #777 10%, #555 100%);    
   background:-moz-linear-gradient(top, #777 10%, #555 100%);    
   background:-o-linear-gradient(top, #777 10%, #555 100%);    
   background:linear-gradient(top, #777 10%, #555 100%);    
   margin:0;    
   box-shadow: 0 0 7px #000;    
   z-index:1    
   }    
   #menu a ul {    
   color:#000;    
   margin:1px 0 0 0;    
   padding:0;    
   font-size:11px;    
   color:#999;    
   -webkit-transition:ease-in-out 150ms;    
   -moz-transition:ease-in-out 150ms;    
   -o-transition:ease-in-out 150ms;    
   transition:ease-in-out 150ms;    
   }   
   #menu a:hover ul {color:#fff;}


В то место где хотим видеть меню

Код
<div id="menu">    
   <a href="/">Главная    
   <ul>Главная страница сайта</ul>    
   </a>    
   <a href="/news">Новости    
   <ul>Лучшие новости</ul>    
   </a>    
   <a href="/load">Файлы    
   <ul>Много файлов</ul>    
   </a>    
   <a href="/publ">Статьи    
   <ul>Написаные от руки</ul>    
   </a>    
   <a href="/stuff">Фильмы    
   <ul>Смотрите у нас</ul>    
   </a>    
   <a href="http://csomsk.ru/">CSOMSK    
   <ul>ВСЕ ДЛЯ ВАС</ul>    
   </a>    
   </div>
Прикрепления: 8244810.jpg(70Kb)
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Серое горизонтальное меню для сайта
Страница 1 из 11
Поиск: