Css навигационное меню. Создаем адаптивное навигационное меню. Что означают эти классы
Многочисленные просьбы моих настойчивых читателей и просто любознательных пользователей возымели свое действие. Я наконец то создала урок, в котором мы будем учиться делать динамическое меню Вконтакте с эффектом нажатых кнопок! По аналогии с обычными сайтами интернета, когда посещенная ссылка маркируется особым способом (нажатая кнопка, подчеркивание итд) — мы будем создавать такую же конструкцию Вконтакте, с помощью созданных страниц и графического оформления. Для начала мы сделаем графические заготовки в фотошопе — создадим шапку меню и кнопочки двух видов. Потом создадим несколько страниц Вконтакте, согласно пунктам нашего меню. И напоследок сделаем хитрый прием, который, собственно, и создаст нам иллюзию перехода по ссылке. Урок достаточно сложный и подходит для тех, кто уверенно себя чувствует в функционале Вконтакта. Все манипуляции я буду производить на примере своей группы Вконтакте , где этот эффект реализован вживую. Итак, за дело!
Шаг 1. Создаем в фотошопе шапку меню
Создаем в фотошопе документ шириной 600 пикселей. Высота может быть разная, на ваше усмотрение. Вы можете поместить в шапку любую видовую фотографию, коллаж, информационный баннер и прочие графические картинки. В данном сучае я использовала такой вот рекламный баннер размером 600х172 пикселя.
Шаг 2. Создаем в фотошопе строку навигации
Теперь нам надо создать строку навигации. В данном примере я использовала в качестве кнопок только текст. Но на ваше усмотрение можно создать цветные кнопки и уже на них написать текст. Делаем так — создаем в фотошопе прямоугольник 600х56 пикселей и в данном случае заливаем его белым цветом. Потом в строку пишем пункты меню — где-то порядка 5-6 пунктов, не больше. Большее количество пунктов будет смотреться зажато.
Шаг 3. Создаем в фотошопе строку навигации в нажатом состоянии
Теперь нам надо создать активные ссылки, так, как-будто по ним нажали. Я использовала обычное подчеркивание, но можно использовать другой цвет текста или фона для маркировки посещенной ссылки.
Шаг 4. Нарезаем готовые картинки
На данном этапе нам надо нарезать картинки из Шага 2 и Шага 3. У нас должно получиться два комплекта по пять кнопок — одна кнопка без подчеркивания, другая кнопка с подчеркиванием. Кнопки каждого отдельного пункта (с подчеркиванием и без подчеркивания) должны быть одинакового размера. На картинке ниже представлено все наше графическое оформление — десять кнопок и одна шапка меню.
Шаг 5. Создаем Вконтакте страницу Меню
Теперь переходим ВКонтакт. Наша задача — создать отдельную страницу под названием «Меню». Для этого мы воспользуемся таким кодом
http://vk.com/pages?oid=-XXX&p=Нaзвание_страницы
где вместо ХХХ мы подставим id нашей группы, а вместо текста «Название страницы» мы напишем Меню. Теперь надо выяснить id группы. Как это сделать? Заходим на главную страницу группы и смотрим на наши записи на стене — прямо под блоком «Добавить запись» будет написано «Все записи» — нажимаем на эту ссылку.
Шаг 6. Определяем id группы и редактируем код
Переходим на страницу и видим урл такого вида https://vk.com/wall-78320145?own=1
, где цифры 78320145 в данном примере и есть id группы. Подставляем наши данные в исходный код и получаем запись такого вида:
http://vk.com/pages?oid=-78320145&p=Меню
(с вашими цифрами!). Вставляем эту строку в адресную строку браузера и нажимаем Enter. Так мы создали новую страницу Вконтакте и изначально она выглядит так.
Шаг 7. Создаем Вконтакте остальные страницы навигации
Аналогичным образом мы создаем еще четыре страницы навигации: Цены, Как заказать, Техзадание и Вопросы. То есть еще четыре раза копируем в адресную строку браузера соответствующий код (с вашими цифрами id в примере ниже мои цифры):
http://vk.com/pages?oid=-78320145&p=Цены
http://vk.com/pages?oid=-78320145&p=Как_заказать
http://vk.com/pages?oid=-78320145&p=Техзадание
http://vk.com/pages?oid=-78320145&p=Вопросы
Обратите внимание, в названии страницы из двух слов (Как заказать) пробел между словами заменен на нижнее подчеркивание Как_заказать. Теперь у нас есть пять готвых страниц под каждый пункт меню. Страницу Портфолио мы не создавали поскольку она размещается на странице Меню
Шаг 8. Загружаем фотографии на первую страницу меню
На созданной, пока еще пустой странице (см. Шаг 6) Меню нажимаем на ссылку Редактировать или на ссылку Наполнить содержанием. После этого мы видим панель редактирования. Здесь нам надо нажать на значок фотоаппарат с функцией Загрузить фотографию. Важно! Обратите внимание на то, чтобы у вас стоял режим wiki-разметки. Переключение режимов регулируется значком у правого края страницы.
Шаг 9. Результат после загрузки картинок
Загружаем наши картинки, которые мы создавали в Шаге 1 и Шаге 2. После загрузки мы видим такой код, как на картинке ниже, а само меню выглядит так. После каждого изменения кода не забываем нажимать Сохранить страницу, а потом нажать предпросмотр для просмотра результата.
Шаг 10. Редактируем код картинок
Теперь наша задача заменить все свойства noborder на свойство nopadding. А у первой картинки проставить реальные размеры, поскольку Вконтакт при загрузке ужал картинку до 400 пикселей. После всех изменений мы должны получить такой код и такое меню.
Шаг 11. Проставляем ссылки для картинок
Теперь мы должны проставить ссылки для каждой картинки. Ссылку надо вставлять после nopadding| вместо пробела перед закрывающими скобками. Для первой картинки (шапка меню из Шага 1) можно дать ссылку на главную страницу группы, а можно воспользоваться свойством nolink (ставится через; после nopadding без пробелов). Для второй картики вставляем адрес страницы формата page-78320145_49821289
. То есть полный урл картинки https://vk.com/page-78320145_49821289
, до первую часть с доменом можно опустить. А вот для ссылок на внешние сайты урл ссылки надо указывать полностью.
Шаг 12. Копируем код на остальные страницы навигации
На этом, достаточно простом шаге, мы копируем последний код из предыдущего шага и вставляем его на остальные созданные страницы — Цены, Как заказать, Техзадание и Вопросы. Находимся на странице, нажимаем Редактировать или Наполнить содержанием (находимся в режиме wiki-разметки), вставляем код и нажимаем Сохранить. И потом также на следующей странице. То есть сейчас у нас есть пять страниц, на каждой из которых меню выглядит абсолютно одинаково. Но зато уже можно осуществлять навигацию по меню — при нажатии на ссылку например Цены, мы переместимся на страницу Цены итд.
Шаг 13. Делаем эффект нажатой кнопки
Теперь нам предстоит на каждой из пяти страниц поменять одну картинку (кнопку без подчеркивания заменим на кнопку с подчеркиванием). Например, на первой странице Меню мы загружаем новую картинку и потом заменяем в коде адрес старой картинки на новый (подчеркнуто красным). Потом переходим на страницу Цены, загружаем картинку с подчеркнутыми Ценами и меняем в коде на адрес новой картинки. Потом заходим на страницы Как заказать, Техзадание и Вопросы и делаем туже самую операцию аналогичным образом.
Финал.
В итоге у нас получился эффект навигации, когда нажимаешь на ссылку меню и она становится активной. Но поскольку графическое оформление на всех страницах практически одинаковое, за исключением активной ссылки, то создается иллюзия навигации, хотя на самом деле осуществляется переход на другую страницу.
Меню оформленное таким образом не адаптировано под мобильные устройства. При уменьшении размера экрана картинки начинают съезжать одна под другую. Для того чтобы сделать адаптивный дизайн, нужно использовать таблицы для жесткой версти. Но это уже другая история и более продвинутая техника. А пока посмотрите на различные варианты графического формления меню.
Having easy-to-use navigation is important for any web site.
With CSS you can transform boring HTML menus into good-looking navigation bars.
Navigation Bar = List of Links
A navigation bar needs standard HTML as a base.
In our examples we will build the navigation bar from a standard HTML list.
A navigation bar is basically a list of links, so using the
- and
- elements makes perfect
sense:
Example
- Home
- News
- Contact
- About
Now let"s remove the bullets and the margins and padding from the list:
Example explained:
- list-style-type: none; - Removes the bullets. A navigation bar does not need list markers
- Set margin: 0; and padding: 0; to remove browser default settings
The code in the example above is the standard code used in both vertical, and horizontal navigation bars.
Vertical Navigation Bar
To build a vertical navigation bar, you can style the elements inside the list, in addition to the code above:
Example explained:
- display: block; - Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width (and padding, margin, height, etc. if you want)
- width: 60px; - Block elements take up the full width available by default. We want to specify a 60 pixels width
You can also set the width of
- , and remove the width of ,
as they will take up the full width available when displayed as block elements.
This will produce the same result as our previous example:
- or to center the links.
Add the border property to
- add a border around the navbar. If you also want
borders inside the navbar, add a border-bottom to all
- elements, except for the
last one:
Full-height Fixed Vertical Navbar
Create a full-height, "sticky" side navigation:
Example
ul {
Try it Yourself »
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}Note: This example might not work properly on mobile devices.
Horizontal Navigation Bar
There are two ways to create a horizontal navigation bar. Using inline or floating list items.
Inline List Items
One way to build a horizontal navigation bar is to specify the
- elements
as inline, in addition to the "standard" code above:
Example explained:
- display: inline; - By default,
- elements are block elements. Here, we remove the line breaks before and after each list item, to display them on one line
Floating List Items
Another way of creating a horizontal navigation bar is to float the
-
elements, and specify a layout for the navigation links:
Example explained:
- float: left; - use float to get block elements to slide next to each other
- display: block; - Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify padding (and height, width, margins, etc. if you want)
- padding: 8px; - Since block elements take up the full width available, they cannot float next to each other. Therefore, specify some padding to make them look good
- background-color: #dddddd; - Add a gray background-color to each a element
Tip: Add the background-color to
- instead of each element if you want
a full-width background color:
- Home
- News
- Contact
- About
- margin: 0; - убираем все отступы списка, иначе браузер подставит значения по умолчанию 20px;
- list-style-type: none; - убираем маркеры у пунктов меню, иначе браузер добавит точки или цифры.
- Заменить в .saitbar - width: 240px; на width: 100%;
- Заменить в .menu-4 li - display: block; на display:inline-block;
- Заменить в .menu-4 ul.podmenu - top: 0; на top: 34px;
- Заменить в .menu-4 ul.podmenu - left: 214px; на left: 7px;
- нашего списка будет содержать по одной ссылке:
Наша следующая задача заключается в сбросе стилей списка, установленных по умолчанию. Нам нужно убрать внешние и внутренние отступы у самого списка и маркеры у пунктов списка. Затем зададим нужную ширину:
#navbar { margin: 0; padding: 0; list-style-type: none; width: 100px; }
Теперь пришло время стилизовать сами ссылки. Мы добавим к ним фоновый цвет, изменим параметры текста: цвет, размер и насыщенность шрифта, уберем подчеркивание, добавим небольшие отступы и переопределим отображение элемента со строчного на блочный. Дополнительно были добавлены левая и нижняя рамки к пунктам списка.
Самой важной частью наших изменений является переопределение строчных элементов на блочные. Теперь наши ссылки занимают все доступное пространство пунктов списка, то есть для перехода по ссылке нам больше не нужно наводить курсор точно на текст.
#navbar a { background-color: #949494; color: #fff; padding: 5px; text-decoration: none; font-weight: bold; border-left: 5px solid #33ADFF; display: block; } #navbar li { border-left: 10px solid #666; border-bottom: 1px solid #666; }
Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:
Название документа Попробовать »При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса:hover.
Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:
#navbar a:hover { background-color: #666; border-left: 5px solid #3333FF; } Попробовать »
Горизонтальное меню
В предыдущем примере мы рассмотрели вертикальную панель навигации, которую чаще всего можно встретить на сайтах слева или справа от области с основным контентом. Однако меню с навигационными ссылками также часто располагается и по горизонтали в верхней части веб-страницы.
Горизонтальное меню можно создать путем стилизации обычного списка. Свойству display для элементов
- нужно присвоить значение inline, чтобы пункты списка располагались друг за другом.
Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:
Напишем для нашего списка пару правил, сбрасывающих стиль используемый для списков по умолчанию, и переопределим пункты списка с блочных на строчные:
#navbar { margin: 0; padding: 0; list-style-type: none; } #navbar li { display: inline; } Попробовать »
Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:
#navbar { margin: 0; padding: 0; list-style-type: none; border: 2px solid #0066FF; border-radius: 20px 5px; width: 550px; text-align: center; background-color: #33ADFF; } #navbar a { color: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; width: 100px; } #navbar a:hover { border-radius: 20px 5px; background-color: #0066FF; } Попробовать »
Выпадающее меню
Меню, которое мы будем создавать, будет иметь основные навигационные ссылки, расположенные в горизонтальной панели навигации, и подпункты, которые будут отображаться только после наведения курсора мыши на тот пункт меню, к которому эти подпункты относятся.
Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:
Подпункты мы разместим в отдельном списке, вложив его в элемент
- , который содержит родительскую ссылку относительно подпунктов. Теперь мы имеем четкую структуру нашей будущей панели навигации:
Теперь приступим к написанию CSS кода. Для начала необходимо скрыть список с подпунктами с помощью объявления display: none;, чтобы они не отображались на веб-странице все время. Для отображения подпунктов нам нужно чтобы при наведении на элемент
- список снова был преобразован в блочный элемент:
#navbar ul { display: none; } #navbar li:hover ul { display: block; }
Убираем у обоих списков отступы и маркеры, установленные по умолчанию. Элементы списка с навигационными ссылками делаем плавающими, формируя горизонтальное меню, но для элементов списка, содержащих подпункты задаем float: none; , чтобы они отображались друг под другом.
#navbar, #navbar ul { margin: 0; padding: 0; list-style-type: none; } #navbar li { float: left; } #navbar ul li { float: none; }
Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative; , а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.
#navbar ul { display: none; position: absolute; top: 100%; } #navbar li { float: left; position: relative; } #navbar { height: 30px; } Попробовать »
Высота для родительского списка была добавлена специально, так как браузеры не учитывают в качестве содержимого элемента плавающий контент, то без добавления высоты наш список будет проигнорирован браузером и контент, следующий за списком, будет обтекать наше меню.
Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:
#navbar ul { display: none; background-color: #f90; position: absolute; top: 100%; } #navbar li:hover ul { display: block; } #navbar, #navbar ul { margin: 0; padding: 0; list-style-type: none; } #navbar { height: 30px; background-color: #666; padding-left: 25px; min-width: 470px; } #navbar li { float: left; position: relative; height: 100%; } #navbar li a { display: block; padding: 6px; width: 100px; color: #fff; text-decoration: none; text-align: center; } #navbar ul li { float: none; } #navbar li:hover { background-color: #f90; } #navbar ul li:hover { background-color: #666; }
В очередной раз обращаюсь к теме создания навигации для сайта исключительно средствами . Практически все современные браузеры поддерживают основные функции , это позволяет более гибко настраивать эффекты и внешний вид навигационных панелей, без подключения javascript и каких бы то ни было дополнительных файлов изображений, используя в работе только команды .
Сегодня мы рассмотрим структуру и технику исполнения меню навигации с выпадающими подпунктами. Внешний вид панели оформим с помощью , закруглим углы и добавим немного тени для шрифта.По накатанной, как всегда для начала, можете посмотреть пример работы готового выпадающего меню на демо-страничке, а для дальнейшего разбора исполняющего кода, скачать исходники.
HTML Разметка
Всю структуру меню сформировал в виде неупорядочного списка, поместив его в блок div с определенным классом «menu-nav» , для привязки к .
< div class = "menu-nav" > < ul> < li class = "first" >< a href= "#" > Главная a> li> < li>< a href= "#" > Уроки a> < ul> < li>< a href= "#" > HTML/ CSS a> li> < li>< a href= "#" > Photoshop a> li> < li>< a href= "#" > Dreamweaver a> li> < li>< a href= "#" > Flash a> li> ul> li> < li>< a href= "#" > Видео a> < ul> < li>< a href= "#" > Youtube a> li> < li>< a href= "#" > Vimeo a> li> < li>< a href= "#" > Rutube a> li> ul> li> < li>< a href= "#" > Программы a> < ul> < li>< a href= "#" > Система a> li> < li>< a href= "#" > Безопасность a> li> < li>< a href= "#" > Мультимедиа a> li> < li>< a href= "#" > Интернет a> li> ul> li> < li>< a href= "#" > Онлайн a> < ul> < li>< a href= "#" > Сервисы a> li> ul> li> < li>< a href= "#" > Wordpress a> < ul> < li>< a href= "#" > Плагины a> li> < li>< a href= "#" > Темы WP a> li> ul> li> < li>< a href= "#" > О Сайте a> li> < li>< a href= "#" > Контакты a> li> ul> div> Как видно из примера кода, для создания выпадающих панелей, к некоторым пунктам меню добавил еще один небольшой кусок простого кода, формируещего неупорядоченный список:
Теперь, вы можете добавлять выпадающие списки к любому основному пункту меню. Если вы посмотрите на код ниже вы увидите, как к пункту меню (4), добавлен выпадающий список подпунктов:
< ul> < li> Пункт 1 li> < li> Пункт 2 li> < li> Пункт 3 li> < li> Пункт 4 < ul> < li> Подпункт 1 li> < li> Подпункт 2 li> < li> Подпункт 3 li> < li> Подпункт 4 li> ul> li> ul> - Пункт 1
- Пункт 2
- Пункт 3
- Пункт 4
- Подпункт 1
- Подпункт 2
- Подпункт 3
- Подпункт 4
Без стилей CSS, вся эта конструкция будет выглядеть всего лишь списком. Давайте же посмотрим как с помощью CSS оформить наше выпадающее меню.
CSS
Мы используем CSS, чтобы оформить внешний вид и придать функциональности нашему меню. Первое, что вам необходимо сделать, это создать файл CSS, обозвать и сохранить его в формате типа: style.css.
Примечание: Убедитесь, что для вызова CSS файла в голове вашего HTML документа, между тегами
..... , размещен следующий код:< link rel= "stylesheet" type= "text/css" href= "style.css" /> Теперь, когда у вас есть файл style.css, мы можем начать добавлять стили, экспериментировать с параметрами и функциями. Для большей ясности добавил комментарии к некоторым параметрам кода CSS:
/*База*/ * { margin: 0 ; padding: 0 ; } body{ font- family: Helvetica, Arial, sans- serif; font- size: 14px; background: #474747 url(bg.png); } #container { width: 960px; /*Ширина контейнера*/ margin: 10px auto; } /*Меню*/ . menu- nav { position: relative; width: 100 %; /*Ширина панели меню*/ height: 50px; font- size: 14px; color: #999; margin: 0 auto; margin- top: 20px; /*Цвет и градиент фона панели меню*/ background: #395593; background: - moz- linear- gradient(top, #647db5, #395593); background: - webkit- gradient(linear, left top, left bottom, from(#647db5), to(#395593)); background- image: - o- linear- gradient(top, rgb(100 , 125 , 181 ) , rgb(57 , 85 , 147 ) ) ; text- shadow: 0 - 1px 0 #111; border: 1px solid #444; /*Закругленные углы панели меню*/ border- radius: 8px; - moz- border- radius: 8px; - khtml- border- radius: 8px; - webkit- border- radius: 8px; } . menu- nav ul { list- style: none; color: #FFF; } . menu- nav ul li { float: left; position: relative; } . menu- nav ul li a { border- right: 1px solid #364f87; border- left: 1px solid #7189c0; padding: 17px; display: block; text- decoration: none; text- align: center; color: #FFF; background: #395593; background: - moz- linear- gradient(top, #647db5, #395593); background: - webkit- gradient(linear, left top, left bottom, from(#647db5), to(#395593)); background- image: - o- linear- gradient(top, rgb(100 , 125 , 181 ) , rgb(57 , 85 , 147 ) ) ; text- shadow: 0 - 1px 0 #111; } . menu- nav li. first a { border- radius: 8px 0 0 8px; - moz- border- radius: 8px 0 0 8px; - khtml- border- radius: 8px 0 0 8px; - webkit- border- radius: 8px 0 0 8px; } /*Цвет и градиент фона при наведении*/ . menu- nav ul li a: hover { background: #647db5; background: - moz- linear- gradient(top, #395593, #647db5); background: - webkit- gradient(linear, left top, left bottom, from(#395593), to(#647db5)); background- image: - o- linear- gradient(top, rgb(57 , 85 , 147 ) , rgb(100 , 125 , 181 ) ) ; color: #fff; } . menu- nav ul li ul { display: none; } . menu- nav ul li: hover ul { display: block; position: absolute; min- width: 200px; left: 0 ; margin- top: - 1px; } . menu- nav ul li: hover ul li a { display: block; color: #ffffff; width: 110px; text- align: center; border- bottom: 1px solid #283f74; border- top: 1px solid #366ea6; background: #364f87; } . menu- nav ul li ul li: first- child a { border- top: none; } . menu- nav ul li ul li: last- child a { border- bottom- left- radius: 5px; border- bottom- right- radius: 5px; - moz- border- radius- bottomleft: 5px; - moz- border- radius- bottomright: 5px; - webkit- border- bottom- right- radius: 5px; - webkit- border- bottom- left- radius: 5px; } . menu- nav ul li: hover ul li a: hover { background: #395593; color: #ffffff; } /*База*/ * {margin: 0; padding: 0;} body{ font-family:Helvetica,Arial, sans-serif; font-size:14px; background: #474747 url(bg.png); } #container { width:960px; /*Ширина контейнера*/ margin: 10px auto; } /*Меню*/ .menu-nav { position:relative; width: 100%; /*Ширина панели меню*/ height:50px; font-size:14px; color:#999; margin: 0 auto; margin-top: 20px; /*Цвет и градиент фона панели меню*/ background: #395593; background: -moz-linear-gradient(top, #647db5, #395593); background: -webkit-gradient(linear, left top, left bottom, from(#647db5), to(#395593)); background-image: -o-linear-gradient(top,rgb(100, 125, 181), rgb(57, 85, 147)); text-shadow: 0 -1px 0 #111; border: 1px solid #444; /*Закругленные углы панели меню*/ border-radius: 8px; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; } .menu-nav ul { list-style:none; color: #FFF; } .menu-nav ul li { float:left; position:relative; } .menu-nav ul li a { border-right:1px solid #364f87; border-left:1px solid #7189c0; padding:17px; display:block; text-decoration:none; text-align:center; color:#FFF; background: #395593; background: -moz-linear-gradient(top, #647db5, #395593); background: -webkit-gradient(linear, left top, left bottom, from(#647db5), to(#395593)); background-image: -o-linear-gradient(top,rgb(100, 125, 181), rgb(57, 85, 147)); text-shadow: 0 -1px 0 #111; } .menu-nav li.first a { border-radius: 8px 0 0 8px; -moz-border-radius: 8px 0 0 8px; -khtml-border-radius: 8px 0 0 8px; -webkit-border-radius: 8px 0 0 8px; } /*Цвет и градиент фона при наведении*/ .menu-nav ul li a:hover { background: #647db5; background: -moz-linear-gradient(top, #395593, #647db5); background: -webkit-gradient(linear, left top, left bottom, from(#395593), to(#647db5)); background-image: -o-linear-gradient(top,rgb(57, 85, 147), rgb(100, 125, 181)); color:#fff; } .menu-nav ul li ul { display: none; } .menu-nav ul li:hover ul { display: block; position: absolute; min-width:200px; left:0; margin-top: -1px; } .menu-nav ul li:hover ul li a { display:block; color:#ffffff; width: 110px; text-align: center; border-bottom: 1px solid #283f74; border-top: 1px solid #366ea6; background: #364f87; } .menu-nav ul li ul li:first-child a { border-top:none; } .menu-nav ul li ul li:last-child a { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; } .menu-nav ul li:hover ul li a:hover { background:#395593; color:#ffffff; }
На этом собственно и все. После того как вы разместите код, приведенный выше в таблице стилей, меню с выпадающим списком будет полностью оформлено и готово к работе. Используя чистый cтиль CSS3, нестоит забывать, что не все браузеры одинаково хорошо поддерживают новые стандарты. Например, в старых версиях IE, данное меню будет выгладеть несколько иначе, хотя и для этого «тормоза прогресса» есть свои костыли))).
С Уважением, Андрей
Horizontal Navigation Bar Examples
Create a basic horizontal navigation bar with a dark background color and change the background color of the links when the user moves the mouse over them:
Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}li {
float: left;
}li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}/* Change the link color to #111 (black) on hover */
Try it Yourself »
li a:hover {
background-color: #111;
}Active/Current Navigation Link
Add an "active" class to the current link to let the user know which page he/she is on:
Right-Align Links
Right-align links by floating the list items to the right (float:right;):
Example
Для удобной навигации по сайту на всех страницах используют меню, чтобы пользователю было понятно, что и где у вас находится. Практически всегда в верхней части страницы (в шапке) располагают горизонтальное меню по разделам (категориям) сайта, а вертикальное меню прописывают в сайтбаре (в колонке) и используют для навигации по статьям.
Из статьи вы поймёте как сделать меню для сайта html, что для этого потребуется прописать, чтобы получилось горизонтальное и вертикальное меню на css, либо меню с выпадающим списком.
Для того, чтобы сделать меню (любое) мы будем использовать маркированный список, которому придадим непосредственно свой class и пропишем для этого класса свои параметры с необходимыми значениями.
К примеру, для создания меню мы используем список с классом class="menu" (название класса любое, только латинские буквы), и код html будет выглядеть так:
В стилевом оформление для меню я указал обязательные свойства с нужными значениями:
Обязательные параметры и значения CSS
Вот таким образом делается меню на html страницах, и теперь перейдём к созданию горизонтального меню и рассмотрим всё на примерах.
Как сделать горизонтальное меню на CSS
Для отображения горизонтального меню применяя список, нам достаточно прописать в вышеуказанный код всего один параметр display: inline; , чтобы пункты меню выровнялись в одну строку и шли друг за другом по горизонтали. А так же добавим отступы между пунктами меню с помощью margin .
И выглядеть это будет так:
Горизонтальное меню у нас готово, осталось придать ему красивый внешний вид.
Давайте каждому пункту в горизонтальном меню придадим рамку border и сделаем у неё скошенные края, заполним определённым цветом background-color (добавим фон для пункта меню), и изменим вид ссылки.
Отображаться горизонтальное меню уже будет таким образом:
Так как горизонтальное меню в большинстве случаях прописывают в шапке сайта, то и я в примере добавил в меню фон, который вы измените под свой цвет шапки.
И для наглядности сделал пункты меню по центру, применив свойство text-align: center; , которое можно удалить (выровняется автоматически по левому краю), либо задать значение text-align: right; и горизонтальное меню отобразится по правому краю.
Кстати вы можете так же воспользоваться , которые вы можете там воочию посмотреть и бесплатно скачать.
Как сделать вертикальное меню на CSS
Вертикальное меню на CSS делается и оформляется на странице практически так же как и горизонтальное, только здесь изменяется в .menu-2 li {... параметр со значением display: block; (указывает на блочный элемент), что придаёт ему вертикальное отображение пунктов меню.
И ещё одно дополнение к вертикальному меню: так как оно в большинстве случаев находится в боковой колонке сайта, которое имеет фиксированную ширину, то и мы вынуждены задать ширину width: 100%; нашему вертикальному меню, чтобы оно полностью занимало всю ширину колонки.
Давайте рассмотрим вертикальное меню CSS на примере:
Вот так вертикальное меню отобразится на странице:
Будьте внимательны!
то же удалить.Как сделать выпадающее меню на CSS
Сделать выпадающее меню с помощью CSS довольно просто. Мы всего лишь добавим к существующему коду от вертикального меню несколько параметров, которые и будут отвечать за выпадающий список пунктов меню.
Обязательно запомните!
Для того, чтобы выпадающее меню строго появлялось напротив ведущей ссылки, необходимо в CSS для тега li , где находится эта ссылка, прописать position: relative; , а для выпадающего меню position: absolute;Давайте напишем html код для выпадающего меню на CSS.
Посмотрите, как будет выглядеть на странице выпадающее меню на CSS.
Точно таким же образом прописывается выпадающее меню и при горизонтальном расположение навигации. Единственное, это не забывайте менять значения у параметров top и left (отступ сверху и слева).
Посмотрите!
Как сделав всего 3 изменения в CSS, наше вертикальное расположение навигации с выпадающим меню, превратиться в горизонтальное с выпадающим меню.Изменения в CSS для выпадающего меню
Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню - раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML .
Вертикальное меню
Первым шагом создания вертикального меню будет создание маркированного списка . Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором "navbar". Каждый элемент
- elements, except for the
last one:
Vertical Navigation Bar Examples
Create a basic vertical navigation bar with a gray background color and change the background color of the links when the user moves the mouse over them:
Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}/* Change the link color on hover */
Try it Yourself »
li a:hover {
background-color: #555;
color: white;
}Center Links & Add Borders
Add text-align:center to