- визуально эффект может быть одинаковый, но учтите, что в таком случае ширина элемента.menu всё равно останется 100%.
Разделение пунктов
Чтобы визуально разделить пункты меню, можно задать каждому из них нижнюю или верхнюю границу. В зависимости от того, какую из них вы используете, у вас будет не хватать границы сверху или снизу меню. Это можно исправить, добавив еще одну границу к самому блоку.menu:
Menu a {
border-top: 1px solid blue;
}
.menu {
border-bottom: 1px solid blue;
}
Высота пунктов и вертикальное выравнивание
Сейчас ссылки меню выглядят слишком низкими, расположенными близко друг к другу. Если текст каждой ссылки не будет занимать более одной строки, то увеличить их высоту и сохранить при этом текст вертикально по центру можно с помощью свойств height и line-height:
Menu a {
height: 30px;
line-height: 30px;
}
GIF
Как видно на анимации, свойство height влияет на высоту ссылки, а межстрочный интервал line-height изменяет уже высоту самой текстовой строки. Обязательно задавайте одинаковые значения для этих двух свойств, если хотите, чтобы текст ссылки был вертикально отцентрирован.
Горизонтальное меню
Основная задача при создании горизонтальной навигации - расположить пункты меню в один ряд. Это можно сделать несколькими способами.
Способ первый
Первый вариант - задать пунктам списка свойство display со значением inline либо inline-block:
Menu li {
display: inline;
}
При этом теги внутри нельзя делать блочными, иначе пункты перестанут выстраиваться горизонтально и снова встанут в вертикальную позицию. Ссылкам можно также задать значение inline или inline-block . Выберите второе, если вы собираетесь в дальнейшем создавать отступы для ссылок.
После этого можно заняться оформлением ссылок. Например, можно сделать такой стиль:
Menu a {
text-decoration: none;
font-family: sans-serif;
color: #5757a0;
display: inline-block;
padding: 10px 20px;
background-color: lavender;
border-bottom: 5px solid #5757a0;
}
Мы добавили фоновый цвет и нижнюю границу для каждой ссылки, а также увеличили ее размеры при помощи внутренних отступов padding . Заметьте, что между пунктами меню есть небольшие промежутки, хоть мы и не добавляли их через стили. Они возникают, потому что браузер так воспринимает символ возврата каретки между закрывающим и открывающим тегами
. Эти промежутки можно убрать, записав HTML-код списка в одной строке:
Однако это неудобно, ведь эти изменения придется вносить в HTML вручную, да и чтение кода затрудняется. Поэтому попробовать избавиться от промежутков можно с помощью отрицательного значения margin-right:
Menu li {
margin-right: -5px;
}
Этот код не убирает промежутки, а прикрывает их за счет сдвига элементов на пять пикселей влево. Данный способ нельзя назвать очень надежным, потому что размер промежутка может варьироваться в зависимости от других стилей.
Если промежутки между пунктами не запланированы в вашем дизайне, лучше воспользоваться вторым методом горизонтального выстраивания элементов.
Способ второй
Возможно, вы уже догадались, что второй вариант создания горизонтального меню заключается в использовании свойства float . Для этого добавьте стиль для тегов
:Menu li {
float: left;
}
Как видим, промежутков между пунктами уже нет. Все остальные стили работают, как и прежде. Но если вы добавите после навигации другой HTML-элемент (допустим,
), то на него повлияет обтекание и он встанет в один ряд с пунктами меню. Отменить это действие можно, добавив заголовку свойство clear: left . Но при разработке сайта с большим количеством разных страниц может стать сложно следить за тем, нигде ли вы не забыли указать данное свойство. Гораздо легче отменить обтекание со стороны навигации. В этом поможет такая запись:
Menu {
overflow: hidden;
}
Это также поможет вернуть нормальную высоту родителя плавающих элементов. Мы уже говорили об этой проблеме в предыдущих уроках, но тогда мы решали ее через специальный хак с использованием псевдоэлемента:after . Пример выше - это еще один способ решить вопрос с исчезнувшей высотой контейнера.
Примечание:
если вы установите фон для элемента.menu , то вы не увидите его до тех пор, пока не примените к нему overflow: hidden . Логично, ведь как можно увидеть фон элемента, чья высота равна нулю?
В следующем уроке мы более детально расскажем о возможностях селекторов атрибутов, с помощью которых можно задавать
Что является одним из основных элементов каждого интернет-сайта? Конечно же, навигационное меню
. Каждое меню представляет собой полезную часть веб-сайта, так как именно посредством него пользователь может переходить в другие разделы сайта. Основное взаимодействие посетителя с веб-сайтом осуществляется именно посредством навигационного меню. В наше время на страницах веб-сайтов можно повстречать всё более и более привлекательные и удобные навигационные меню.
Сегодня мы представляем вам 62 привлекательных навигационных меню
, основанных на CSS, javascript или технологии Flash.
Навигационное меню на CSS
Игры по типу казино или змейки и лесенки, украшенные красивым красочным меню.
Здесь мы видим отличное мягкое цветовое решение и интересный эффект при раскрытии подменю.
03.
Стивен Уиттенс (Steven Wittens) предлагает нам другую перспективу этого меню.
04.
На сайте UX Booth можно увидеть стильное, но очень простенькое меню.
05.
На сайте MacRabbit, что очевидно, используется меню в стиле MAC OS или Apple.
06.
На сайте Joyent используется простое, деловитое на вид меню, в котором предложены работы компании.
07.
Утонченность и простота данного портфолио точно приглянётся вам.
08.
Большие меню в виде изображений точно привлекут ваше внимание. Как вы видите, не очень традиционный способ разработки меню.
09.
Выпадающее меню, в котором используется 2 цвета, которые символизируют активный пункт меню и неактивный.
10.
Американский рекорд-лейбл Small Stone recordings использовали меню в виде радио, или же в виде Space Echo Roland SE-201.
11.
Нечто вроде карты, с помощью которой вы сможете «разведать» весь веб-сайт.
12.
Круглое меню в стиле Apple, в котором представлены приложения для iPhone.
13.
В Clearleft в качестве меню использовали нечто вроде календарика с запланированными заданиями.
14.
Выделенный пункт меню как будто находится в нажатом состоянии.
15.
Клик по пункту меню раскрывает дополнительное подменю. Меню выглядит вполне простым, хотя и окрашено в черный цвет.
16. .
В этом меню использован простой и приятный отличный эффект при наведении.
17.
Размер букв настолько мил и необычен, и именно это привлекает ваше внимание.
18.
Отличное решение по использованию блочной навигации, в которое реализован отличный эффект при наведении.
19.
Отличный зеленый цвет и вид меню в стиле листочков приглянуться вашему глазу. Также здесь реализован отличный эффект, который поможет вам определить, в каком подразделе вы находитесь в данный момент.
20.
Отличным концептом навигационного меню воспользовались дизайнеры веб-сайта Ronny Pries. Пользователи ориентируются по плану на полу.
21.
Еще одним креативным способом реализации навигационного меню является применение изображения фруктового дерева, посредством которого вы можете попасть в другие подразделы.
22.
Посмотрите, как креативно Мэтт Демпси (Matt Dempsey) использует мазки кисти.
23.
Отличный вариант реализации навигационного меню.
24.
Вертикальные вкладки, которые выглядят как папки, работающие непосредственно на веб-сайте. Очень редко используется данный способ, но отлично работает и выглядит.
25.
Навигационное меню, реализованное в стиле музыки панк-рок. Посмотрите, как Джефф Сармиенто (Jeff Sarmiento) реализовал данную идею.
26.
Нечто вроде иерархии. Еще один креативный способ реализации навигационного меню.
27.
Пиктограммы повышают чувство взаимодействия с меню.
Навигационные меню, разработанные с помощью технологии Flash
В данном меню навигации реализован очень интересный эффект при наведении курсора мыши.
29.
Навигация, которая позволяет вам производить некоторые настройки с помощью специальных ползунков.
30.
Интересное и привлекательное меню в стиле карт «Таро». Если вы кликните по карте, она тот час отправится в огонь.
31.
Жидкое навигационное меню, которое создаст у вас ощущение движения волн на озере.
32.
На сайте Nick Jones используется простое, но динамическое навигационное меню для перехода по портфолио.
33.
На сайте Marc Ecko нам представлена навигация в виде галереи изображений. Она позволяет посетителям пройтись по страницам искусства и философии.
34.
HBO представляет собой нечто вроде архива документов о фильмах. Посредством навигационного меню производится интерактивный выбор фильмов.
35. ?
Интересное навигационное меню с простым эффектом при наведении. Когда вы наводите курсор на пиктограмму, отображается содержимое меню.
36.
Дизайн-агентство по разработке навигационных меню, расположенное в Нью-Йорке и Форт-Лодердейле.
37.
Стильный дизайн навигации в стиле нео-древности с фоном в виде фресков.
38.
На сайте Nick Ad используется гибкое, но простое в использовании навигационное меню. Кликните в любую область на странице и увидите интересный эффект.
39.
Креативный человек использует собственные работы для привлечения посетителей в портфолио.
40. .
На сайте Section Seven реализовано интересное меню в стиле брошюры с подменю.
41.
Навигационное меню, которое открывается и закрывается при выборе определенных пунктов.
42.
На сайте Beside навигационное меню реализовано в стиле радуги.
43.
Концепт портфолио из картона. Очень интересный эффект при наведении.
44.
Маленькие кубики, сложенные вместе, выполняют роль навигационного меню.
45.
Насыщенная цветом карта с «призвуком» текстуры национальных гавайских тапочек, которыми гордится весь народ.
46.
Стол с вещами, символизирующими меню: телефон для контакта с администрацией, журнал для перехода в портфолио, газета для просмотра новостей и другое.
Очень интересно, когда в качестве навигации используются реальные вещи.
47.
Отличный творческий способ реализации навигационного меню. Каждый элемент по своему прекрасен, все они придают живости всему веб-сайту. Очень редко используют такие способы, но он действительно волшебный.
Меню навигации, разработанные при помощи технологии javascript
Простое и приятное для глаз меню навигации в разных цветах.
49.
Выглядит так, как будто меню реализовано при помощи Flask, но это не так. Опрятное, прикольное и стильное навигационное меню с эффектами при наведении курсора мыши.
Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню - раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту.
Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML .
Вертикальное меню
Первым шагом создания вертикального меню будет создание маркированного списка . Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором "navbar". Каждый элемент
нашего списка будет содержать по одной ссылке:
- Главная
- Новости
- Контакты
- О нас
Наша следующая задача заключается в сбросе стилей списка, установленных по умолчанию. Нам нужно убрать внешние и внутренние отступы у самого списка и маркеры у пунктов списка. Затем зададим нужную ширину:
#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; }
В своей работе, немало времени уделял разработке различных видов навигации для сайтов, как с применением , так и используя чистый стиль 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.
Перевод и адаптированная версия урока по созданию красивого, горизонтального меню в стиле "Lava-Lamp. В интернете представлено много версий меню выполненных в этом стиле, опираясь на полученные знания из урока, вы свободно сможете создать что нибудь свое индивидуальное.
На этом пока все. В этой подборке представлена лишь малая часть того, что можно сделать в плане создания красивых и индивидуальных, а главное функциональных меню навигации для ваших проектов. Надеюсь кто то найдет для себя подходящий вариан и использует его в своей работе по благоустройству сайта. Если кому понравилась статья, комментируйте, делитесь с друзьями через Твиттер, Google+ и другие соц. сервисы, а можно просто добавить статью в закладки
