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

1226
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 25
Скрипты и модификации для Ucoz 2120
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • По просьбам поправили!.
    1. Делаем все как написано.
    2. Находим файл /Ucoz4/ctena_user2_wall_v2.js и меняем все в файле из нашего файла:
    Код
    http://mbs.usite.pro/ctena_user2_wall_v2.js
  • rayven написал:
  • в любом случае, всегда надо под свои нужды настраивать руками. А скрипт пригодиться, не тут, так там.
  • rayven написал:
  • даже Вовчик со мной согласен. tongue
  • Marishka написал:
  • Upd 1.4 Кому лень https://jsfiddle.net/7js6tfp1/5/
  • Marishka написал:
  • Мы обновили код и упростили его установку:
    Что нового:
    1. Новый легкий js код.
    2. Отправка по Enter если есть или нет Aa цвета.
    3. Простая установка.

    Принцип работы:
    Используется родное поле ввода текста с выбором цвета, родная кнопка отправки скрывается позволяя отправить форму по Enter.

    Демо: https://jsfiddle.net/7js6tfp1/4/
    Последние темы
    Опрос
    273
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 3
    Гостей: 3
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: