Как сделать навигацию html. Создание панели навигации. Инструменты для создания панели навигации

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

Примечание: результат урока полноценно работает в браузерах, поддерживающих CSS3.

Разметка HTML

Для каждого отдельного слайда, который будет содержать либо набор ссылок, либо информацию, либо подслайд, создадим элемент div с классом cn-slide . Для подслайдов, которые содержат две ссылки в строке, будем использовать другой класс cn-slide-sub . Слайд с информацией просто будет иметь класс cn-slide .

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

Описание

Философоия

Назад

Эпистемология

Назад

Текст...

Держите левую клавишу, чтобы увидеть фон

Метафизика

. . .

Эстетика

. . .

Этика

. . .
. . .

Подслайды и слайды с информацией содержат ссылки на предыдущий слой.

CSS

Основной контейнер имеет свойства min-width и max-width , которые позволяют нам использовать для задания ширины проценты в условиях ганатии, что элемнет не станет слишком большим или маленьким:

Cn-container{ width: 60%; min-width: 300px; max-width: 820px; margin: 10px auto 0 auto; text-align: left; position: relative; }

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

Cn-container h2{ font-family: "PT Sans Narrow", "Arial Narrow", Arial, sans-serif; font-variant: small-caps; font-weight: 700; color: #fff; position: absolute; z-index: 1000; text-shadow: 0 0 1px rgba(255,255,255,0.8), 1px 1px 1px rgba(0,0,0,0.2); font-size: 80px; line-height: 80px; top: 0px; right: 200px; white-space: nowrap; opacity: 0; -webkit-transition: all 0.3s linear 0.4s; -moz-transition: all 0.3s linear 0.4s; -o-transition: all 0.3s linear 0.4s; -ms-transition: all 0.3s linear 0.4s; transition: all 0.3s linear 0.4s; } .cn-container .cn-slide:target h2{ right: 0px; opacity: 1; }

Слайды также позиционируются абсолютно. Начальная непрозрачность слайдов устанавливается равной 0. Они выводятся только тогда, когда являются целью:

Cn-slide{ text-align: center; position: absolute; left: -100%; padding-top: 80px; margin: 0 5%; width: 90%; opacity: 0; -webkit-transition: left 0.4s linear, opacity 0.4s linear; -moz-transition: left 0.4s linear, opacity 0.4s linear; -o-transition: left 0.4s linear, opacity 0.4s linear; -ms-transition: left 0.4s linear, opacity 0.4s linear; transition: left 0.4s linear, opacity 0.4s linear; } .cn-slide:target{ left: 0px; opacity: 1; }

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

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

Cn-slide nav a{ text-align: left; display: block; font-family: "PT Sans Narrow", "Arial Narrow", Arial, sans-serif; font-variant: small-caps; font-weight: 700; border: 8px solid #fff; padding: 2%; font-size: 66px; letter-spacing: 7px; text-shadow: 0px 0px 10px rgba(255,255,255,0.9); color: rgba(255,255,255,0.1); line-height: 66px; margin: 0 0 10px 0; outline: none; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); background: #fff url(../images/1.jpg) no-repeat center center; -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; background-clip: padding-box; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .cn-slide nav a:hover{ box-shadow: 1px 3px 7px rgba(0,0,0,0.25); text-shadow: 1px 1px 1px rgba(0,0,0,0.1); color: rgba(255,255,255,0.9); }

Cn-slide-sub nav a{ width: 42%; display: inline-block; font-size: 40px; }

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

Cn-slide-sub nav a:nth-child(odd){ margin-right: 5px; }

Слайд с информацией является конечной точкой переходов:

Cn-content{ background: #80B8CE url(../images/1.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; text-align: left; padding: 20px 20px 5px; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); border: 8px solid #fff; margin-top: 5px; cursor: pointer; }

Каждая область с содержанием соответствует блоку ссылки. Фоновое изображение будет установлено позже:

Параграф также будет иметь переходы. С помощью псевдо-класса :active мы даем возможность пользователю посмотреть на фон, удерживая левую клавишу мыши.

Cn-content:active p{ opacity: 0; } .cn-content p{ line-height: 24px; text-shadow: 1px 1px 1px rgba(255,255,255,0.9); color: rgba(103,59,77,0.9); padding: 15px 20px; margin-bottom: 10px; background: rgba(255,255,255,0.96); font-style: italic; border-top: 7px solid rgba(103,59,77,0.6); -webkit-transition: opacity 0.3s linear; -moz-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; -ms-transition: opacity 0.3s linear; transition: opacity 0.3s linear; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

Стрелка возврата выскальзывает слева. Сначала она имеет положение -100px, а при активации слайда выдвигается в положение 3px:

Cn-back{ outline: none; text-indent: -9000px; width: 49px; height: 42px; background: transparent url(../images/arrow.png) no-repeat center center; position: absolute; top: 22px; left: -100px; cursor: pointer; opacity: 0; -webkit-transition: all 0.4s ease-in-out 0.5s; -moz-transition: all 0.4s ease-in-out 0.5s; -o-transition: all 0.4s ease-in-out 0.5s; -ms-transition: all 0.4s ease-in-out 0.5s; transition: all 0.4s ease-in-out 0.5s; } .cn-slide:target .cn-back{ left: 3px; opacity: 1; }

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

/* Основные пункты */ .cn-slide nav a{ background-image: url(../images/1.jpg); } .cn-slide nav a{ background-image: url(../images/2.jpg); } .cn-slide nav a{ background-image: url(../images/3.jpg); } /* Пункты и подпункты для слайда 1*/ .cn-slide nav a, #slide-1-1 .cn-content { background-image: url(../images/4.jpg); } .cn-slide nav a, #slide-1-2 .cn-content { background-image: url(../images/5.jpg); } .cn-slide nav a, #slide-1-3 .cn-content { background-image: url(../images/6.jpg); } .cn-slide nav a, #slide-1-4 .cn-content { background-image: url(../images/7.jpg); } /* Пункты и подпункты для слайда 2*/ .cn-slide nav a, #slide-2-1 .cn-content { background-image: url(../images/8.jpg); } .cn-slide nav a, #slide-2-2 .cn-content { background-image: url(../images/9.jpg); } .cn-slide nav a, #slide-2-3 .cn-content { background-image: url(../images/10.jpg); } .cn-slide nav a, #slide-2-4 .cn-content { background-image: url(../images/11.jpg); } /* Пункты и подпункты для слайда 3*/ .cn-slide nav a, #slide-3-1 .cn-content { background-image: url(../images/12.jpg); } .cn-slide nav a, #slide-3-2 .cn-content { background-image: url(../images/13.jpg); } .cn-slide nav a, #slide-3-3 .cn-content { background-image: url(../images/14.jpg); } .cn-slide nav a, #slide-3-4 .cn-content { background-image: url(../images/15.jpg); }

В завершение определяем несколько медиа запросов для формирования шаблона на маленьких размерах экрана. Лучше всего определить точки разлома шаблона и установить для них правила изменения. В нашем случае таких точек две: 1060 px и 900 px. Изменим размер шрифта, а в подслайдах дуем использовать только один элемент в строке.

@media screen and (max-width: 1060px){ .cn-slide-sub nav a{ font-size: 28px; } } @media screen and (max-width: 900px){ .cn-container h2{ font-size: 48px; line-height: 95px; } .cn-slide nav a{ font-size: 38px; } .cn-slide-sub nav a{ width: auto; font-size: 36px; display: block; } .cn-slide-sub nav a:nth-child(odd){ margin-right: 0px; } }

От автора: приветствую вас на нашем блоге о сайтостроении. Это цикл статей, посвященный новой спецификации и сегодня я бы хотел вам рассказать, как сделать в 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

Последнее обновление: 27.04.2016

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

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

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

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

Панель навигации в HTML5

После установки свойства display: block мы можем определить у блока ссылки ширину, отступы и т.д.

Горизонтальное меню

Для создания горизонтального меню есть два метода. Первый заключается в применении свойства float и создании из ссылок плавающих элементов, которые обтекают друг друга с слева. И второй способ состоит в создании строки ссылок с помощью установки свойства display: inline-block .

Использование float

Алгоритм создания панели навигации с помощью float разделяется на два этапа. На первом этапе у элемента li , в который заключена ссылка, устанавливается float: left; . Это позволяет расположить все элементы списка в ряд при достаточной ширине, когда правый элемент списка обтекает левый элемент списка.

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

Панель навигации в HTML5

inline и inline-block

Для создания горизонтальной панели навигации нам надо сделать каждый элемент li строчным, то есть установить для него display: inline . После этого для элемента ссылки, которая располагается в элементе li , мы можем установить display: inline-block:

Панель навигации в HTML5

Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню - раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью 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; }

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

    Создание навигации

    Что такое навигация? Это набор ссылок, зачастую упорядоченных и сгруппированных по смыслу. Навигационное меню часто создается с использованием HTML-тега списка