От автора: приветствую вас на нашем блоге о сайтостроении. Это цикл статей, посвященный новой спецификации и сегодня я бы хотел вам рассказать, как сделать в html5 меню и чем этот процесс отличается от такого же в предыдущих версиях языка.
В чем отличия
Прежде всего я хотел бы сказать, что спецификация не является уж такой и новой – она начала свое становление еще в 2009 году. Собственно, с тех пор происходит постоянное развитие – в html5 появляются новые возможности, современные браузеры все больше и больше поддерживают эти самые возможности, так что уже скоро можно будет говорить о полной поддержке этой технология, хотя она и не является чем-то единым целым, это скорее набор новых возможностей, каждая из которых является самостоятельной.
Ну хорошо, а чем же отличается создание главной навигации (меню), раз уж вы читаете статью на эту тему, то какие-то отличия точно должны быть. Ну а как раньше создавалось меню? Обычно для этого использовали маркированный список, который помещали в дополнительный контейнер для всей навигации – обычный div.
Так вот, с появлением новых тегов теперь можно поступить более правильно – вместо тега div обернуть меню в nav – новый семантический элемент, который создан специально для того, чтобы собирать в него самые главные ссылки, группировать их вместе.
В nav можно поместить как список, так и просто набор ссылок. Мне кажется, это даже более простое и правильное решение, хотя во многих шаблонах по-прежнему видно реализацию меню с помощью тегов ul, li, a.
Интересно, что контейнер nav создан именно для приоритетных ссылок на странице. На самом деле таких конйтенеров на странице может быть больше одного, но помещать в них стоит только те ссылки, которые действительно формируют главную навигацию (например, верхнее главное меню и его дубль в футере страницы).
Как сделать с помощью html5 горизонтальное меню
Даже не нужно никакого обрамления в список, все изначально будет отображаться в одну строку, так как ссылки – строчные элементы.
Другое дело, что по оформлению они очень ограничены из-за своих строчных свойств. Вы сможете оперировать только такими свойствами как: цвет, размер шрифта, внешние отступы. Если же вы захотите задать определенный фоновый цвет, сделать разделители и добавить внутренние отступы (либо определить размер каждого пункта меню) то со строкой так сделать не получится.
Тут нам придется преобразовывать наши пункты в блочные элементы. Для этого им нужно записать свойство:
display : block ; |
Теперь они идут сверху вниз, то есть наша навигация стала вертикальной. Чтобы вновь превратить ее в горизонтальную, нужно добавить определенные свойства. Например, вместо блочного типа определить для них блочно-строчный, либо задать им (float: left). Читайте подробнее об этих способах .
Вертикальная навигация
Обычно, чтобы сделать вертикальное меню в html5 используют список, но нам годится и та разметка, которую я дал вам выше. Как вы увидели, если преобразовать ссылки в блочные, то они автоматически выстроятся друг за другом сверху вниз, потому что два блока не могут стоять на одной строке.
Теперь вы можете применить к ним нужные правила оформления. На блоки действует гораздо больше свойств, чем на строчный элемент, поэтому вы имеете куда больше возможностей. Для примера я добавил такие:
a{ text-decoration: none; color: #fff; padding: 5px; font-size: 22px; display: block; background: linear-gradient(to right, rgba(96,108,136,1) 0%,rgba(63,76,107,1) 100%); width: 200px; text-align: center }
text - decoration : none ; color : #fff; padding : 5px ; font - size : 22px ; display : block ; background : linear - gradient (to right , rgba (96 , 108 , 136 , 1 ) 0 % , rgba (63 , 76 , 107 , 1 ) 100 % ) ; width : 200px ; text - align : center |
В своей работе, немало времени уделял разработке различных видов навигации для сайтов, как с применением , так и используя чистый стиль 3 без дополнительных изображений и подключаемых javascript. Решил все наработки по теме собрать воедино и выложить в качестве своеобразной подборки уроков по созданию навигации. В обзоре представлены разные типы , по стилю исполнения и функционалу, многоуровневые с выпадающими подменю, в популярном стиле «аккордеон», вертикальные и горизонтальные с динамическими эффектами, простые и сложные по своей структуре.
Отталкиваясь от этих уроков, исходя из приведенных примеров, экспериментируя и применив немного фантазии, вы с легкостью сможете сделать свой сайт выделяющимся из общей массы, эффектным и запоминающимся.
✓ Нажав на заголовок, вы попадете непосредственно на страницу с детальным описанием всего процесса, а жмякнув по картинке, перейдете на страницу с примером работы выбранного вами меню ツ
1.
При создании этого замечательного меню использовались чистые стили и функции CSS3, без каких либо дополнительных файлов изображений и javascript. С поддержкой современными браузерами новых стандартов CSS3, стало возможным использовать в разработке дизайна сайтов, все волшебные свойства магии CSS3. Применяя на практике данную технику создания меню, можно добиться потрясающих результатов.
2.
Из этого урока, вы узнаете, как с помощью стилей и новых свойств CSS3, не используя javascript и изображения, можно заделать отличное, функциональное и быстро работающее меню в стиле «аккордеон».
3.
Подробный мануал по созданию красивого меню в стиле «аккордеон» с помощью CSS и библиотеки jQuery. Меню тестировалось и замечательно работает во всех современных браузерах. Использование функции линейного градиента css3 в оформлении, делает это меню более выразительным и динамичным.
4.
В уроке представлен весь процесс изготовления интересного, вертикального меню для сайта, построенного полностью на использовании CSS и небольшого файла изображения, которое при желании Вы с легкостью сможете отредактировать под свои нужды.
5.
В продолжение предыдущего урока, добавлено подробное описание варианта создания вертикального меню с вложенными подпунктами
6.
Небольшой, но в тоже время подробнейший урок, по созданию качественного, с небольшим количеством HTML, CSS и JavaScript кода, с красивым интерфейсом, блока навигации в стиле «Аккордеон».
7.
Еще одно интересное решение в плане создания многоуровневого меню навигации с использованием jQuery. Кросс-браузерность конечного продукта, JQuery анимация и градиент CSS3 делает навигационный блок еще более привлекательным.
8.
Мне нравится решение, когда меню ведет себя как раскрывающиеся списки. Мастеровой люд часто использует JavaScript, чтобы добиться этого эффекта, в уроке же расписано, как достигнуть желаемого, применяя только чистые стили и функции CSS.
9.
Из этого урока, вы узнаете, как сделать красивое меню с выпадающими подпунктами. Привлекает внимание нестандартное решение вывода подменю, не как обычно, прямо под основными пунктами меню, а элементы подменю выровнены по левому краю, с отображением непосредственно под панелью навигации.
10.
Перевод и адаптированная версия урока по созданию красивого, горизонтального меню в стиле "Lava-Lamp. В интернете представлено много версий меню выполненных в этом стиле, опираясь на полученные знания из урока, вы свободно сможете создать что нибудь свое индивидуальное.
На этом пока все. В этой подборке представлена лишь малая часть того, что можно сделать в плане создания красивых и индивидуальных, а главное функциональных меню навигации для ваших проектов. Надеюсь кто то найдет для себя подходящий вариан и использует его в своей работе по благоустройству сайта. Если кому понравилась статья, комментируйте, делитесь с друзьями через Твиттер, Google+ и другие соц. сервисы, а можно просто добавить статью в закладки
Горизонтальная
Панель навигации
Наличие простой в использовании навигации важно для любого веб сайта.
С помощью CSS вы можете превратить скучные HTML меню в красивые навигационные панели
Панель авигации = список ссылок
Панель навигации нуждается в стандартном HTML в качестве основы.
В наших примерах мы построим панель навигации из стандартного HTML списка.
Панель навигации - это в основном список ссылок, поэтому использование элементов
-
и естественно
- :
Пример
- Главная
- Новости
- Контакты
- О Нас
Теперь давайте удалим маркеры, поля и отступы из списка:
Пример объяснение:
- list-style-type: none; - Убирает маркеры. В панели навигации не нужны маркеры для списка
- Установить margin: 0; и padding: 0; чтобы удалить настройки браузера по умолчанию
Код в приведенном выше примере - это стандартный код, используется как на вертикальной, так и на горизонтальной панели навигации.
Вертикальная панель навигации
Чтобы создать вертикальную панель навигации, нужно задать стиль элемента в списке, к дополнению коду выше:
Объяснение примера:
- display: block; - Отображение ссылок в виде элементов блока составляет область кликабельных ссылок (не только текст), и позволяет указать ширину (и отступы, поля, высота и т. д. какие вы хотите)
- width: 60px; - Элементы блока занимают всю ширину, доступную по умолчанию. Мы хотим задать ширину 60 пикселей
Вы также можете установить ширину
- и удалить ширину ,
поскольку они будут занимать всю ширину, доступную при отображении в виде элементов блока.
Это приведет к тому же результату, что и в предыдущем примере:
- или
ссылки по центру.
Добавить свойство border в
- .
Добавить границы вокруг навигации. Если Вы также хотите установить границы внутри панели,
нужно добавить border-bottom во все элементы
- ,
за исключением последнего:
Фиксированная вертикальная навигация
Создать в полную в высоту, "фиксированную" боковую панель навигации:
Пример
ul {
Редактор кода »
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* Полная высота */
position: fixed; /* Сделайте его придерживаться, даже на прокрутки */
overflow: auto; /* Включить прокрутку, если sidenav имеет слишком много содержимого */
}Примечание: Этот пример может работать неправильно на мобильных устройствах.
Горизонтальная панель навигации
Существует два способа создания горизонтальной панели навигации. Использование встроенных или плавающих элементов списка.
Встроенные элементы списка
Одним из способов построения горизонтальной панели навигации является указание элементов
-
как встроенные, кроме того в "стандартные" в коде выше:
Объяснение примера:
- display: inline; - По умолчанию, элементы
- - это элементы блока. Здесь мы удалим разрывы строк до и после каждого элемента списка, чтобы отобразить их на одной линии
Плавающие элементы списка
Другой способ создания горизонтальной навигации, плавают элементы
-
им нужно указать расположение для навигационных ссылок:
Объяснение примера:
- float: left; - Используйте поплавок, чтобы заставить элементы блока плавать рядом друг с другом
- display: block; - Отображение ссылок в виде элементов блока составляет всю область кликабельных ссылок (не только текст), позволяет нам указывать отступы (и высоту, ширину, поля и т.д. если вы хотите)
- padding: 8px; - Поскольку элементы блока занимают всю доступную ширину, они не могут плавать рядом друг с другом. Поэтому, укажите некоторые дополнения, чтобы сделать их выглядеть красиво
- background-color: #dddddd; - Добавить серый фон цвета к каждому элементу
Совет: Добавить background-color: #dddddd; в
- для каждого элемента , чтобы цвет фона был на всю ширину:
- Главная
- Новости
- Контакты
- О Нас
- нашего списка будет содержать по одной ссылке:
Наша следующая задача заключается в сбросе стилей списка, установленных по умолчанию. Нам нужно убрать внешние и внутренние отступы у самого списка и маркеры у пунктов списка. Затем зададим нужную ширину:
#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; }
Для того, чтобы было удобно перемещаться по сайту нужна навигация, которую я сделал использовав скрипты HTML и CSS. В результате моей работы, вы можете видеть 2 типа меню (вертикальное и горизонтальное). А теперь, постараюсь рассказать о тех задачах, которые, как мне кажется, должно выполнять меню для сайта:
- Удобность в использовании;
- Должна быть создана навигация по всем разделам сайта;
- На каждой странице сайта должен быть выход на главную страницу;
- Переход на любую страницу сайта максимум в 3 клика.
Здесь я постараюсь максимально изложить материал по созданию меню, приготовьтесь, у многих могут возникнуть сложности, у меня по крайней мере они возникали. И так начнем!
Первым делом, я поведаю вам о том, как сделать . Сначала пишем скрипт в таблице стилей:
#navigation { width: 560px; height: 50px; margin: 0; padding: 0; background-image: url(img/gor_menu.jpg); background-repeat: no-repeat; background-position:center; } #navigation ul { list-style: none; margin: 0; padding: 0; } #navigation ul li { display: inline; margin: 0px; } #navigation ul li a { height:28px; display: block; float: left; color: #333333; text-decoration: none; font-family: Arial; font-size: 12px; font-weight: bold; background-image: url(img/menu_separatorline.jpg); background-repeat: no-repeat; background-position: right center; padding-top: 17px; padding-right: 15px; padding-bottom: 0; padding-left: 15px; } #navigation ul li a:hover { color:#FFF; background-image: url(img/button_hover.jpg); background-repeat: repeat-x; background-position: left top; } #navigation ul li#active a { background-image: url(img/button_hover.jpg); background-repeat: repeat-x; background-position: left top; }
Не пугайтесь ничего страшного в этом коде нет. Чтобы вам было понятней напишу-ка я сразу HTML-код для данного меню:
Как видите, мы имеем дело со списком, который без таблицы стилей ничего путного из себя не представляет. Оператор div вызывает переменные из внешней таблицы стилей CSS, далее наш список преображается и превращается в симпатичное на мой взгляд горизонтальное меню.
Теперь нужно немного разъяснить, что к чему относится, дальше я думаю вы сами со всем разберетесь:
— содержит всю структуру меню. В него же будет вставляться верхнее изображение, которое я подготовил заранее в Photoshop; — тело меню, содержит неупорядоченный список. В него будет вставляться изображение, которое будет повторяться по вертикали и создавать фон. Может быть, я выбрал слишком яркие тона, но на мой взгляд, они не режут глаз;— содержит каркас самого меню;
- Создание меню сайта a> — это одна из позиций, где в a href="#" нужно будет вставить необходимую ссылку;
Примеры горизонтальной панели навигации
Создание базовой горизонтальной панели навигации с темным цветом фона и изменение цвета фона ссылок при наведении курсора мыши на них:
Пример
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;
}Активная и текущая ссылка навигации
Выравнивание списка по правому краю
Выравнивание ссылок по правому краю путем перемещения элементов списка вправо float:right; :
Пример
Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню - раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML .
Вертикальное меню
Первым шагом создания вертикального меню будет создание маркированного списка . Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором "navbar". Каждый элемент
- ,
за исключением последнего:
Пример вертикальной панели навигации
Создание базовой вертикальной панели навигации с серым цветом фона и изменение цвета фона ссылок при наведении курсора мыши на них:
Пример
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 */
Редактор кода »
li a:hover {
background-color: #555;
color: white;
}Центральные ссылки и добавить границы
Добавить выравнивание text-align:center в