Вертикальное навигационное меню Ормана Кларка версия от CSS3.

Содержание материала:

Вертикальное металлическое меню на CSS3

Сегодня рассмотрим создание, довольно интересного и простенького меню на CSS3 со значками в металлическом стиле, с возможностью создания подменю.
Приступим:

Начнем с HTML файла. Вот полный код HTML нашего меню. Меню содержит только 1 уровень подменю, надеюсь, этого достаточно. Меню, основано на элементах списка.

Теперь стили CSS меню. В исходниках есть два файла CSS: layout.css и menu.css. Первый файл (layout.css) содержит стили нашей тестовой страницы. Я не будем публиковать эти стили в статье, а рассмотрим мы menu.css.

#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 ;
>

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 ;
>

ul li <
margin-top : 0 ;
>

#nav ul : hover <
display : block ;
>

Надеюсь это меню Вам пригодится! Не забывайте оставлять комментарии. Спасибо!

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

ez code

Просто о сложном.

Навигационное меню с помощью CSS3

Здравствуйте, уважаемые читатели Easy-Code.ru. В этом уроке мы сделаем яркое меню с анимированными выпадающими подпунктами, используя только CSS3 и Font Awesome шрифт иконок. Данный шрифт отображает иконки вместо букв, таким образом мы получим красивые векторные изображения для нашего меню.

Html разметка будущего меню:

Каждый пункт меню это элемент списка

Как видно в нашей html разметке мы имеем вложенные неупорядоченные списки (ul), поэтому мы должны внимательно писать наш CSS код. Чтобы наши списки стилизовались правильно существует специальный CSS селектор для потомков «>»:

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

Задаем параметр display inline-block для отображения элементов меню в одну строку, и задаем position:relative для правильного отображения выпадающего списка. Элементы anchor () будут содержать иконки.

Перейдем к выпадающим спискам, определим CSS свойство transitition. Изначально установи максимальную высоту равную 0, чтобы спрятать список, а при наведении анимируем высоту, увеличивая её, таким образом список плавно появится.

И запуск анимации:

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

Теперь стилизуем элементы выпадающего списка:

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

Еще один приятный момент использования шрифта иконок: мы можем менять цвет всего лишь задав нужный стиль. Таким образом мы можем производить все настройки используя только CSS.

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

Подборка самых популярных WordPress плагинов для любого сайта.

Здесь вы сможете скачать различные jQuery скрипты для любых проектов.

Бесплатно скачать CSS3 наработки с различными эффектами анимации.

Можно скачать файлы HTML5 с современными возможностями разработки.

Множество различных free PSD объектов для WEB-дизайна.

Колекция различных элементов form jQuery для вашего сайта.

Бесплатно скачать иконки для сайта в форматах PSD, PNG и так далее.

Коллекция всегда обновляющихся модальных окон на jQuery.

Разные примеры jQuery validate собраны в одном месте сайта.

Симпатичные варианты реализации ваших jQuery gallery.

Большой сборник широкоформатных и адаптивных jQuery slider`ов.

Ишите примеры реализации jQuery scroll? Это то, что вам нужно.

Красивые и динамичные всплывающие подсказки на jQuery и CSS3.

Интересные материалы на тему веб разработок, главные новости.

Подобрка плагинов Javascript, библиотек, фреймворков и т.д.

Коллекция потрясающих примеров анимации для вашего сайта.

Топ-пост этого месяца: Урок 9. Drupal. Представления. Часть 2

Модернизация элементов форм, создание систем автозаполнения

Плагины для выбора и настройки даты и времени в формах

Предзагрузчики, анимация загрузки, перлоадеры и т.д.

Компоненты, содержащие в себе реализацию параллакс-эффекта.

Создание вкладок, оформление списков в удобную навигацию.

Все, что касается таблиц с данными: фильтр, сортировка и т.д.

Наработки SVG-графики и наложение на нее анимации. Просто красиво.

Отрисовка элементов на веб-странице с помощью html5 canvas.

Примеры элементов, которые реагируют при наведении на них.

Плагины для фото и видео галерей, способные приблежать контент.

Кнопки. Создание красивы и незабываемых кнопок для сайта.

Все, что касается сортировки данных на странице. Плагины html5.

Выборка данных. Множество примеров jQuery select.

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

Дерево элементов. Построение множественных списков на странице.

Примеры объектов в трехмерном пространстве с помощью CSS3 и jQuery.

Vertical Responsive Menu — вертикальное адаптивное меню

Скачать

Источник

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

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

SEO-продвижение

Автоматическое продвижение сайта в TOP.

Если Вы нашли ошибку в тексте, пожалуйста, выделите область и нажмите Ctrl + Enter.

Последняя версия jQuery:

Небольшое руководство по тому, как скачать самую актуальную версию библиотеки jQuery, а также рекомендации по подключению скрипта.

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

Это голубое вертикальное меню CSS3 с градиентами и тенями. Современное вертикальное CSS меню неплохо смотрится и в IE. Не хватает только градиентов.

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

Код CSS

Вставить код нужно в свою Таблицу стилей (CSS) на сайте.

200?’200px’:»+(this.scrollHeight+5)+’px’);»> .side-nav <
width: 180px;
margin: 50px auto;
padding: 10px;
background: #c5d5e6;
border-radius: 5px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.5);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.5);
>

.side-nav-button, .side-nav:active .active <
position: relative;
display: block;
height: 36px;
line-height: 36px;
margin-bottom: 10px;
padding: 0 14px;
color: #597490;
font-size: 13px;
font-weight: bold;
text-shadow: 0 1px rgba(255, 255, 255, 0.8);
text-decoration: none;
background-clip: padding-box;
border: 1px solid;
border-color: #b2bcc8 #acb6c0 #97abba;
border-radius: 3px;
background-color: #d8e6f4;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1f6ff), color-stop(70%, #d3dde7), color-stop(100%, #bfcddc));
background-image: -webkit-linear-gradient(top, #f1f6ff 0%, #d3dde7 70%, #bfcddc 100%);
background-image: -moz-linear-gradient(top, #f1f6ff 0%, #d3dde7 70%, #bfcddc 100%);
background-image: -ms-linear-gradient(top, #f1f6ff 0%, #d3dde7 70%, #bfcddc 100%);
background-image: -o-linear-gradient(top, #f1f6ff 0%, #d3dde7 70%, #bfcddc 100%);
background-image: linear-gradient(top, #f1f6ff 0%, #d3dde7 70%, #bfcddc 100%);
-webkit-box-shadow: inset 0 1px white, inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 1px 1px rgba(0, 0, 0, 0.06);
box-shadow: inset 0 1px white, inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 1px 1px rgba(0, 0, 0, 0.06);
>

.side-nav-button:before, .side-nav-button:after <
content: »;
position: absolute;
>
.side-nav-button:before <
top: 10px;
right: 12px;
width: 15px;
height: 15px;
background: #59718a;
border-radius: 3px;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.4);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.4);
>
.side-nav-button:after <
top: 14px;
right: 13px;
border: 4px solid transparent;
border-left: 4px solid #ecf1f7;
>
.side-nav-button:hover, .side-nav-button.active, .side-nav-button.active, .side-nav-button.active:active <
color: #f6fdff;
text-shadow: 0 1px rgba(0, 0, 0, 0.4);
background-clip: border-box;
>
.side-nav-button:hover <
border-color: #718190;
background-color: #99abb9;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #99abb9), color-stop(100%, #7e93a8));
background-image: -webkit-linear-gradient(top, #99abb9, #7e93a8);
background-image: -moz-linear-gradient(top, #99abb9, #7e93a8);
background-image: -ms-linear-gradient(top, #99abb9, #7e93a8);
background-image: -o-linear-gradient(top, #99abb9, #7e93a8);
background-image: linear-gradient(top, #99abb9, #7e93a8);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 1px rgba(255, 255, 255, 0.3);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 1px rgba(255, 255, 255, 0.3);
>
.side-nav-button:active, .side-nav-button.active, .side-nav-button.active:active <
border-color: #708191 #6d8295 #7b8c9e;
background-color: #7d91a9;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7d91a9), color-stop(100%, #92a7bc));
background-image: -webkit-linear-gradient(top, #7d91a9, #92a7bc);
background-image: -moz-linear-gradient(top, #7d91a9, #92a7bc);
background-image: -ms-linear-gradient(top, #7d91a9, #92a7bc);
background-image: -o-linear-gradient(top, #7d91a9, #92a7bc);
background-image: linear-gradient(top, #7d91a9, #92a7bc);
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.4);
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.2), 0 1px rgba(255, 255, 255, 0.4);
>
.side-nav-button:last-child <
margin-bottom: 0;
>

Код HTML

Вставить в любом месте на странице в секции BODY

Навигационное меню на CSS3

Навигационное меню является одним из важных элементов сайта. В данном уроке представлено привлекательное меню на CSS 3.

Разметка для меню достаточно простая и включает элемент HTML5 nav :

Код CSS достаточно простой:

Результат

Поддержка в браузерах

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

Заключение

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.red-team-design.com/cool-css3-navigation-menu
Перевел: Сергей Фастунов
Урок создан: 28 Ноября 2011
Просмотров: 46637
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

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

Топ-пост этого месяца: Как изменить цвет рамки фото WordPress

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Вертикальное раздвижное меню с описанием

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

Данное меню было разработано моим другом Глебом Кавраским. Давайте же приступим к рассмотрению урока.

Шаг 1. HTML

Для начала нам необходимо подключить библиотеку jquery-latest:

Далее нам надо построить саму разметку, для каждого основного контейнера с содержанием мы будем использовать классы «button_podtext».

C разметкой разобрались, переходим к следующему шагу.

Шаг 2. CSS

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

Мы используем тени для придания меню небольшой объемности. Кроме это позволит создать иллюзию вдавленных кнопок. Переходим к следующему шагу.

Шаг 3. jQuery

Так как мы используем плагин jQuery, нам необходимо его вызвать, вызов плагина нам необходимо инициализировать в основном документе, для работоспособности на остальных страницах.

Кроме этого вы можете указать в данном фрагменте кода скорость открытия и закрытия подпунктов. По умолчанию она установления на значении 280мс.

Вот и все. Готово!

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru

Статьи по теме jQuery

Хотите создать слайдер с миниатюрами изображений для Вашего сайта, да так чтобы они корректно отображались в браузерах и были адаптированы под изменения размеров окна обозревателя, тогда этот урок Вас должен заинтересовать. Для этого мы будем использовать Elastislide — плагин jQuery для адаптивной карусели, которая изменяет размер и алгоритм работы в соответствии с размером экрана. Если вставить карусель в контейнер с изменяющейся шириной, то и она будет изменять ширину.

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

Сегодняшний ресурс — это легко настраиваемая, гибкая новостная лента. Мы использовали некоторые трюки CSS3 и немного jQuery для создания анимаций, которые влияют только на пользователей настольных компьютеров, тогда как на мобильных устройствах структура более минимальна.

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

Раскрутка в соцсетях

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

Хотите уникальный сайт? Ознакомьтесь с нашими ценами!

Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка. ПОРТФОЛИО

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

Форма обратной связи

Все поля обязательны для заполнения!

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика — это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа — это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Адаптивное вертикальное многоуровневое меню на CSS3

Просто шикарное меню — вертикальный аналог ЭТОГО шедевра

Для начала посмотрите ДЕМО

Моё тестирование в редакторе: КЛИК

1#: Между и на нужных страницах вставьте:

2#: HTML код самого меню:

Осталось лишь залить CSS файл из прикреплённого архива в папку css

Адаптивное вертикальное многоуровневое меню на CSS3 : 2 комментария

А как поставить свои иконки??

Список всех доступных иконок можно найти на официальном сайте http://fontawesome.io/icons/

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

5 адаптивных меню для разных задач

Недавно мы затеяли разработку адаптивного портала с замысловатыми меню. Решили писать скрипты только в том случае, если не найдем в сети того, что нужно. Задумывалось несколько разных навигаций с разными особенностями. К нашему счастью, нашлось практически все, кроме одного. Однако, как раз перед началом работы над написанием этого меню, все же удалось найти то, что нужно.
Попробовали довольно много адаптивных меню. В этом топике я решил сделать подборку наиболее стоящих и интересных из тех, что пришлось нам опробовать. Все адаптивные меню не похожи друг на друга и разработаны исключительно для определенных задач.
Итак. Вашему вниманию 5 адаптивных меню на все случаи жизни.

Топ-пост этого месяца: Оптимизация производительности вашего Angular приложения с помощью функций TrackBy, OnPush, ленивой

flexMenu

Это именно то меню, которое было так тяжело найти и функционал которого мы уже собирались начать писать.
flexMenu — адаптивное меню, которое подойдет для сайтов с динамически изменяющейся шириной. Главная и уникальная его особенность — это добавление пункта «Еще» и перенос в его выпадающий список пунктов, которые не помещаются в ширину всей навигации. То есть, если мы будем смотреть на больших мониторах, увидим все пункты. Как только начнем сжимать окно браузера, появится в конце меню пункт «Еще» и в его выпадающий список будут динамически перемещаться пункты, которые не помещаются по мере сжатия окна. Таким образом, у нас получится адаптивное меню с фиксированной высотой и «играющей» шириной.
При работе с flexMenu мы столкнулись с одной проблемой. В нашем случае справа был логотип с float: left;, справа размещалось данное меню также с float: left; и справа с float: right; был еще один блок. При ресайзе окна браузера получалось, что блок справа перепрыгивал под меню, далее все это перепрыгивало под логотип и потом уже задействовался функционал сжатия меню. Как бороться с данной особенностью верстки, будет в последующих топиках. Следите за обновлениями.

P.S В статье 10 лучших jQuery плагинов для работы с текстом мы публиковали плагин под названием TextTailor, который позволяет обрезать текст в зависимости от высоты родительского блока и убрать все, что не поместилось, под кат.

Code a Responsive Navigation Menu

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

Multi-level Flat Menu — адаптивная навигация

Multi-level Flat Menu — это адаптивное, многоуровневое меню, работающее с помощью библиотек Jquery. На десктопных мониторах мы видим обычное, привычное нам горизонтальное меню. На мобильных устройствах горизонтальная навигация трансформируется в выпадающий список.
Multi-level Flat Menu — отличный выбор, если вам требуется сэкономить место на странице.

SlickNav

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

Yamm Megamenu — бесплатное адаптивное мегаменю

Напоследок хотел бы представить вам бесплатное решение адаптивного мегаменю. Навигацию Yamm 3 следует использовать с сеткой Bootstrap 3.

Вертикальное меню Asrtynur для сайта uCoz

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

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

Вот этот стиль CSS и будет выводить правильность и корректность установки..

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

Так вы можете преобразить свой портал в плане его стиля.