Css3 меню: CSS3 Menu. Бесплатная программа для создания меню CSS

Содержание

CSS3 Menu. Бесплатная программа для создания меню CSS

Обзор

CSS3 меняет технологию создания вебсайтов. Хотя многие не хотят начинать использовать CSS3 из-за отсутствия поддержки в некоторых браузерах, есть те, кто идет вперед и создает удивительные вещи с помощью потрясающих возможностей CSS3. Больше не нужно полагаться на скрипты и картинки, чтобы создать стильные элементы для вебсайта, такие как кнопки и меню.

Вы можете создать современное меню без Javascript и картинок, эффективно используя новые CSS3 свойства: радиус границы и анимацию. Это меню прекрасно работает с Firefox, Opera, Chrome и Safari. Выпадающее меню работает также в браузерах, которые не поддерживают CSS3, таких как ИЕ7+, но закругленные углы и тени не будут отображаться. Эффекты CSS3 однажды заменят всю jQuery анимацию, которую используют дизайнеры.

Особенности меню

  • Javascript не требуется

    Работает в браузерах с отключенным скриптом, или если браузер не поддерживает Javascript вообще.

  • Адаптивное меню
    Меню легко адаптируется к устройству, с которого его просматривают. Смотреть адаптивное демо…

  • Дружественное к SE
    Дружественное к поисковым системам и текстовым браузерам.

  • Поддержка браузеров
    Работает во всех современных браузерах (в ИЕ6 доступен только верхний уровень меню).

  • Поддержка устройств
    Работает на всех современных устройствах (iPhone, iPad, Android, Blackberry, Windows Phone).

  • Графический интерфейс


    Графический интерфейс позволяет создавать меню без сложного программирования вручную. Используйте окно предварительного просмотра, чтобы следить за внешним видом Вашего меню во время его создания и настройки.

  • Дизайн, основанный на 100%-ом CSS
    Меню основано только на HTML списке ссылок (UL/LI структура) и CSS. Никакие дополнительные не CSS параметры не используются.

  • Великолепные CSS3 свойства
    Многоуровневое выпадающее меню создано с использованием Закругленных углов CSS3 (CSS3 border-radius), Тени CSS3 (box-shadow и css3 text-shadow).
    Прозрачность, фон и цвета шрифтов, линейный градиент и радиальный CSS3 градиет также доступны.
    CSS3 эффекты для выпадающего меню Выцветание, Слайд и т.д.

  • Мега-меню с многоколоночным подменю
    Создавайте Мега-меню с многоколоночными подменю. Указывайте количество строк, которое хотите иметь.

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

Получить полную версию

Плата требуется для использования в коммерческих целях. Бизнес версия CSS3Menu дополнительно предоставляет опцию для создания многоколоночного меню и включает расширенные наборы шаблонов меню и иконок.

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

Помощь

Смотри также:

Технические вопросы
Вопросы лицензирования
Недавние вопросы
Как создать стильное анимированное CSS3 меню без JavaScript

1) Откройте приложение CSS3 Menu, нажмите кнопки «Добавить элемент» и «Добавить подменю» , расположенные на панели инструментов CSS3 Menu, чтобы создать меню. Также Вы можете использовать кнопку «Удалить элемент» , чтобы удалить некоторые кнопки.

2) Используйте готовые шаблоны. Чтобы это сделать, выберите понравившуюся тему в списке «Шаблоны». Дважды щелкните по теме чтобы применить ее.

3) Настройка внешнего вида меню.
 3.1. Кликом выберите элемент и измените настройки внешнего вида кнопки для нормального и наведенного состояний, установите ссылку и значение атрибута Target на вкладке «Главное меню».
 3.2. Кликом выберите элемент и измените внешний вид подменю для нормального и наведенного состояний, установите ссылку и значение атрибута Target на вкладке «Подменю».

4) Сохранение меню.
 4.1. Сохранение файла проекта. Чтобы сохранить проект, просто нажмите кнопку «Сохранить» , расположенную на панели инструментов или выберите пункты «Сохранить» или «Сохранить…» в главном меню.
 4.2. Публикация меню в формате HTML. Чтобы сделать это, нажмите кнопку «Опубликовать» на панели инструментов.

Связаться с нами

CSS3 Menu
При обнаружении ошибок в работе программы, возникновении вопросов и пожеланий свяжитесь с технической поддержкой . Убедитесь, что в письмо включена информация о браузере, ОС, версии CSS3Menu, а также ссылка на вашу страницу. В большинстве случаев Вы получите ответ в течение одного рабочего дня. Пожалуйста, сначала ознакомьтесь с FAQ. Возможно, на ваш вопрос уже ответили.
E-mail:

Создание адаптивного меню с использованием CSS

В этом уроке мы расскажем о способе создания адаптивного меню.  Это меню использует чистую разметку HTML5 и может быть выровнено по левой стороне, центру или правой стороне. Меню раскрывается, когда пользователь наводит указатель мыши, а также обладает индикатором, показывающим активный/текущий элемент меню. Это меню работает во всех браузерах на мобильных устройствах и настольных компьютерах, включая браузер Internet Explorer. 

 

 


Демонстрация работы

Цель

Цель этого урока — показать вам, как превратить обычное меню в виде списка в выпадающее меню для маленьких экранов.

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

Разметка HTML

Вот разметка для этого меню. Тег <nav> нужен, чтобы создать выпадающий список со свойством CSS абсолютного расположения. Мы объясним это ниже. Класс .current показывает активную/текущую ссылку меню.

<nav>
<ul>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Illustration</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Print Media</a></li>
<li><a href="#">Graphic Design</a></li>
</ul>
</nav>

CSS

CSS для версии меню для настольных компьютеров довольно понятен, так что мы не будем вдаваться в подробности. Заметьте, что мы задали свойство display:inline-block вместо float:left для элементов <li> меню. Это позволит выравнивать кнопки меню по левой стороне, центру или правой стороне, задавая значение свойства text-align элементу <ul>.

/* Меню */
.nav {
position: relative;
margin: 20px 0;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav li {
margin: 0 5px 10px 0;
padding: 0;
list-style: none;
display: inline-block;
}
.nav a {
padding: 3px 12px;
text-decoration: none;
color: #999;
line-height: 100%;
}
.nav a:hover {
color: #000;
}
.nav .current a {
background: #999;
color: #fff;
border-radius: 5px;
}

Выравнивание по центру и правой стороне

Как упомянуто выше, Вы можете изменить выравнивание кнопок, используя свойство text-align.

/* Меню справа */
.nav.right ul {
text-align: right;
}
/* Меню в центре */
.nav.center ul {
text-align: center;
}

Поддержка браузера Internet Explorer

Тег HTML5 <nav> и media query не поддерживаются браузером Internet Explorer 8 и ниже. Включите в код css3-mediaqueries.js или respond.js и html5shim.js, чтобы обеспечить обратную совместимость. Если Вы не хотите включать html5shim.js, замените тег <nav> тегом <div>.

<!--[if lt IE 9]> 
<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--> 

Адаптивность

Переходим к самой интересной части — сделать меню адаптивным с помощью media query. Если Вы не знакомы с адаптивным дизайном, Вы можете прочитать наши предыдущие статьи об адаптивном дизайне и media query.

В переходной точке 600px мы задали элементу меню относительное расположение, чтобы мы могли разместить список меню <ul> сверху с абсолютным расположением. Мы спрятали все элементы <li>, задав им свойство display:none, но оставили .current <li>, показывая его блоком. После этого мы снова задали всем элементам <li> свойство display:block, когда пользователь наводит указатель мыши на меню, что создаст выпадающий список. Мы добавили графическую «галочку» элементу .current, чтобы показать, что это активный элемент. Для центрального и правого выравнивания меню используйте свойства левого и правого отступов, чтобы расположить список <ul>. Посмотрите пример, чтобы увидеть окончательный результат.

 

@media screen and (max-width: 600px) {
.nav {
position: relative;
min-height: 40px;
}
.nav ul {
width: 180px;
padding: 5px 0;
position: absolute;
top: 0;
left: 0;
border: solid 1px #aaa;
background: #fff url(images/icon-menu.png) no-repeat 10px 11px;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.nav li {
display: none; /* hide all <li> items */
margin: 0;
}
.nav .current {
display: block; /* show only current <li> item */
}
.nav a {
display: block;
padding: 5px 5px 5px 32px;
text-align: left;
}
.nav .current a {
background: none;
color: #666;
}

/* При наведении указателя мыши на меню*/
.nav ul:hover {
background-image: none;
}
.nav ul:hover li {
display: block;
margin: 0 0 5px;
}
.nav ul:hover .current {
background: url(images/icon-check.png) no-repeat 10px 7px;
}

/* Меню справа */
.nav.right ul {
left: auto;
right: 0;
}
/* Меню в центре */
.nav.center ul {
left: 50%;
margin-left: -90px;
}
}

Автор урока Nick La

Перевод — Дежурка

Смотрите также:

Меню, пожалуйста | WebReference

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

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Меню</title>
    <link rel="stylesheet" href="main.css" media="screen">
  </head>
  <body>
    <nav>
      <ul>
        <li>
          <a href="index.html">Главная</a>
        </li>
        <li>
          <a href="training.html">Обучение</a>
        </li>
        <li>
          <a href="conferences.html">Конференции</a>
        </li>
        <li>
          <a href="about.html">О нас</a>
        </li>
      </ul>
    </nav>
  </body>
</html>

Наше меню будет состоять из четырёх элементов:

  • Главная
  • Обучение
  • Конференции
  • О нас

Мы хотим, чтобы оно выглядело так.

Вы могли заметить, что мы добавили новые теги <nav>, <ul> и <li>.

<nav> используется для определения всех видов навигационных функций на сайтах, которые содержат ссылки на внутреннюю или внешнюю информацию. Размещение <nav> в коде говорит «всё внутри <nav> будет использоваться для навигации по сайту».

В <nav> мы вставили тег <ul> с несколькими тегами <li>. Тег <ul> представляет собой «неупорядоченный список» (как маркированный список), а теги <li> представляют каждый отдельный компонент этого списка (маркер). При создании сайтов неупорядоченный список часто будет наиболее разумным выбором, когда дело доходит до составления страницы с меню. На самом деле, меню это вариант списка ссылок, который был создан без заданного правила относительно порядка его элементов.

С помощью кода выше, который пока не завершён, наш список должен выглядеть следующим образом.

Вы, возможно, видели нечто подобное даже при создании текстового документа в редакторе, когда хотели сделать маркированный список. Без стилизации <ul>, однако, наш список просто начинается с точки. В отличие от этого наше меню может быть намного сложнее. Мы можем задать ему границы, цвет, фон и др. Каждая ссылка по умолчанию отображается синим цветом, как видно на рисунке выше.

Теперь попробуем изготовить более стильное меню через наш код CSS.

Как правило, мы начинаем с самого общего тега в HTML-коде, верно? В нашем случае код начинается с <nav>, поскольку он отвечает за наше меню. С этим тегом мало что можно сделать, поскольку данный тег напрямую не меняет внешний вид маркированного списка.

Следующий тег <ul> начинает список. Мы хотим, чтобы наш список выглядел немного иначе, чем по умолчанию. Самое главное — добавить новый фон.

nav ul {
  background-color: PaleVioletRed;
}

Для цвета фона мы выбрали название PaleVioletRed. Перезагрузка страницы показывает наши изменения в результате добавления этого кода.

На самом деле мы применили цвет фона ко всем элементам <ul>. Это потому, что мы применяем его к тегам <nav> и <ul> с помощью следующего селектора.

nav ul {}

Теперь мы хотим избавиться от круглых чёрных точек в этом списке и сделать его более похожим на меню. Мы можем скрыть их благодаря свойству list-style, как показано ниже.

nav ul {
  background-color: PaleVioletRed;
  list-style: none;
}

Установка list-style в значение none делает список без характерных маркеров.

Это выглядит гораздо лучше.

Широкая область цвета удивительно большая. Мы хотим немного урезать её, используя тот же пример, что с рамкой вокруг изображения (padding).

nav ul {
  background-color: PaleVioletRed;
  list-style: none;
  padding: 0;
}

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

Теперь пришло время для работы с размерами. Наша навигация должна быть 200 пикселей в ширину.

nav ul {
  background-color: PaleVioletRed;
  list-style: none;
  padding: 0;
  width: 200px;
}

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

nav ul {
  background-color: PaleVioletRed;
  list-style: none;
  padding: 0;
  width: 200px;
  border: 1px solid MediumVioletRed;
}

Вот результат и это выглядит здорово!

С нашей прекрасной внешней рамкой. Пришло время построить каждый отдельный элемент списка, к которому можно обратиться с помощью такого селектора CSS.

nav ul li {}

Этот код ищет <nav>, затем внутри <ul> и <li>. Кажется, что каждому элементу в списке нужна своя граница.

nav ul li {
  border-bottom: 1px solid MediumVioletRed;
}

С помощью этого кода мы добавили border-bottom, так что каждый элемент <li> теперь имеет такой же тип границы как у внешней рамки, но только в нижней части текста.

В настоящее время наше меню должно выглядеть так.

Теперь у нас две проблемы. Первая — пространство слева между границей и элементами списка. Изменим его, используя нашего знакомого padding.

nav ul li {
  border-bottom: 1px solid MediumVioletRed;
  padding: 5px;
}

Это гораздо лучше, правда? Мы добавили padding шириной 5 пикселей между текстом и границами.

Наша вторая проблема менее заметна, но всё ещё существует в виде двойной линии в нижней части нашего меню. Это потому, что наша граница для меню добавилась к нашей границе для последнего элемента, когда мы вставили bottom-border. Помните, что мы использовали код в <ul> из <nav> для указания границы.

nav ul {
  background-color: PaleVioletRed;
  list-style: none;
  padding: 0;
  width: 200px;
  border: 1px solid MediumVioletRed;
}

Также вспомним, что мы устанавливаем list-style в none так, что маркеры или любые другие знаки не появляются.

list-style: none;

Задав none в качестве значения мы отключаем свойство, так что оно не будет иметь никаких графических эффектов.

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

nav ul li:last-child {
  border-bottom: none;
}

Результат применения этого кода сверхэффективен.

Двойная граница исчезла, всё потому, что мы нашли <ul> в <nav>, а затем выбрали в нём последний <li> и отключили нижнюю границу. Псевдо-селектор last-child указывает на последний элемент списка.

nav ul li:last-child {}

Этот селектор можно перевести следующим образом:

«найдите <nav>, затем <ul> и примените все изменения к последнему элементу <li>».

Последнее, что нам нужно сделать, это настроить текст в ссылках. Вы можете создать ссылки в HTML следующим образом.

<a href="url">Набранный здесь текст ведёт на указанный веб-адрес</a>

Мы используем тег <a> вместе с атрибутом href. Значением этого атрибута должен быть адрес, на который вы хотите переместить пользователя, если он щёлкает по ссылке. В нашем примере у нас есть четыре ссылки. Одна из них выглядит так.

<a href="training.html">Обучение</a>

Это значит, что браузер будет показывать слово «Обучение», на которое можно щёлкнуть и затем браузер отправится на страницу, которая была сохранена в файле training.html.

Зная, что этот тег является частью кода HTML, мы можем создать специальный селектор, который ищет именно этот тег.

nav ul li a {}

Вуаля!

Давайте добавим новые свойства к нашему новому селектору. Прежде всего, изменим цвет шрифта на белый.

nav ul li a {
  color: white;
}

Обновление браузера показывает наши новые изменения.

Отлично! Теперь у нас есть ссылки белого цвета. Изменим некоторые акценты. Браузер устанавливает выделение в CSS для всех ссылок в виде text-decoration: underline. Мы хотим изменить это значение, как мы уже делали это раньше со значением none.

nav ul li a {
  color: white;
  text-decoration: none;
}

Красота! Мы завершили желаемое меню.

В качестве дополнительного замечания, если вы работаете с большим количеством ссылок, то, возможно, помните, что на многих страницах при наведении на ссылку текст подчёркивается.

Проверьте эту ссылку, которую я написал в своём Twitter (без подчёркивания).

При наведении указателя мыши на эту ссылку происходит нечто интересное, о чём многие интернет-пользователи хорошо знают — текст становится подчёркнутым.

Попробуем сделать нечто подобное в нашем меню, что позволит ссылке выделиться при наведении на неё. Мы будем использовать псевдо-селектор под названием hover.

nav ul li a:hover {
  text-decoration: underline;
}

В этот раз мы добавили его к ссылкам <a>. Это означает, что при наведении указателя мыши на ссылку будет применяться эффект. Это также относится и к наведению на другие элементы.

div:hover
li:hover
img:hover

Эффект виден ниже, когда мы наводим курсор мыши на ссылку «Конференции».

В итоге, окончательный код CSS должен выглядеть так.

nav ul {
  background-color: PaleVioletRed;
  list-style: none;
  padding: 0;
  width: 200px;
  border: 1px solid MediumVioletRed;
}
  
nav ul li {
  border-bottom: 1px solid MediumVioletRed;
  padding: 5px;
}

nav ul li:last-child {
  border-bottom: 0;
}

nav ul li a {
  color: white;
  text-decoration: none;
}

nav ul li a:hover {
  text-decoration: underline;
}

Недавно появившиеся псевдо-селекторы (last-child и hover) будут полезны в будущем.

В этой главе вы узнали, как использовать ссылки и вставлять их в HTML-документы. На данный момент мы использовали только адреса, ведущие на локальные файлы (например, training.html), сохранённые на вашем компьютере, но вы также можете использовать ссылки, указывающие на внешние сайты в Интернете, вроде этого.

<a href="http://twitter.com/varjs">Мой Twitter</a>

Этот код в браузере будет отображаться как Мой Twitter. Обратите внимание, что адрес содержит http:// в самом начале. Это правило говорит, что каждая ссылка используемая в HTML-документе и ведущая на другой сайт, должна быть с префиксом http://. В противном случае, ваши ссылки не будут перенаправлять пользователей в нужное место.

Автор и редакторы

Автор: Дамиан Вельгошик

Последнее изменение: 11.08.2018

Редакторы: Влад Мержевич

Анимированное меню на CSS3

В этом небольшом уроке мы создадим красочное выпадающее меню, используя только CSS3 и шрифт иконок Font Awesome. Шрифт иконок, как следует из названия, шрифт, который отображает иконки вместо букв. Это означает, что вы получите симпатичные векторные иконки в любом браузере, который поддерживает пользовательские шрифты HTML5 (практически все современные браузеры). Чтобы добавить иконку к элементам, вам нужно всего лишь присвоить класс элементу и иконка будут добавлена при помощи псевдо-класса :before.

HTML

Мы будем использовать следующую разметку:

<nav>
    <ul>
        <li>
            <a href=»#»></a>
            <ul>
                <li><a href=»#»>Выпадающий пункт 1</a></li>
                <li><a href=»#»>Выпадающий пункт 2</a></li>
                <!— Остальные выпадающие пункты меню —>
            </ul>
        </li>
        <!— Пункты меню—>
    </ul>
</nav>

Каждый пункт основного меню является пунктом неупорядоченного списка. Внутри него ссылка с классом определяющим иконку (см. полный список классов для иконок здесь), а другой неупорядоченный список будет отображаться в виде выпадающего меню при наведении курсора мыши.

CSS

Как вы видите из HTML-фрагмента выше, мы имеем один список, вложенный в основной, таким образом, мы должны писать CSS с осторожностью. Потому как мы не хотим, чтобы стили верхнего списка распространялись на потомков. Для этого мы будем использовать CSS селектор «>«:

#colorNav > ul{
    width: 450px;
    margin:0 auto;
}

Эти правила ограничивают ширину и отступы только для первого неупорядоченного списка, который является прямым потомком пункта #colorNav. Теперь определим стили для пунктов верхнего уровня:

#colorNav > ul > li{ /* стили для верхнего уровня li */
    list-style: none;
    box-shadow: 0 0 10px rgba(100, 100, 100, 0.2) inset,1px 1px 1px #CCC;
    display: inline-block;
    line-height: 1;
    margin: 1px;
    border-radius: 3px;
    position:relative;
}

Мы укажем для свойства display значение inline-block, чтобы элементы списка отображались в одну линию, и зададим относительное позиционирование. Анкоры содержат иконки, как это определено шрифтом Awesome.

#colorNav > ul > li > a{
    color:inherit;
    text-decoration:none !important;
    font-size:24px;
    padding: 25px;
}

Теперь мы можем заняться выпадающим меню. Здесь мы будем определять CSS3 анимацию. Мы будем устанавливать максимальную высоту в 0 пикселей, которая будет скрывать выпадающий список. При наведении мыши мы будем изменять максимальную высоту, и список будет постепенно раскрывается:

#colorNav li ul{
    position:absolute;
    list-style:none;
    text-align:center;
    width:180px;
    left:50%;
    margin-left:-90px;
    top:70px;
    font:bold 12px ‘Open Sans Condensed’, sans-serif;
    /* This is important for the show/hide CSS animation */
    max-height:0px;
    overflow:hidden;
    -webkit-transition:max-height 0.4s linear;
    -moz-transition:max-height 0.4s linear;
    transition:max-height 0.4s linear;
}

И это будет анимироваться:

#colorNav li:hover ul{
    max-height:200px;
}

Значение 200px является произвольным и его придется увеличить, если ваш выпадающий список содержит много значений.

На следующем шаге определим стили для выпадающих пунктов:

#colorNav li ul li{
    background-color:#313131;
}
#colorNav li ul li a{
    padding:12px;
    color:#fff !important;
    text-decoration:none !important;
    display:block;
}
#colorNav li ul li:nth-child(odd){ /* zebra stripes */
    background-color:#363636;
}
#colorNav li ul li:hover{
    background-color:#444;
}
#colorNav li ul li:first-child{
    border-radius:3px 3px 0 0;
    margin-top:25px;
    position:relative;
}
#colorNav li ul li:first-child:before{ /* the pointer tip */
    content:»;
    position:absolute;
    width:1px;
    height:1px;
    border:5px solid transparent;
    border-bottom-color:#313131;
    left:50%;
    top:-10px;
    margin-left:-5px;
}
#colorNav li ul li:last-child{
    border-bottom-left-radius:3px;
    border-bottom-right-radius:3px;
}

И, конечно, поэкспериментируем немного с цветами! Вот 5 версий:

#colorNav li.green{
    /* Это цвет пункта меню */
    background-color:#00c08b;
    /* Это цвет иконки */
    color:#127a5d;
}
#colorNav li.red{        background-color:#ea5080;color:#aa2a52;}
#colorNav li.blue{        background-color:#53bfe2;color:#2884a2;}
#colorNav li.yellow{    background-color:#f8c54d;color:#ab8426;}
#colorNav li.purple{    background-color:#df6dc2;color:#9f3c85;}

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

Готово!

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

Демонстрация

Скачать исходные файлы

Перевод статьи с tutorialzine.com


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Создаем интерактивное меню на чистом css3 | Кабинет Веб-мастера

Всем привет! Сегодня мы научимся делать замечательное интерактивное меню на чистом css! Отличная идея для оформления персонального сайта. Итак, приступим.

Для начала создадим разметку меню на html:

<ul>
    <li><a href="">Обо мне</a><img src="1.jpg"/></li>
    <li><a href="">Мои работы</a><img src="2.jpg"/></li>
    <li><a href="">Инструментарий</a><img src="3.jpg"/></li>
    <li><a href="">Контакты</a><img src="4.jpg"/></li>
</ul>

Тут все просто — обычный список пунктов меню. Да, нам понадобятся 4 картинки. У меня они лежат в корне. Размер у них одинаковый — 375 пикселей по ширине и 400 по высоте. При других значениях придется подбирать цифры в css файле, но об этом позже.

Теперь самое главное — стили css посмотрим на них целиком:

.menu{
	width: 760px;
	margin:0 auto;
	padding:0;
	position: relative;
	list-style:none;
}
.menu li:nth-child(1):hover a{
	background-color: rgba(174,54,55,0.9);
}
.menu li:nth-child(2):hover a{
	background-color: rgba(195, 210, 67, 0.9)
}
.menu li:nth-child(3):hover a{
	background-color: rgba(211, 132, 57, 0.9);
}
.menu li:nth-child(4):hover a{
	background-color: rgba(142, 116, 99, 0.9);
}
.menu li a{
	font-size: 28px;
	display: block;
	width: 365px;
	padding: 0px 10px;
	text-align: right;
	position: relative;
	z-index: 10;
	background: #fff;
	height: 100px;
	border-right: 1px solid #ddd;
	text-decoration:none;
	color:#000;
	background-color: rgba(255,255,255, 0.8);
	-webkit-transition: color 0.2s linear;
	-moz-transition: color 0.2s linear;
	-o-transition: color 0.2s linear;
	-ms-transition: color 0.2s linear;
	transition: color 0.2s linear;
}
.menu li:hover a{
	color: #fff;
}
.menu li img{
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 0px;
	opacity: 0;
	-webkit-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	-moz-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	-o-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	-ms-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.menu li:hover img{
	left: 385px;
	opacity: 1;
}

Что тут может быть интересного? Давайте разберем:

.menu li:nth-child(1):hover a{
	background-color: rgba(174,54,55,0.9);
}
.menu li:nth-child(2):hover a{
	background-color: rgba(195, 210, 67, 0.9)
}
.menu li:nth-child(3):hover a{
	background-color: rgba(211, 132, 57, 0.9);
}
.menu li:nth-child(4):hover a{
	background-color: rgba(142, 116, 99, 0.9);
}

Этим кодом мы задаем фоновый цвет при наведении на пункты меню. nth-child(2n) — это указание, что код следует применить к каждым пунктам меню, порядковый номер которых делится на 2 (2, 4, 6 и так далее). Соответственно nth-child(3n) — пунктам, которые делятся на 3 — третий, шестой и так далее. Цвет задается в формате RGBA — цвет rgb — красный, зеленый, синий и прозрачность. Прозрачность задается коэффициентом. 0.9 — это 10% прозрачности и 90% цвета.

.menu li a{
	font-size: 28px;
	display: block;
	width: 365px;
	padding: 0px 10px;
	text-align: right;
	position: relative;
	z-index: 10;
	background: #fff;
	height: 100px;
	border-right: 1px solid #ddd;
	text-decoration:none;
	color:#000;
	background-color: rgba(255,255,255, 0.8);
	-webkit-transition: color 0.2s linear;
	-moz-transition: color 0.2s linear;
	-o-transition: color 0.2s linear;
	-ms-transition: color 0.2s linear;
	transition: color 0.2s linear;
}
.menu li:hover a{
	color: #fff;
}

Здесь написано следующее: сначала цвет ссылки черный — color:#000; При наведении (.menu li:hover a) — цвет текста становится белым — color: #fff; Далее: transition: color 0.2s linear; — это анимация. Создает эффект плавного перехода цвета от черного к белому и обратно. Свойство написано с префиксами для всех браузеров, так как не все браузеры понимают это новое свойство css3 без префикса. z-index:10; задан для того, чтобы пункт меню находился сверху картинки.

.menu li img{
	position: absolute;
	z-index: 1;
	left: 0px;
	top: 0px;
	opacity: 0;
	-webkit-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	-moz-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	-o-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	-ms-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
	transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
.menu li:hover img{
	left: 385px;
	opacity: 1;
}

Эти свойства указывают, что картинка располагается относительно пункта меню — прямо под ним (потому что ранее мы задали z-index) и она (картинка) прозрачна — opacity:0;. То есть ее не видно. При наведении на ссылку — .menu li:hover img — картинка отъезжает влево — left:375px; и становится видимой — opacity:1; чтобы добиться плавности этого эффекта, добавлена анимация — transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out; Вот собственно и все. Надеюсь, объяснил понятно.

Данное меню написано полностью на html+css3 и не содержит javascript. Работает в Google Chrome, Opera, Mozilla FireFox и Internet Explorer 10. Internet Explorer 9 не поддерживает анимацию, но тем не менее, меню в нем все равно смотрится прилично.

css раскрывающееся вертикальное меню — ComputerMaker.info

Автор admin На чтение 5 мин.

Вертикальное плавно раскрывающееся меню аккордеон для сайта с подпунктами основного раздела на HTML5 + CSS3 + JS

Вертикальное раскрывающееся меню HTML + CSS + JS

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

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

Все подпункты меню свернуты Все подпункты меню развернуты Второй подпункт меню развернут. Нумерация идентификаторов начинается с 0 Два подпункта меню развернуты

Если вы попали на этот сайт случайно или искали другое выпадающее меню, советую перейти по ссылке, там собранно множество разных меню для сайта.

Вертикальных менюшек для сайтов довольно много, в этом уроке я покажу вам только вертикальное выпадающее меню на CSS при наведении с выпадашкой вправо и влево, а также многоуровневые выпадающие меню. Другие варианты вертикальных меню для сайта будут описаны в следующих уроках. И так преступим.

Навигация по странице:

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

У всех браузеров, которые запущенные с ПК или ноутбука, в CSS доступно свойство :hover (тут я малость неправ, это псевдокласс ) на базе которого можно построить практически любое вертикальное выпадающее меню.

А что же делать с мобильными браузерами? — или на планшетах спросите вы.

К счастью, разработчики мобильных браузеров предусмотрели (к сожалению не везде) возможность срабатывания псевдокласса :hover при первом нажатии на ссылку, если оно описано в CSS. Благодаря этим стараниям, большинство пользователей сможет увидеть ваше вертикальное выпадающее меню CSS.

Пара слов о преимуществе выпадающих меню:

  • можно вместить очень длинные меню в ограниченное пространство;
  • дизайн становится более изящным;
  • частично улучшаются поведенческие факторы.

Вертикальное выпадающее меню вправо

к менюПредставляю вашему вниманию первый пример: простое вертикальное выпадающее меню вправо при наведении.

Написание менюшки мы начнем с html кода и сделаем его универсальным на списках, вариант ответа идентичный тому, что возвращает wordpress.

Html для вертикального меню

Думаю в плане понимания html у вас не возникнет никаких сложностей, типичные списки с тегами ul и li. Смотрим код:

Меню для сайта на списках: у некоторых пунктов есть выпадающие блоки, у некоторых нет. Все предельно просто, думаю никаких пояснений не нужно.

Вертикальное выпадающее меню CSS

к менюСо стилями CSS вопрос немного по сложнее. Я вам покажу код только самого меню, а остальные стили вы сможете посмотреть когда скачаете пример.

Вот эта строчка CSS

Посмотреть что у нас получилось в этом примере можно на скине:

Как работает вертикальное выпадающее меню css вы можете увидеть в режиме демо ниже, или скачав пример:

Вот такой не сложный пример выпадающего меню у меня получился.

Это еще не конец, идем дальше.

Предположим, что вам нужно сделать выпадающее меню при наведении с выпадашкой влево. На основе примера выпадашки вправо мы сейчас ее и реализуем.

Вертикальное выпадающее меню влево на CSS

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

Стили CSS будут немножко отличаться, хотя не кардинально. В моем простом примере достаточно исправить одно значение. В комментариях, я помечу его.

Для более сложных меню, вам потребуется сделать немножко больше правок. Смотрим стили:

Вот и все. У нас получилось вот такое меню. Слева кликабельный скин, справа демо и ссылка на скачивание примера:

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

, который в свою очередь занимает всю ширину его блока-контейнера.

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

1. Вертикальное меню с заголовком

Простой элегантный вариант оформления. Подходит для стилизации категорий на сайте. При наведении элемент списка меняет цвет ссылки.

2. Вертикальное меню в стиле «схема метро»

Интересное решение для оформления вертикального меню, предусмотрено добавление вложенных меню. «Ветка метро» — левая граница списка, маркеры генерируются перед каждой ссылкой.

3. Вертикальное меню с эффектами при наведении

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

4. Вертикальное меню с иконками

Иконки в меню создают визуальный якорь, дополняя словесное описание каждой категории. Для отображения иконок нужно подключить шрифт Awesome. Вы также можете использовать любой другой иконочный шрифт или иконки-картинки.

5. Вертикальное меню с картинками

Данный пример можно использовать для оформления блоков с новинками, похожими товарами, и т.п. сайте интернет-магазина.

Вертикальное меню на CSS3 | XoZblog

#nav {
  border:3px solid #3e4547;
  box-shadow:2px 2px 8px #000000;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
}

#nav, #nav ul {
  list-style:none;
  padding:0;
  width:200px;
}

#nav ul {
  position:relative;
  z-index:-1;
}

#nav li {
  position:relative;
  z-index:100;
}

#nav ul li {
  margin-top:-23px;
  -moz-transition:  0.4s linear 0.4s;
  -ms-transition: 0.4s linear 0.4s;
  -o-transition: 0.4s linear 0.4s;
  -webkit-transition: 0.4s linear 0.4s;
  transition: 0.4s linear 0.4s;
}

#nav li a {
  background-color:#d4d5d8;
  color:#000;
  display:block;
  font-size:12px;
  font-weight:bold;
  line-height:28px;
  outline:0;
  padding-left:15px;
  text-decoration:none;
}

#nav li a.sub {
  background:#d4d5d8 url(«../images/down.gif») no-repeat;
}

#nav li a + img {
  cursor:pointer;
  display:none;
  height:28px;
  left:0;
  position:absolute;
  top:0;
  width:200px;
}

#nav li a img {
  border-width:0px;
  height:24px;
  line-height:28px;
  margin-right:8px;
  vertical-align:middle;
  width:24px;
}

#nav li a:hover {
  background-color:#bcbdc1;
}

#nav ul li a {
  background-color:#eee;
  border-bottom:1px solid #ccc;
  color:#000;
  font-size:11px;
  line-height:22px;
}

#nav ul li a:hover {
  background-color:#ddd;
  color:#444;
}

#nav ul li a img {
  background: url(«../images/bulb.png») no-repeat;
  border-width:0px;
  height:16px;
  line-height:22px;
  margin-right:5px;
  vertical-align:middle;
  width:16px;
}

#nav ul li:nth-child(odd) a img {
  background:url(«../images/bulb2.png») no-repeat;
}

#nav a.sub:focus {
  background:#bcbdc1;
  outline:0;
}

#nav a:focus ~ ul li {
  margin-top:0;
  -moz-transition:  0.4s linear;
  -ms-transition: 0.4s linear;
  -o-transition: 0.4s linears;
  -webkit-transition: 0.4s linears;
  transition: 0.4s linear;
}

#nav a:focus + img, #nav a:active + img {
  display:block;
}

#nav a.sub:active {
  background:#bcbdc1;
  outline:0;
}

#nav a:active ~ ul li {
  margin-top:0;
}

#nav ul:hover {
  display:block;
}

CSS3 Menu — Загрузки и лицензии

Загрузки и лицензии
Часто задаваемые вопросы

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

Лицензии CSS3 Menu включают 1 год бесплатной поддержки и обновлений. Если вы выберете опцию «автоматическое продление», период бесплатной поддержки и обновлений будет автоматически продлен по сниженной ставке через год.Не устанавливайте флажок «Автоматическое продление», если оно вам не нужно или вы планируете продлевать его вручную.

Нет, ваши меню и приложение CSS3 Menu останутся полностью функциональными, но вы пропустите будущие обновления продуктов и поддержку клиентов.

Возможно только с купленной версией. Пожалуйста, свяжитесь с нами для получения скидки для некоммерческих организаций.

Попробуйте сделать следующее:

Панель управления -> Система -> Расширенные настройки системы -> Настройки (Производительность) -> Предотвращение выполнения данных.

Отключите DEP или добавьте CSS3Menu в список исключений.

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

Нет, один лицензионный ключ CSS3 Menu можно активировать максимум на 2 компьютерах. Таким образом, вы можете использовать один и тот же лицензионный ключ на своем ноутбуке Mac и на рабочем столе Windows.

Вероятно, ваш антивирус / брандмауэр / прокси не разрешает подключение к Интернету для меню CSS3 или вы превысили максимальное количество активаций клавиш. Пожалуйста, свяжитесь с нами для получения дальнейших инструкций.

С лицензией на один сайт вы можете устанавливать меню, созданные с помощью CSS3 Menu, на неограниченное количество страниц в пределах зарегистрированного доменного имени. Например, с ключом для yourdomain.com вы можете использовать меню на следующих страницах:
http: // www.yourdomain.com/home.html
https://www.yourdomain.com/home.html
http://cgi.yourdomain.com/more/file.html
http://yourdomain.com/directory/back.html
пр.
В других случаях вам следует приобрести лицензию на неограниченное количество веб-сайтов. С Безлимитной лицензией вы можете устанавливать меню, созданные с помощью CSS3 Menu, на неограниченном количестве сайтов ваших / клиентов.

Свяжитесь с нами

CSS3 Меню
Для устранения неполадок, запросов функций и общей помощи, обратитесь в службу поддержки клиентов по адресу.Убедись в включить информацию о вашем браузере, операционной системе, Версия меню CSS3, ссылка на вашу страницу.
В большинстве случаев вы получите ответ в течение 1 рабочего дня. Пожалуйста, прочтите сначала ответы на часто задаваемые вопросы, чтобы узнать, был ли уже дан ответ на ваш вопрос.
Электронная почта:

Мега выпадающее меню CSS

Примеры мегаменю CSS

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

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

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

Однако с появлением впечатляющих интерфейсов Web 2.0, разработанных транснациональными компаниями, пользователи Интернета перестали любезно относиться к неполному опыту работы с первой страницей, и веб-мастера вынуждены пересмотреть свой способ решения проблемы, чтобы не потерять посетителей.

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

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

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

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

Сейчас лучшее время для веб-мастеров применить эту эффективную функцию на своих сайтах.Хотя каждое мегаменю CSS3 имеет некоторое сходство с реальной страницей веб-сайта, только немного меньше, требуется практика, чтобы все сделать правильно. Хотя использование кода CSS вручную может дать хорошие результаты, иногда лучше использовать различные типы шаблонов мегаменю CSS, которые можно найти в Интернете, или обратиться за помощью к профессиональному программному обеспечению для разработки веб-сайтов. В некоторых случаях достаточно просто использовать приложение для создания веб-меню, такое как CSS3 Menu.

См. Также:
CSS3 Закругленные углы, CSS3 Тень, CSS3 анимация, CSS3 Text Shadow, CSS3 градиент, CSS3 переход

Скачать бесплатно CSS Mega Menu Maker

Панель меню HTML

  • 25 июня 2014 г. Ошибка публикации меню в раскрывающемся меню html

    Я пытаюсь импортировать код на страницу HTML.Я следую инструкциям по публикации, после нажатия кнопки «Вставить и опубликовать» возникает ошибка публикации меню. Что я делаю неправильно?

  • 17 июня 2014 г. Лицензия на Html-меню

    Я заинтересован в покупке безлимитной версии css3menu. Интересно, 79 долларов — это единовременная или ежегодная плата?

  • 11 июня 2014 г. Меню html не запускается

    Я запускаю, затем настраиваю, после установки. он не открывался. так что я никогда не пробовал.

  • 4 июня 2014 г. Выпадающее меню html перестало работать

    Здравствуйте! Я установил пробную версию, чтобы позже приобрести лицензию.Проблема в том, что после установки не могу открыть программу. Сообщение о том, что «CSS3 перестал работать». У меня Windows 8.

  • 16 апреля 2014 г. Установить код меню html на сайты клиентов

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

  • 9 апреля 2014 г. Вертикальное меню HTML через год

    Привет, Я закажу меню.Выглядит неплохо. Интересно, что будет с моими меню, когда ваше меню закончится? Спасибо

  • 19 марта 2014 г. Пример адаптивного html-меню

    Привет! У меня есть версия вашего CSS-меню 2.3. В какой версии есть функция адаптивного меню, но я не могу найти ее в своей версии?

  • 26 февраля 2014 г. Выпадающее меню Html не работает в IE

    Hi. Недавно я получил бесплатную версию меню css3 для подтверждения продукта, и у меня возникла проблема, когда при публикации меню в моем браузере отображается только меню в виде букв, а не кнопок.

  • 13 февраля 2014 г. Срок действия лицензии на древовидное меню Html

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

  • 13 февраля 2014 г. Активный элемент в горизонтальном меню html

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

  • 19 декабря 2013 г. Сколько браузеров поддерживает примеры меню html

    Привет я хочу знать — сколько браузеров поддерживает это меню?

  • 29 ноября 2013 г. Код выпадающего меню html для автоматического продления

    Я видел на сайте возможность автоматического продления. Эти продукты доступны только на ограниченное время? Или это постоянные приложения?

  • 26 октября 2013 г. Установите горизонтальное меню html на две машины

    Привет, я недавно купил ваше приложение.(Неограниченная лицензия на сайты), и я очень доволен. У меня вопрос. У меня Mac, и я хочу установить приложение. в это тоже. Моя лицензия позволяет это?

  • 24 октября 2013 г. Загрузить html меню горизонтальных папок на сервере

    Привет, поддержка! Пожалуйста, ответьте на вопрос, нужно ли мне также вставить «style.css», и если да, то куда и как?

  • 24 октября 2013 г. Использовать генератор меню html как гаджет

    Привет! Я недавно создал свое css3menu и хочу загрузить его как гаджет в свой блог, но мне кажется, что чего-то не хватает…Спасибо за вашу помощь.

  • CSS-меню из CodeCanyon

    Фильтр (1) & Уточнить

    Цена в долларах США без учета налогов

    Сортировать по: Бестселлеры Новейшие Лучшая оценка В тренде Цена: по возрастанию Цена: по убыванию

    4 доллара США

    9.9 тыс. Продаж

    Последнее обновление: 29 сен 13

    5 долларов

    3,6 тыс. Продаж

    Последнее обновление: 08 авг.

    6 долларов

    1.9 тыс. Продаж

    Последнее обновление: 06 янв.

    3 доллара США

    1,7 тыс. Продаж

    Последнее обновление: 27 апр 14

    3 доллара США

    1.6 тыс. Продаж

    Последнее изменение: 30 мар 13

    4 доллара США

    1,3 тыс. Продаж

    Последнее обновление: 06 сен 12

    6 долларов

    1000 продаж

    Последнее изменение: 16 июн.

    6 долларов

    935 Продажи

    Последнее изменение: 25 окт 15

    3 доллара США

    903 Продажи

    Последнее обновление: 18 фев 12

    4 доллара США

    701 Продажа

    Последнее изменение: 22 янв 14

    7 долларов

    700 Продажи

    Последнее изменение: 16 мая 20

    4 доллара США

    690 В продаже

    Последнее обновление: 08 июл.

    6 долларов

    675 Продажи

    Последнее обновление: 29 фев 16

    9 долларов США

    673 Продажи

    Последнее обновление: 03 мар 13

    Многоступенчатый индикатор

    • Версия программного обеспечения: CSS 2 — 3
    Типы файлов включены:
    • JavaScript JS
    • HTML
    • CSS
    • Многослойный PSD

    5 долларов

    656 В продаже

    Последнее изменение: 24 17 мая

    3 доллара США

    621 Продажа

    Последнее обновление: 11 июл.

    5 долларов

    614 Продажи

    Последнее изменение: 11 окт 13

    9 долларов США

    544 Продажи

    Последнее изменение: 24 июн 19

    3 доллара США

    505 в продаже

    Последнее изменение: 14 окт 14

    2 доллара

    503 Продажи

    Последнее обновление: 26 авг 18

    5 долларов

    468 Продажи

    Последнее обновление: 19 фев 11

    9 долларов США

    398 Продажи

    Последнее обновление: 10 ноя 10

    5 долларов

    394 Продажи

    Последнее обновление: 13 фев 15

    4 доллара США

    393 Продажи

    Последнее обновление: 11 авг.

    3 доллара США

    387 Продажи

    Последнее изменение: 30 мар 13

    5 долларов

    366 Продажи

    Последнее обновление: 10 апр 14

    4 доллара США

    366 Продажи

    Последнее изменение: 17 июл.

    5 долларов

    364 Продажи

    Последнее изменение: 20 мар 15

    3 доллара США

    355 В продаже

    Последнее изменение: 05 июл.

    4 доллара США

    351 Продажа

    Последнее обновление: 17 авг.10

    5 потрясающих меню навигации HTML5 и CSS3, которые можно использовать бесплатно

    Здравствуйте, разработчики! Прошло довольно много дней с тех пор, как я поделился своим последним постом о ресурсах разработки.Не волнуйтесь, я вернулся с еще несколькими полезными вещами. Как программист, вы можете по-прежнему заниматься вопросами функциональности, а это значит, что у вас будет немного меньше времени на разработку всего пользовательского интерфейса в деталях. Это? Однако первое впечатление от темы начинается с ее верхней панели, что очень важно. Чтобы вдохновиться, давайте посмотрим на несколько классных меню навигации HTML5 и CSS3.

    1. Выпадающее меню Pure .CSS

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

    2. Меню LavaLamp на чистом CSS3

    Эта потрясающая строка меню использует CSS3 (без JavaScript) для создания великолепного внешнего вида. Автор строки меню использовал переходы CSS3 для анимации элементов в заголовке.

    3. Великолепное меню в CSS3

    Это меню CSS3 имеет богатый вид с подробными эффектами и анимацией перехода.Каждый отдельный пункт меню приобретает эффект капли воды, когда вы наводите на него указатель мыши. Выпадающие списки такие гладкие.

    4. Решение для длинных раскрывающихся меню

    Эта строка меню действительно является решением для длинных раскрывающихся меню. Здесь вы просто наведите указатель мыши на раскрывающийся элемент хоста, и он развернется. Перемещение указателя мыши автоматически прокручивает пункты меню.

    5. Адаптивное многоуровневое меню

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

    В Интернете вы найдете множество других меню. Здесь я упомянул 5 наиболее часто используемых строк меню. Вдохновляйтесь этими названиями и создавайте собственные панели навигации. Также не забудьте поделиться своими предложениями с сообществом. Удачного развития!

    Выпадающее меню навигации, доступное только для CSS

    Это выпуск №7 из серии, посвященной современным решениям CSS для проблем, которые я решал в течение последних 14 с лишним лет работы фронтенд-разработчиком .

    Этот метод исследует использование:

    • Анимация с переходом CSS и преобразованием
    • Использование : focus-within псевдокласс
    • CSS-сетка для позиционирования
    • техника динамического центрирования
    • Рекомендации по доступности раскрывающихся меню

    Если вы когда-нибудь вырывались из головы, имея дело с концепцией «намерения парения», то это обновление для вас!

    Прежде чем мы зайдем слишком далеко, хотя наша методика на 100% использует только CSS, необходимо добавить некоторый Javascript для более полного доступа.Также существует полифилл, необходимый для ключевой функции, чтобы эта функция работала — : focus-within — для наиболее надежной поддержки. Но мы все еще значительно улучшились по сравнению с тем временем, когда нам требовались один или несколько подключаемых модулей jQuery для создания визуальных эффектов.

    Обновление специальных возможностей — 18.08.20 : Огромное спасибо Майклу Фэйрчайлду из Deque (и создателю превосходного ресурса a11ysupport.io) за тестирование оригинального решения с использованием различных вспомогательных технологий. Метод только с CSS требует некоторого Javascript для полного соответствия WCAG 2.1. В частности, необходимо использовать javascript, чтобы предлагать способ закрытия меню без использования мыши и табуляции (например, клавиша выхода) для соответствия критерию успеха 1.4.13. Майкл указал на эту демонстрацию WAI-ARIA Authoring Practices, которая предоставляет дополнительную информацию о необходимых функциях Javascript. Это настоятельно рекомендуемые дополнения для вашего окончательного производственного решения.


    Если вы не использовали Sass, вам может потребоваться пять минут, чтобы понять синтаксис вложенности Sass, чтобы легче всего понять приведенные примеры кода.

    Базовая навигация HTML #

    Мы будем улучшать это по мере продолжения, но вот наша стартовая структура:

        

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

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

    1. aria-label на
    2. Использование кнопки как фокусируемого, обнаруживаемого элемента для открытия раскрывающегося списка
    3. aria-controls на .dropdown__title , который ссылается на идентификатор .dropdown__menu , чтобы связать его с меню вспомогательных технологий
    4. aria-extended на кнопке , которую в вашем окончательном решении необходимо переключать через Javascript, как указано в демонстрации, упомянутой в начале этой статьи

    Как заметил Майкл, использование кнопки button также позволяет пользователям Dragon Naturally Speaking сказать что-то вроде «нажмите кнопку», чтобы открыть меню.

    Наш (в основном) начальный вид по умолчанию выглядит следующим образом:

    Начальные стили навигации #

    Сначала мы дадим несколько стилей контейнера для nav и определим его как контейнер сетки. Затем мы удалим стили списка по умолчанию из nav ul и nav ul li .

      nav {
    background-color: #eee;
    набивка: 0 1бэр;
    дисплей: сетка;
    мест размещения: центр;

    ul {
    стиль списка: нет;
    маржа: 0;
    отступ: 0;
    дисплей: сетка;

    li {
    обивка: 0;
    }
    }
    }

    Мы потеряли иерархическое определение, но можем начать возвращать его со следующего:

      nav {

    > ul {
    grid-auto-flow: столбец;

    > li {
    маржа: 0 0.5рем;
    }
    }
    }

    Используя селектор дочернего комбинатора > , мы определили, что верхний уровень ul , который является прямым потомком nav , должен переключить его grid-auto-flow на столбец , который эффективно обновляет его до быть вдоль оси x . Затем мы добавляем маржу к элементам верхнего уровня li для большей четкости. Теперь будущие выпадающие элементы появляются под меню «Сладости» и более четко являются его дочерними элементами:

    Затем мы сначала добавим немного стиля ко всем ссылкам, а также к .dropdown__title , а затем только ссылки верхнего уровня в дополнение к .dropdown__title . Здесь также мы очищаем собственные стили браузера, унаследованные для элементов button .

      
    .dropdown__title {
    background-color: transparent;
    граница: отсутствует;
    семейство шрифтов: наследование;
    }

    nav {
    > ul {
    > li {
    a,
    .dropdown__title {
    text-decoration: none;
    выравнивание текста: по центру;
    дисплей: строчно-блочный;
    цвет: синий;
    размер шрифта: 1.125rem;
    }


    > a,
    .dropdown__title {
    padding: 1rem 0.5rem;
    }
    }
    }
    }

    Базовые стили раскрывающегося списка #

    До сих пор мы полагались на селекторы элементов, но мы добавим селекторы классов для раскрывающегося списка, поскольку их может быть несколько в данном списке навигации.

    Хотели бы вы, чтобы подсказки CSS в вашем почтовом ящике? Присоединяйтесь к моему информационному бюллетеню для получения обновлений статей, советов по CSS и внешних ресурсов!

    Сначала мы модернизируем .dropdown__menu и ссылки на него, чтобы помочь более четко определить его, когда мы работаем с позиционированием и анимацией:

     . Dropdown {
    позиция: относительная;

    .dropdown__menu {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0,15em 0,25em rgba (черный, 0,25);
    отступ: 0.5em 0;
    мин-ширина: 15 каналов;

    a {
    цвет: # 444;
    дисплей: блочный;
    отступ: 0,5 м;
    }
    }
    }

    Одна из очевидных проблем заключается в том, что .dropdown__menu влияет на контейнер nav , что видно по серому фону nav , присутствующему вокруг раскрывающегося списка.

    Мы можем начать исправлять это, добавив position: absolute к .dropdown__menu , что исключает его из обычного потока документов:

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

    Мы собираемся применить трюк с центрированием, чтобы выровнять центральное меню с элементом списка:

     .dropdown__menu {

    позиция: абсолютная;


    верх: расчет (100% - 0,25 бэр);
    осталось: 50%;
    преобразование: translateX (-50%);
    }

    Магия этого метода центрирования заключается в том, что меню может иметь любую ширину или даже динамическую ширину, и оно будет центрироваться соответствующим образом.

    Стили раскрытия раскрывающегося списка #

    Есть два основных триггера, которые мы хотим использовать для открытия меню: : hover и : focus .

    Однако традиционный : focus не сохранит открытое состояние раскрывающегося списка.После того, как исходный триггер теряет фокус, фокус клавиатуры все еще может перемещаться по раскрывающемуся меню, но визуально меню исчезнет.

    : фокус внутри #

    В ближайшее время появится псевдокласс под названием : focus-within , и это именно то, что нам нужно, чтобы сделать это раскрывающимся списком только для CSS. Как уже упоминалось во вступлении, для поддержки IE

    Из MDN я выделил курсивом часть, от которой мы будем извлекать выгоду:

    Псевдокласс CSS : focus-within представляет элемент, получивший фокус или содержащий элемент, получивший фокус .Другими словами, он представляет элемент, который сам соответствует псевдоклассу : focus или имеет потомка, которому соответствует : focus .

    Скрыть раскрывающийся список по умолчанию #

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

    Вашим первым инстинктом может быть display: none , но это не позволяет нам изящно анимировать переход.

    Затем вы можете попробовать просто opacity: 0 , который явно скрывает его, но оставляет за собой «призрачные ссылки», потому что элемент все еще имеет вычисленную высоту.

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

      .dropdown__menu {
    преобразование: rotateX (-90deg) translateX (-50%);
    transform-origin: центр вверху;
    непрозрачность: 0,3;
    }

    Мы добавляем непрозрачность, но не полностью до 0, чтобы позже включить немного более плавный эффект.

    И мы обновляем наше свойство transform , чтобы включить rotateX (-90deg) , который поворачивает меню в трехмерном пространстве на 90 градусов «назад».Это эффективно убирает высоту и создаст интересный переход на откосе. Также вы заметите свойство transform-origin , которое мы добавляем для обновления точки, вокруг которой применяется преобразование, по сравнению с горизонтальным и вертикальным центром по умолчанию.

    Кроме того, для соответствия критерию успеха 1.3.2 ссылки должны быть скрыты от пользователей программ чтения с экрана до тех пор, пока они не отобразятся визуально. Мы обеспечиваем такое поведение, добавляя visibility: hidden (еще раз спасибо Майклу за этот совет!).

    Прежде чем мы сделаем раскрытие, нам нужно добавить свойство transition . Мы добавляем его к основному правилу .dropdown__menu , чтобы оно применялось как при включении, так и при выключении фокуса / наведения, иначе говоря, «вперед» и «назад».

      .dropdown__menu {
    переход: 280 мсек без задержки;
    }

    Раскрытие раскрывающегося списка #

    При всех этих предварительных настройках раскрытие раскрывающегося списка при наведении и фокусировке может быть выполнено так же кратко, как:

     .раскрывающееся меню {

    &: hover,
    &: focus-within {
    .dropdown__menu {
    opacity: 1;
    преобразование: rotateX (0) translateX (-50%);
    видимость: видимая;
    }
    }
    }

    Сначала мы инвертируем visibilty (иначе другие свойства не работали бы), а затем мы инвертировали rotateX , установив значение 0, а затем доводим непрозрачность до до 1 для полная видимость.

    Вот результат:

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

    Еще раз замечание о том, что для полной доступности Javascript должен полностью обрабатывать технические события клавиатуры, которые не всегда запускают : focus . Это означает, что некоторые зрячие пользователи клавиатуры могут обнаружить раскрывающиеся ссылки, но без сгенерированного события : focus они не увидят, что раскрывающееся меню действительно открыто. Просмотрите демонстрацию w3c, чтобы узнать, как завершить включение Javascript в это решение.

    Обработка намерения зависания #

    Если вы какое-то время занимались этим Интернетом, я надеюсь, что следующее заставит вас пойти

    Когда я впервые начал бороться с выпадающими меню, я создавал их в первую очередь для IE7.В большом проекте несколько членов команды спросили что-то вроде: «Можно ли остановить появление меню, если я просто прокручиваю меню или наводю указатель мыши на него?». Решением, которое я наконец нашел после долгого поиска в Google (включая попытки придумать правильную фразу, чтобы получить то, что я искал), был плагин hoverIntent jQuery.

    Мне нужно было это настроить, потому что, поскольку мы используем свойство transition , мы также можем добавить очень небольшую задержку. В общем, это предотвратит запуск анимации раскрывающегося списка при наведении курсора мыши на «проезжающий».

    Порядок имеет значение, когда мы определяем все свойства перехода в одной строке, и второе числовое значение по порядку будет принято как значение задержки:

      .dropdown__menu {
    // ... существующие стили
    переход: 280 мс все 120 мс замедление;
    }

    Посмотреть результаты:

    Для вызова меню требуется довольно неторопливый навигатор, который мы можем условно предположить как намерение открыть меню. Задержка все еще достаточно короткая, чтобы ее нельзя было сознательно заметить до открытия меню, так что это победа!

    Вы все равно можете использовать Javascript для улучшения этого, особенно если он собирается запустить «мегаменю», которое будет более разрушительным, но это все еще довольно приятно.

    Намерение наведения — это одно, но на самом деле нам нужен дополнительный сигнал для пользователя о том, что в этом меню есть дополнительные параметры. Чрезвычайно распространенным условием является «каретка» или «стрелка вниз», имитирующая индикатор собственного элемента select.

    Чтобы добавить это, мы обновим стили .dropdown__title . Мы определим его как контейнер inline-flex , а затем создадим элемент : after , который использует трюк с границей для создания стрелки вниз. Мы используем тире translateY () , чтобы оптически выровнять его с нашим текстом:

     .раскрывающийся список {

    .dropdown__title {
    display: inline-flex;
    align-items: center;

    &: после {
    content: "";
    бордюр: 0,35 брем твердый прозрачный;
    border-top-color: rgba (синий, 0,45);
    левое поле: 0,25em;
    преобразование: translateY (0,15em);
    }
    }
    }

    Вот еще одно место, где в конечном итоге вам, возможно, придется улучшить с помощью Javascript.

    Чтобы он оставался только для CSS и был приемлемым для веб-сайтов, не относящихся к приложениям, вам необходимо применить tabindex = "- 1" к телу, эффективно разрешая любые щелчки за пределами меню для удаления фокуса с него и позволяя закрыть его. .

    Это немного натянуто - и это может немного расстраивать пользователей - поэтому вы можете улучшить это, чтобы скрыть при прокрутке с помощью Javascript, особенно если вы определяете nav для использования позиции : липкий и прокрутите вместе с пользователем.

    Окончательный результат #

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

    Стефани Эклс (@ 5t3ph)

    100 возрастающих меню CSS - WebGenio

    Un sitio web sin un buen sistema de navegación no puede considerarse, normalmente, como un sitio complete.En este sentido, no hay nada mejor que echar mano de los clásicos menús de toda la vida. Lo bueno es que hoy día no necesitas recurrir a complejos sistemas para consguir menús vistosos, sino que unos simples trucos con CSS te allowen create menús muy buenos visualmente y, además, repletos de efectos como slides, verticales, Horizontales iconos, con colores пр.

    Aquí vamos a recopilar un buen número de tutoriales que te enseñan a Crear o, directamente, apply en cualquier sitio web unos increíbles menús.También verás que muchos están adapados para que sean resposive y puedan стих, правильный en Diferentes tamaños de pantalla, ya sean de ordenador, планшеты или смартфоны.

    Меню CSS Navegación

    Версия руководства

    Меню CSS анидадо

    Версия

    Адаптивное меню с CSS

    Версия

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

    Версия

    Меню CSS Colgante

    Версия

    Меню CSS con efecto vertical

    Версия

    Меню CSS con efectos con rombos

    Версия

    Меню CSS в соответствии с эластичностью

    Версия

    Menú CSS a pantalla complete con barras de colores

    Версия

    Menú CSS con barra lateral

    Версия

    Меню CSS hamburguesa

    Версия

    Menú CSS a pantalla complete

    Версия

    Меню CSS типо hamburguesa para teléfonos móviles

    Версия

    Menú CSS desplegable simple

    Версия

    Меню CSS на слайде

    Версия

    Menú CSS con estilo flat

    Версия

    Меню CSS с анимацией

    Версия

    Menú CSS que aparece desde fuera de la página

    Версия

    Меню CSS inclinado

    Версия

    Меню CSS с указанием циркуляра

    Версия

    Меню CSS con efectos

    Версия

    Меню CSS расширяемое

    Версия

    Меню CSS, циркуляр на английском языке

    Версия

    Меню CSS с анимацией для мобильных телефонов

    Версия

    Меню CSS, простое раскрывающееся меню

    Версия

    Меню CSS Blanco y Negro

    Версия

    Menú CSS deslizantes desde una esquina

    Версия

    Menú CSS con efectos a pantalla complete

    Версия

    Меню CSS для мобильных телефонов

    Версия

    Menú CSS simple para móviles

    Версия

    Меню CSS, простое раскрывающееся меню

    Версия

    Меню CSS с треугольной формой

    Версия

    Menú css круговой

    Версия

    меню CSS с эмодзи

    Версия

    Меню CSS con efecto rotatorio

    Версия

    Меню CSS с эффектами анимации

    Версия

    Menú CSS que se Expde verticalmente

    Версия

    Menús CSS a pantalla complete

    Версия

    Меню CSS радиальный

    Версия

    Меню CSS acordeón

    Версия

    Меню CSS боковой

    Версия

    Menú CSS con estilo bocadillo

    Версия

    Меню CSS Que aparece desde el lateral

    Версия

    Меню CSS радиальный

    Версия

    Меню CSS для мобильных устройств

    Версия

    Меню CSS бурбужа

    Версия

    Меню CSS для cabecera

    Версия

    Меню CSS con efecto niebla / blur

    Версия

    Меню CSS с прокруткой и подменю для всех меню

    Версия

    Menú CSS lateral que aparece desde una esquina

    Версия

    Меню CSS с вертикальным наведением

    Версия

    Меню CSS с иконками

    Версия

    Меню CSS для веб-страниц на одну страницу

    Версия

    Menú semi transparent con efecto утеплитель

    Версия

    Меню CSS con efecto elástico

    Версия

    Меню CSS стиль Uber

    Версия

    Меню с текстом, чтобы разделить

    Версия

    Menú con elementos que aparecen desde arriba

    Версия

    Esta selección de menús css está compuesta por increíbles deños actuales y también otros que podrían category como "retro".En cualquier caso, сын funcionales e ideales для реализации и cualquier web или proyecto.

    Gracias a unos sencillos trucos CSS puedes include en tus disños web de forma sencilla, son gratis de usar y están adapados для того, чтобы отвечать на различные варианты и решения для pantalla, tanto para navegadores de escritorio como para telóviles oonos tablet m.

    Truco Avanzado CSS


    Учебное пособие по версии

    Menú desplegable con CSS


    Учебное пособие по версии

    Navegación вертикальный с CSS3


    Учебное пособие по версии

    Меню jQuery Vertical


    Версия

    Меню CSS Отзывчивый Multinivel


    Учебное пособие по версии

    Меню CSS3 с анимацией


    Версия

    меню CSS3 Animados


    Версия

    Меню HTML5 / CSS3


    Версия

    Меню отчаяния в стиле NVIDIA


    Учебное пособие по версии

    Menú desplegable al estilo Vimeo


    Учебное пособие по версии

    Меню с текстом анимации и значки меню


    Версия

    Меню CSS3 con tabs

    Меню CSS en tres niveles


    Учебное пособие по версии

    Меню адаптивного CSS


    Учебное пособие по версии

    Меню jQuery с CSS3


    Версия

    Меню с графическим отображением


    Версия

    Menú CSS multinivel con efecto metal


    Версия

    Минималистичное меню CSS


    Учебное пособие по версии

    Адаптивное меню с иконками для элементов питания


    Учебное пособие по версии

    Меню CSS3 Minimalista


    Версия

    PageSlide Menú

    Меню CSS с цветной печатью


    Версия

    Меню CSS анимации с цветом


    Учебное пособие по версии

    Menú CSS3 sexy


    Версия

    Меню CSS3 анимированные и элегантные


    Учебное пособие по версии

    Меню CSS Sprite


    Версия

    Меню с панелью слайд


    Версия

    Меню по горизонтали с CSS


    Учебное пособие по версии

    Menú Desplegable Plano


    Учебное пособие по версии

    Меню стиля Digg clásico


    Версия

    Меню CSS3 со слайдом


    Версия

    Cómo Crear un Menú Desplegable CSS


    Учебное пособие по версии

    Меню для мобильных


    Версия

    Menú desplegable con efecto al estilo Youtube


    Учебное пособие по версии

    Menú dinámico concontenido que se reemplaza


    Версия

    Адаптивный CSS3 меню


    Версия

    Меню CSS из стиля Facebook


    Версия

    Menú desplegable CSS con efectos de música y sonido


    Учебное пособие по версии

    Меню вертикальное CSS многоцветное


    Учебное пособие по версии

    Меню портала Dock de Mac


    Версия

    Меню CSS3, подаваемое


    Учебное пособие по версии

    Menú desplegable simple


    Версия

    Menú desplegable por click con CSS3


    Учебное пособие по версии

    Menú con submenú dinámico y colores pastel

    Cómo создать меню Desplegable Colorido с CSS3


    Учебное пособие по версии

    Menú CSS3 obscuro elegante


    Версия

    Menú desplegable CSS sencillo


    Учебное пособие по версии

    Menú con elementos desplegables


    Версия

    Menú para Redes Sociales


    Версия

    Меню desplegable CSS3 с прокруткой


    Учебное пособие по версии

    Простое меню jQuery


    Версия

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


    Учебное пособие по версии

    Меню вертикальное CSS простое


    Версия

    Меню с описанием


    Версия

    Меню с анимацией CSS jQuery


    Версия

    Menú CSS con pestañas


    Учебное пособие по версии

    Меню с боковой направляющей горизонтальной


    Версия

    Меню CSS с пиктограммами


    Версия

    Меню CSS3 con tabs


    Версия

    Creando в меню CSS3


    Учебное пособие по версии

    Меню CSS по вертикали


    Версия

    Меню с слайдом


    Учебное пособие по версии

    Menú de navegación, отзывчивый


    Версия

    Мменю


    Учебное пособие по версии

    Меню стиля Google Nexus


    Учебное пособие по версии

    Адаптивное меню с раскрывающимся списком с CSS и jQuery


    Версия

    Вертикальное простое меню с jQuery


    Учебное пособие по версии

    Меню с вращением и эффектом гранж


    Версия

    Меню CSS в форме круглого


    Учебное пособие по версии

    Меню с формулами интеграции

    Меню CSS Retro


    Учебное пособие по версии

    Меню с нижним слайдом


    Версия

    Menú con Slide Horizontal


    Версия

    Меню полутонов


    Версия

    Адаптивное меню с поддержкой Retina-Ready


    Версия

    Меню CSS3 для мобильных телефонов


    Версия

    Menú CSS вертикальный con efecto hover


    Версия

    Меню CSS в стиле Apple


    Версия

    Многофункциональное адаптивное меню


    Версия

    CSS3 Цветное меню


    Версия

    Меню CSS персонализированное


    Версия

    Меню с баннерами


    Версия

    Горизонтальное раскрывающееся меню


    Версия

    Меню CSS с анимацией


    Версия

    .

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *