Выпадающее меню на CSS3


Выпадающее меню на CSS3

1731
9.2 из 10
Проголосовало: 5




  • Скачать с сервера
  • Скачать
  • Смотреть демо

Меню по своему стилю подойдет для сайтов с темным дизайном, но, возможно, что оно будет органично и логично смотреться и на белом и на сером фоне. Выпадающее меню на CSS3 выполнено так, что код HTML выпадающего меню максимально короткий. Никакого эффекта при появлении меню нет, меню просто мгновенно появляется и исчезает. Просто при событии hover показывается нужный элемент меню.

Меню проверено в браузерах: Firefox 4, Safari 4, Chrome 13, Opera 10, IE 7.

Установка:
1 шаг. Это ставим там где нужно:

Code
<div class="dropdown">  
  <a href="http://webo4ka.ru/">Профиль</a>  
  <div>  
  <ul>  
  <li><a href="http://webo4ka.ru/">Настройки</a></li>  
  <li><a href="http://webo4ka.ru/">Оформление</a></li>  
  <li><a href="http://webo4ka.ru/">Оповещения</a></li>  
  </ul>  
  </div>  
  </div>


2 шаг. Это ставим в CSS:

Code
.dropdown {  
  position: relative;  
  height: 27px;  
  border-width: 1px;  
  border-style: solid;  
  border-color: #272c33 #242930 #22272d;  
  border-radius: 3px;  
  display: inline-block;  
  vertical-align: baseline;  
  zoom: 1;  
  *display: inline;  
  *vertical-align: auto;  
  background-color: #363d47;  
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4a5361), color-stop(100%, #363d47));  
  background-image: -webkit-linear-gradient(top, #4a5361, #363d47);  
  background-image: -moz-linear-gradient(top, #4a5361, #363d47);  
  background-image: -ms-linear-gradient(top, #4a5361, #363d47);  
  background-image: -o-linear-gradient(top, #4a5361, #363d47);  
  background-image: linear-gradient(top, #4a5361, #363d47);  
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);  
  -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);  
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);  
  }  
  .dropdown a {  
  font-size: 12px;  
  text-shadow: 0 1px #000;  
  }  
  .dropdown a:hover {  
  text-decoration: none;  
  }  
  .dropdown > a {  
  float: left;  
  position: relative;  
  height: 27px;  
  line-height: 26px;  
  padding: 0 12px;  
  color: #ecf0f1;  
  border-radius: 2px 0 0 2px;  
  }  
  .dropdown > a:before {  
  content: '';  
  display: inline-block;  
  width: 10px;  
  height: 11px;  
  vertical-align: -2px;  
  margin-right: 10px;  
  background: url("settings.png") 0 0 no-repeat;  
  }  
  .dropdown > a:hover {  
  background: #3f4753;  
  background: rgba(255, 255, 255, 0.04);  
  }  
  .dropdown > a:active {  
  background: #343b44;  
  }  
  .dropdown div {  
  float: left;  
  height: 27px;  
  width: 26px;  
  background: url("toggle.png") 9px 9px no-repeat;  
  border-left: 1px solid #292e36;  
  border-color: rgba(0, 0, 0, 0.4);  
  -webkit-box-shadow: inset 1px 0 rgba(255, 255, 255, 0.08);  
  -moz-box-shadow: inset 1px 0 rgba(255, 255, 255, 0.08);  
  box-shadow: inset 1px 0 rgba(255, 255, 255, 0.08);  
  }  
  .dropdown div:hover {  
  -webkit-box-shadow: inset 1px 0 rgba(255, 255, 255, 0.04), inset 26px 26px rgba(0, 0, 0, 0.1);  
  -moz-box-shadow: inset 1px 0 rgba(255, 255, 255, 0.04), inset 26px 26px rgba(0, 0, 0, 0.1);  
  box-shadow: inset 1px 0 rgba(255, 255, 255, 0.04), inset 26px 26px rgba(0, 0, 0, 0.1);  
  }  
  .dropdown div:hover ul {  
  display: block;  
  }  
  .dropdown ul {  
  display: none;  
  position: absolute;  
  top: 27px;  
  left: -1px;  
  right: -1px;  
  background: #272c33;  
  border: 1px solid #20242a;  
  border-radius: 0 0 3px 3px;  
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);  
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);  
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);  
  }  
  .dropdown ul li {  
  display: block;  
  }  
  .dropdown ul li:last-child a {  
  border-radius: 0 0 3px 3px;  
  }  
  .dropdown ul a {  
  display: block;  
  line-height: 28px;  
  padding: 0 10px 1px;  
  color: #b2b8c4;  
  border-top: 1px solid transparent;  
  }  
  .dropdown ul a:hover {  
  color: #fff;  
  border-color: #78aad5;  
  text-shadow: 0 1px rgba(0, 0, 0, 0.7);  
  background-color: #426ebf;  
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5e9ace), color-stop(100%, #416cb8));  
  background-image: -webkit-linear-gradient(top, #5e9ace, #416cb8);  
  background-image: -moz-linear-gradient(top, #5e9ace, #416cb8);  
  background-image: -ms-linear-gradient(top, #5e9ace, #416cb8);  
  background-image: -o-linear-gradient(top, #5e9ace, #416cb8);  
  background-image: linear-gradient(top, #5e9ace, #416cb8);  
  }
Автор публикации: Загрузка
Загрузка
k43, это его n материал
Источник: http://www.dropbox.com/
  • Всего комментариев: 5

Maestro
+1
Maestro написал: Написано 05 Июля 2012 в 16:33
Комментарий №2
красивая вещь. но CSS код огромный

Kiwi
+2
Kiwi написал: Написано 05 Июля 2012 в 17:54
Комментарий №3
Красота требует кода)

Kiwi
+4
Kiwi написал: Написано 05 Июля 2012 в 13:10
Комментарий №1
Люблю такого качества вещи)

Kelin
+1
Kelin написал: Написано 05 Июля 2012 в 19:55
Комментарий №4
И я smile

WeBBeR
0
WeBBeR написал: Написано 27 Августа 2012 в 22:32
Комментарий №5
и я того же мнения tongue

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2110
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • LeKcUs написал:
  • В самый конец просто добавьте вот такие теги... И у Вас не будет больше возникать вопросов! cry

    <!-- </popup> -->$POWERED_BY$<!-- <popup> -->
  • invitesystem написал:
  • Скачал архив, залил сайт, но проблема с кодом для вставки в конструктор шаблонов. Какие-то в нём знаки вопроса и без обязательного $POWERED_BY$
  • Marishka написал:
  • Можно, включите фантазию. Бесплатно никто ничего делать не будет.... Данный скрипт то написали так как попросили happy
  • BLAzER написал:
  • А на условных операторах это не сделать?
  • Вовчик написал:
  • Кто-то недавно об этом спрашивал
    Последние темы
    Опрос
    422
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 2
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: