Создаем выпадающее меню на чистом CSS


Создаем выпадающее меню на чистом CSS

1142
10 из 10
Проголосовало: 1




Большинство выпадающих меню основано на использовании громоздкой разметки и Javascript. Наш вариант будет использовать простую структуру HTML кода и 19 строк CSS, с небольшим вкраплением CSS3 для придания внешнего лоска.

Code
<ul id="nav">
  <li>
  <a href="#" title="Вернуться на главную страницу">Главная</a>
  </li>
  <li>
  <a href="#" title="Информация о компании">О нас</a>
  <ul>
  <li><a href="#">Продукты</a></li>
  <li><a href="#">Команда</a></li>
  </ul>
  </li>
  <li>
  <a href="#" title="Что мы можем для вас сделать">Услуги</a>
  <ul>
  <li><a href="#">Услуга один</a></li>
  <li><a href="#">Услуга два</a></li>
  <li><a href="#">Услуга три</a></li>
  <li><a href="#">Услуга четыре</a></li>
  </ul>
  </li>
  <li>
  <a href="#" title="Наша продуктовая линейка">Продукты</a>
  <ul>
  <li><a href="#">Маленький продукт (первый)</a></li>
  <li><a href="#">Маленький продукт (второй)</a></li>
  <li><a href="#">Маленький продукт (третий)</a></li>
  <li><a href="#">Маленький продукт (четвертый)</a></li>
  <li><a href="#">Большой продукт (пятый)</a></li>
  <li><a href="#">Большой продукт (шестой)</a></li>
  <li><a href="#">Большой продукт (седьмой)</a></li>
  <li><a href="#">Большой продукт (восьмой)</a></li>
  <li><a href="#">Невообразимый продукт (девятый)</a></li>
  <li><a href="#">Невообразимый продукт (десятый)</a></li>
  <li><a href="#">Невообразимый продукт (одиннадцатый)</a></li>
  </ul>
  </li>
  <li>
  <a href="#" title="Как с нами связаться">Контакт</a>
  <ul>
  <li><a href="#">Часы работы</a></li>
  <li><a href="#">Местоположение</a></li>
  </ul>
  </li>
</ul>

Разметка достаточно проста и представляет собой серию вложенных списков <ul>. Нет никаких ID, классов и элементов. Простой ясный код.

Элемент #nav <ul> содержит серию элементов <li>. Все пункты, которые нуждаются в выпадающих подпунктах, содержат другой элемент <ul>. Обратите внимание, что элемент <ul> выпадающих подпунктов не имеет класса. Мы используем каскадные стили, сохраняя разметку как можно более чистой.

Данный код в css

Code
/*------------------------------------*\
  НАВИГАЦИЯ
\*------------------------------------*/
#nav{
  float:left;
  width:100%;
  list-style:none;
  font-weight:bold;
  margin-bottom:10px;
}
#nav li{
  float:left;
  margin-right:10px;
  position:relative;
  display:block;
}
#nav li a{
  display:block;
  padding:5px;
  color:#fff;
  background:#333;
  text-decoration:none;
   
  text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Тень текста, чтобы приподнять его на немного */
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  border-radius:2px;
}
#nav li a:hover{
  color:#fff;
  background:#6b0c36;
  background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
  text-decoration:underline;
}

/*--- ВЫПАДАЮЩИЕ ПУНКТЫ ---*/
#nav ul{
  list-style:none;
  position:absolute;
  left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */
  opacity:0; /* Устанавливаем начальное состояние прозрачности */
  -webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */
}
#nav ul li{
  padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
  float:none;
  background:url(dot.gif);
}
#nav ul a{
  white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
  display:block;
}
#nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */
  left:0; /* Приносим его обратно на экран, когда нужно */
  opacity:1; /* Делаем непрозрачным */
}
#nav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
  background:#6b0c36;
  background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
  text-decoration:underline;
}
#nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */
  text-decoration:none;
  -webkit-transition:-webkit-transform 0.075s linear;
}
#nav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */
  background:#333;
  background:rgba(51,51,51,0.75); /* Будет полупрозрачным */
  text-decoration:underline;
  -moz-transform:scale(1.05);
  -webkit-transform:scale(1.05);
}

#nav ul{
  list-style:none;
  position:absolute;
  left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод, лучше чем display:none;) */
  opacity:0; /* Устанавливаем начальное состояние прозрачности */
  -webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */
}

#nav ul li{
  padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */
  float:none;
  background:url(dot.gif);
}
#nav ul a{
  white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */
  display:block;
}
#nav li:hover ul{ /* Выводим выпадающий пункт при наведении курсора */
  left:0; /* Приносим его обратно на экран, когда нужно */
  opacity:1; /* Делаем непрозрачным */
}

#nav li:hover a{ /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */
  background:#6b0c36;
  background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */
  text-decoration:underline;
}

#nav li:hover ul a{ /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */
  text-decoration:none;
  -webkit-transition:-webkit-transform 0.075s linear;
}

#nav li:hover ul li a:hover{ /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */
  background:#333;
  background:rgba(51,51,51,0.75); /* Будет полупрозрачным */
  text-decoration:underline;
  -moz-transform:scale(1.05);
  -webkit-transform:scale(1.05);
}
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-...
  • Всего комментариев: 1

GM-DOC
0
GM-DOC написал: Написано 01 Марта 2011 в 14:34
Комментарий №1
Скрипт кул токо цвет не тот happy

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    204
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 6
    Гостей: 5
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: