Простое адаптивное меню на чистом css: Меню на чистом css

Выпадающее меню на чистом CSS

Категория: Сниппеты с кодом

Продолжим развлекаться с менюшками и сегодня создадим простое выпадающее меню на чистом CSS&HTML.

Перед тем как приступить, предлагаю сразу взглянуть на конечный результат (Codepen).

1. HTML код

<ul>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Категории</a>
  <ul>
    <li><a href="#">Ссылка 1</a></li>
    <li><a href="#">Ссылка 2</a></li>
    <li><a href="#">Ссылка 3</a></li>
  </ul>
  </li>
  <li><a href="#">О сайте</a>
    <ul>
      <li><a href="#">Ссылка 1</a></li>
    </ul>
  </li>
  <li><a href="#">Контакт</a></li>
</ul>

Создадим обычный список (Unordered List) и добавим к двум пунктам – субменю в виде еще двух вложенных списков.

2. CSS

#menu {
  background: #c0392b;
  width: 100%;
  padding:0;
  text-align: center;
  float:left;
  border-bottom: 6px solid #e74c3c;
}
#menu a {
  color: #fff;
  text-decoration: none;
}
#menu a:hover {
  color: #ccc;
}
#menu ul {
  padding:0;
  margin:0;
}
#menu li {
  list-style: none;
  padding: 0 15px 0 0;
  width:100px;
  margin: 0 auto;
  float:left;
  line-height: 50px;
}
#menu li ul {
  position:absolute;
  display: none;
}
#menu li ul li {
  float: none;
  display: inline;
  width:100px;
  line-height:35px;
}
#menu li ul li:hover {
  background: #c0392b;
}
#menu li:hover ul {
  display:block;
}
#menu li ul li {
  display: block;
  background:#e74c3c;
}

Главное, на что стоит обратить внимание в CSS части, то что выпадающее меню изначально скрыто (display:none) и появляется только при наведения курсора (li:hover ul).

Поэкспериментировать с кодом можно, как всегда, в песочнице на Codepen.

Опубликовано 25 августа 2013

30 классных уроков создания CSS меню

CSS сегодня — штука жизненно важная для веб-дизайна. Дежурка периодически публикует переводы интересных статей и уроков по CSS. Однако, хороших материалов много, и чтобы перевести их все, потребуется куча времени. Сегодняшняя подборка — для тех, кто дружит с английским языком или уже достаточно разбирается в вопросе, чтобы понять суть статьи по коду и демо-примерам. Это подборка неплохих туториалов по созданию навигационного меню на CSS. Используя приемы или их элементы, изложенные в этих уроках, вы сможете добавить динамики своему сайту, придать ему современный стильный вид. Некоторые из этих туториалов мы впоследствии переведем и опубликуем в нашем журнале.

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

How-to: DropDown CSS Menu
Демо

Выпадающие странички на CSS

How to Build a Kick-Butt CSS3 Mega Drop-Down Menu
Демо

Отличное горизонтальное выпадающее меню на CSS

A Great CSS Horizontal Drop-Down Menu
Демо

Создаем раскрывающийся при нажатии header

Designing the Digg Header: How To & Download
Демо

Меню-гармошка с изображениями на Jquery

Image Menu with Jquery
Демо

Горизонтальное меню на чистом CSS

Демо

Создайте выпадающее меню с подпунктами на CSS и немножко JavaScript

Create your own drop down menu with nested submenus using CSS and a little JavaScript
Демо

CSS-спрайты, время для JavaScript

CSS Sprites2 – It’s JavaScript Time
Демо

Как сделать простое выпадающее меню на CSS3

How To Create A Simple Drop Down Menu With CSS3
Демо

Классное меню на CSS

Advanced CSS Menu
Демо

Стильное меню из опускающихся квадратов с изображениями на CSS

Slide Down Box Menu with jQuery and CSS3
Демо

Гранжевое меню с пунктами, выдвигающимися под разными углами

Grungy Random Rotation Menu with jQuery and CSS3, к сожалению, в Опере 11. 60 поворот работать не будет.
Демо

Делаем клёвую анимированную навигацию на jQuery и CSS

Create a Cool Animated Navigation with CSS and jQuery
Демо

Горизонтальное меню на CSS

CSS UL LI – Horizontal CSS Menu

Делаем забавное анимированное навигационное меню на чистом CSS

Create a Fun Animated Navigation Menu With Pure CSS
Демо

Как сделать CSS-меню на спрайтах

How to Make a CSS Sprite Powered Menu

Дополнительные CSS-штучки для меню

Advanced CSS Menu Trick
Демо

Анимированные вкладки

Animated horizontal tabs
Демо

Меню в стиле фиш-ай на чистом СSS 

Pure CSS Fish Eye Menu
Демо

Красивая навигация табами на CSS

Sweet tabbed navigation using CSS3
Демо

Делаем простую стильную навигацию с помощью CSS Jquery

Creating a Simple yet Stylish CSS Jquery Menu
Демо

Горизонтальные вкладки в два уровня на jQuery

jQuery Drop Line Tabs
Демо

Честное выпадающее меню на CSS без хаков и javascript

CSS dropdown menu without javascripting or hacks
Демо

Горизонтальное меню с иконками на CSS

Horizontal CSS Menu With Icons
Демо

Делаем говорящее меню навигации на чистом CSS

Create A Speaking Block Navigation Menu Using Pure CSS

Делаем анимированное меню на CSS

Making a CSS3 Animated Menu
Демо

Горизонтальный список — меню на CSS

Horizontal CSS List Menu

Как сделать анимированное меню на CSS

Making a CSS3 Animated Menu
Демо

Как сделать красивую навигационную панель на CSS3

How To Create A Clean CSS3 Navigation Bar
Демо

Подборка stylishwebdesigner. com

• Опубликовано в css, января 3, 2012
• Метки: css, меню, навигация

Tweet

�



Комментарии

10 фрагментов кода CSS и JavaScript для создания адаптивных навигаций

Одна из самых сложных частей хорошего адаптивного сайта — это навигация. Это может занять некоторое время, чтобы понять, и есть много руководств, которые помогут с этим. Но я также являюсь поклонником использования фрагментов кода, подобных тем, которые мы собрали для этой статьи.

Все эти адаптивные фрагменты навигации можно бесплатно редактировать и клонировать для своих собственных проектов. Они также имеют различные стили, поэтому здесь найдется что-то, что подойдет для всех типов веб-сайтов.

Дополнительные фрагменты меню и навигации CSS

1. Адаптивный полностраничный макет

Этот адаптивный пример показывает, как далеко вы можете зайти на этапе прототипирования веб-сайта. Вы заметите, что у навигации есть интересная функция, когда вы наводите курсор и автоматически фокусируетесь на ссылках. Этот эффект можно изменить на «живом» веб-сайте с той же навигацией, но в этом примере полезно показать UI/UX страницы.

См. демонстрацию адаптивной навигации с помощью пера с Kube от Johnny Mango

2.

Если вам нужны более длинные выпадающие элементы в навигации, это меню может работать лучше. Это сильная альтернатива более простой навигации, в которой есть только несколько пунктов меню. В этом случае вы найдете простой список ссылок с очень маленьким раскрывающимся списком. Ссылки подменю появляются только в событии щелчка, которое обрабатывается jQuery. Вы можете изменить это на использование только CSS, но вы потеряете триггер щелчка.

Тем не менее, при таком чистом дизайне я удивлен тем, насколько универсально этот фрагмент предлагает разработчикам.

См. выпадающую панель навигации, реагирующую на перо, автор Tania Rascia

3. Одностраничный макет

Одностраничные навигационные меню нуждаются в любви, как и любые другие. Это прекрасный пример одностраничной навигации в действии. Ссылки прокручиваются вниз с плавной анимацией, но не заставляют вас долго ждать.

Не говоря уже о том, что они автоматически изменяют размер до идеального размера независимо от размера вашего браузера. Я бы в основном рекомендовал этот тип навигации для страницы продаж или простого сайта-портфолио. Он чистый и имеет отличные функции анимации наряду с адаптивными методами.

See the Pen Полностью адаптивная навигация с анимацией CSS и jQuery от Jan Czizikow

4. Красное выпадающее меню

Разработчик Стефани Уолтер создала несколько интересных проектов для Интернета. Этот фрагмент — всего лишь один пример с ярко-красной отзывчивой навигацией.

Ссылки стали немного более эффектными, с пользовательской функцией выбора и приятным эффектом наведения для загрузки. При изменении размера вы заметите, что в навигации вместо этого используется скользящее раскрывающееся меню. Я бы почти выбрал блочный список ссылок для мобильных устройств, но это работает намного лучше, учитывая подменю.

См. многоуровневую адаптивную навигацию Pen от Stéphanie Walter

5. Дизайн на чистом CSS

Вот уникальный дизайн с использованием чистого CSS для навигации. Это вертикальное меню с навигационными ссылками, имитирующими периодическую таблицу элементов.

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

См. Адаптивное меню навигации Pen CSS от Ahmad Hjazy

6. Адаптивный липкий заголовок

 
<навигация>
  
  ☰
  <тип ввода="флажок"/>
 
  
  <дел>
    Первый
    Второй
     html">Третий
    Четвёртый