Код меню для сайта html: Меню для сайта html и css горизонтальное
09.10.1973
Разное
Меню, пожалуйста | WebReference
Другой популярной частью сайтов является меню. В основном, это список элементов, которые представляют собой простые ссылки, ведущие на другие места сайта. Давайте реализуем меню! Мы начнём со следующего кода.
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Меню</title> <link rel="stylesheet" href="main.css" media="screen"> </head> <body> <nav> <ul> <li> <a href="index.html">Главная</a> </li> <li> <a href="training.html">Обучение</a> </li> <li> <a href="conferences.html">Конференции</a> </li> <li> <a href="about.html">О нас</a> </li> </ul> </nav> </body> </html>
Наше меню будет состоять из четырёх элементов:
- Главная
- Обучение
- Конференции
- О нас
Мы хотим, чтобы оно выглядело так.
Вы могли заметить, что мы добавили новые теги <nav>, <ul> и <li>.
<nav> используется для определения всех видов навигационных функций на сайтах, которые содержат ссылки на внутреннюю или внешнюю информацию. Размещение <nav> в коде говорит «всё внутри <nav> будет использоваться для навигации по сайту».
В <nav> мы вставили тег <ul> с несколькими тегами <li>. Тег <ul> представляет собой «неупорядоченный список» (как маркированный список), а теги <li> представляют каждый отдельный компонент этого списка (маркер). При создании сайтов неупорядоченный список часто будет наиболее разумным выбором, когда дело доходит до составления страницы с меню. На самом деле, меню это вариант списка ссылок, который был создан без заданного правила относительно порядка его элементов.
С помощью кода выше, который пока не завершён, наш список должен выглядеть следующим образом.
Вы, возможно, видели нечто подобное даже при создании текстового документа в редакторе, когда хотели сделать маркированный список. Без стилизации <ul>, однако, наш список просто начинается с точки. В отличие от этого наше меню может быть намного сложнее. Мы можем задать ему границы, цвет, фон и др. Каждая ссылка по умолчанию отображается синим цветом, как видно на рисунке выше.
Теперь попробуем изготовить более стильное меню через наш код CSS.
Как правило, мы начинаем с самого общего тега в HTML-коде, верно? В нашем случае код начинается с <nav>, поскольку он отвечает за наше меню. С этим тегом мало что можно сделать, поскольку данный тег напрямую не меняет внешний вид маркированного списка.
Следующий тег <ul> начинает список. Мы хотим, чтобы наш список выглядел немного иначе, чем по умолчанию. Самое главное — добавить новый фон.
nav ul { background-color: PaleVioletRed; }
Для цвета фона мы выбрали название PaleVioletRed. Перезагрузка страницы показывает наши изменения в результате добавления этого кода.
На самом деле мы применили цвет фона ко всем элементам <ul>. Это потому, что мы применяем его к тегам <nav> и <ul> с помощью следующего селектора.
nav ul {}
Теперь мы хотим избавиться от круглых чёрных точек в этом списке и сделать его более похожим на меню. Мы можем скрыть их благодаря свойству list-style, как показано ниже.
nav ul { background-color: PaleVioletRed; list-style: none; }
Установка list-style в значение none делает список без характерных маркеров.
Это выглядит гораздо лучше.
Широкая область цвета удивительно большая. Мы хотим немного урезать её, используя тот же пример, что с рамкой вокруг изображения (padding).
nav ul { background-color: PaleVioletRed; list-style: none; padding: 0; }
Как вы можете видеть ниже, выглядит это намного лучше, медленно приближаясь к прекрасной форме.
Теперь пришло время для работы с размерами. Наша навигация должна быть 200 пикселей в ширину.
nav ul { background-color: PaleVioletRed; list-style: none; padding: 0; width: 200px; }
В конце концов, мы добавим border к списку точно как на картинке. Это будет выражаться в сплошной линии толщиной 1 пиксель розового цвета.
nav ul { background-color: PaleVioletRed; list-style: none; padding: 0; width: 200px; border: 1px solid MediumVioletRed; }
Вот результат и это выглядит здорово!
С нашей прекрасной внешней рамкой. Пришло время построить каждый отдельный элемент списка, к которому можно обратиться с помощью такого селектора CSS.
nav ul li {}
Этот код ищет <nav>, затем внутри <ul> и <li>. Кажется, что каждому элементу в списке нужна своя граница.
nav ul li { border-bottom: 1px solid MediumVioletRed; }
С помощью этого кода мы добавили border-bottom, так что каждый элемент <li> теперь имеет такой же тип границы как у внешней рамки, но только в нижней части текста.
В настоящее время наше меню должно выглядеть так.
Теперь у нас две проблемы. Первая — пространство слева между границей и элементами списка. Изменим его, используя нашего знакомого padding.
nav ul li { border-bottom: 1px solid MediumVioletRed; padding: 5px; }
Это гораздо лучше, правда? Мы добавили padding шириной 5 пикселей между текстом и границами.
Наша вторая проблема менее заметна, но всё ещё существует в виде двойной линии в нижней части нашего меню. Это потому, что наша граница для меню добавилась к нашей границе для последнего элемента, когда мы вставили bottom-border. Помните, что мы использовали код в <ul> из <nav> для указания границы.
nav ul { background-color: PaleVioletRed; list-style: none; padding: 0; width: 200px; border: 1px solid MediumVioletRed; }
Также вспомним, что мы устанавливаем list-style в none так, что маркеры или любые другие знаки не появляются.
list-style: none;
Задав none в качестве значения мы отключаем свойство, так что оно не будет иметь никаких графических эффектов.
Проделаем то же самое, только с помощью свойства bottom-border и установив для него значение none. Однако мы хотим нацелиться только на последний пункт меню, чтобы его нижняя граница не конфликтовала с большой нижней границей.
nav ul li:last-child { border-bottom: none; }
Результат применения этого кода сверхэффективен.
Двойная граница исчезла, всё потому, что мы нашли <ul> в <nav>, а затем выбрали в нём последний <li> и отключили нижнюю границу. Псевдо-селектор last-child указывает на последний элемент списка.
nav ul li:last-child {}
Этот селектор можно перевести следующим образом:
«найдите <nav>, затем <ul> и примените все изменения к последнему элементу <li>».
Последнее, что нам нужно сделать, это настроить текст в ссылках. Вы можете создать ссылки в HTML следующим образом.
<a href="url">Набранный здесь текст ведёт на указанный веб-адрес</a>
Мы используем тег <a> вместе с атрибутом href. Значением этого атрибута должен быть адрес, на который вы хотите переместить пользователя, если он щёлкает по ссылке. В нашем примере у нас есть четыре ссылки. Одна из них выглядит так.
<a href="training.html">Обучение</a>
Это значит, что браузер будет показывать слово «Обучение», на которое можно щёлкнуть и затем браузер отправится на страницу, которая была сохранена в файле training.html.
Зная, что этот тег является частью кода HTML, мы можем создать специальный селектор, который ищет именно этот тег.
nav ul li a {}
Вуаля!
Давайте добавим новые свойства к нашему новому селектору. Прежде всего, изменим цвет шрифта на белый.
nav ul li a { color: white; }
Обновление браузера показывает наши новые изменения.
Отлично! Теперь у нас есть ссылки белого цвета. Изменим некоторые акценты. Браузер устанавливает выделение в CSS для всех ссылок в виде text-decoration: underline. Мы хотим изменить это значение, как мы уже делали это раньше со значением none.
nav ul li a { color: white; text-decoration: none; }
Красота! Мы завершили желаемое меню.
В качестве дополнительного замечания, если вы работаете с большим количеством ссылок, то, возможно, помните, что на многих страницах при наведении на ссылку текст подчёркивается.
Проверьте эту ссылку, которую я написал в своём Twitter (без подчёркивания).
При наведении указателя мыши на эту ссылку происходит нечто интересное, о чём многие интернет-пользователи хорошо знают — текст становится подчёркнутым.
Попробуем сделать нечто подобное в нашем меню, что позволит ссылке выделиться при наведении на неё. Мы будем использовать псевдо-селектор под названием hover.
nav ul li a:hover { text-decoration: underline; }
В этот раз мы добавили его к ссылкам <a>. Это означает, что при наведении указателя мыши на ссылку будет применяться эффект. Это также относится и к наведению на другие элементы.
div:hover li:hover img:hover
Эффект виден ниже, когда мы наводим курсор мыши на ссылку «Конференции».
В итоге, окончательный код CSS должен выглядеть так.
nav ul { background-color: PaleVioletRed; list-style: none; padding: 0; width: 200px; border: 1px solid MediumVioletRed; } nav ul li { border-bottom: 1px solid MediumVioletRed; padding: 5px; } nav ul li:last-child { border-bottom: 0; } nav ul li a { color: white; text-decoration: none; } nav ul li a:hover { text-decoration: underline; }
Недавно появившиеся псевдо-селекторы (last-child и hover) будут полезны в будущем.
В этой главе вы узнали, как использовать ссылки и вставлять их в HTML-документы. На данный момент мы использовали только адреса, ведущие на локальные файлы (например, training.html), сохранённые на вашем компьютере, но вы также можете использовать ссылки, указывающие на внешние сайты в Интернете, вроде этого.
<a href="http://twitter.com/varjs">Мой Twitter</a>
Этот код в браузере будет отображаться как Мой Twitter. Обратите внимание, что адрес содержит http:// в самом начале. Это правило говорит, что каждая ссылка используемая в HTML-документе и ведущая на другой сайт, должна быть с префиксом http://. В противном случае, ваши ссылки не будут перенаправлять пользователей в нужное место.
ссылки
списки
Автор: Дамиан Вельгошик
Последнее изменение: 11.08.2018
Редакторы: Влад Мержевич
Визуальный сайт в CSS3
Ctrl+←
Понимание селекторов CSS
Ctrl+→
Как сделать горизонтальное меню для сайта в HTML и CSS
Главная » HTML-CSS-JQUERY
HTML-CSS-JQUERY
На чтение 5 мин Просмотров 1. 7к. Опубликовано
Обновлено
В этой статье мы расскажем как сделать горизонтальное меню для сайта с помощью HTML и CSS. Обычно данное меню располагается в шапке на всех страницах сайта. Итак начнем)
HTML код горизонтального меню
Общепринятым считается создание меню с помощью стандартного списка с помощью тега <ul> обрамленного тегом <nav>. И так, создадим файл index.html и запишем в него следующий код:
<nav> <ul> <li><a href="">Страница-1</a></li> <li><a href="">Страница-2</a></li> <li><a href="">Страница-3</a></li> <li><a href="">Страница-4</a></li> <li><a href="">Страница-5</a></li> <li><a href="">Страница-6</a></li> <li><a href="">Страница-7</a></li> </ul> </nav>
Тег <nav> (от англ.
Navigation перевод: Навигация), который обрамляет наш список и в HTML верстке и указывает на блок с навигационным меню сайта.
Сохранив и открыв файл index.html в браузере мы увидим следующую картину:
Элементы меню стандартно расположились вертикально и у каждого элемента <li> появилась точка слева (так называемая маркером). Давайте оформим меню согласно нашим условиям.
Для того чтобы начать оформлять наше меню создадим файл style.css, куда мы будем вписывать код CSS. А в index.html пропишем путь до созданного файла style.css. Полный код HTML будет выглядеть следующим образом:
<!DOCTYPE html> <html lang="ru"> <head> <title>Sample</title> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <!-- Путь до нашего файла style.css --> </head> <body> <nav> <ul> <li><a href="">Страница-1</a></li> <li><a href="">Страница-2</a></li> <li><a href="">Страница-3</a></li> <li><a href="">Страница-4</a></li> <li><a href="">Страница-5</a></li> <li><a href="">Страница-6</a></li> <li><a href="">Страница-7</a></li> </ul> </nav> </body> </html>
Для начала нам необходимо добавить голубой фон нашему меню и сделать внутренние отступы по вертикали и горизонтали, чтобы текст ссылок не прилипал к краям нашего блока с меню. Открываем файл style.css и записываем следующий код:
nav { padding: 16px 0; background-color: #199BCA; }
В результате фон нашего меню стал голубым и появились внутренние отступы сверху, слева, справа и снизу.
Далее убираем маркеры в виде точек у тега <ul>, а также сбрасываем на ноль значения padding и margin, чтобы убрать лишние отступы у меню. И центрируем наш список по центру горизонтали.
nav ul { list-style-type: none; padding: 0; margin: 0; text-align: center; }
Ну и наконец выравниваем список меню по горизонтали с помощью display: inline-block. Делаем отступы слева для каждого элемента <li> с помощью margin-left: 10px. Для первого элемента <li> используем псевдокласс :first-child со значением margin-left 0px. Для более четкого восприятия ссылок сделаем все буквы и цифры строчными с помощью text-transform со значением uppercase.
nav ul li { display: inline-block; margin-left: 10px; text-transform: uppercase; } nav ul li:first-child { margin-left: 0px; }
А теперь немого приведем в порядок визуальное оформление горизонтального меню убрав нижнее подчеркивание и окрасим текст в белый цвет. Для этого тегу <a> применим следующие CSS свойства:
a { color: #fff; text-decoration: none; }
В результате получим окончательный пример меню:
Итог: в этой статье мы рассмотрели как сделать меню горизонтально с помощью CSS.
В следующей статье мы рассмотрим как сделать мобильное меню с помощью CSS и JQUERY
Панель навигации CSS
❮ Предыдущая Далее ❯
Демонстрация: Панели навигации
Вертикальная
- Главная
- Новости
- Контакт
- О
Горизонтальный
- Домашний
- Новости
- Контакт
- О
- Дом
- Новости
- Контакт
- О
Панели навигации
Удобная навигация важна для любого веб-сайта.
С помощью CSS вы можете превратить скучные HTML-меню в красивые панели навигации.
Панель навигации = Список ссылок
В качестве основы для панели навигации требуется стандартный HTML.
В наших примерах мы создадим панель навигации из стандартного HTML-списка.
Панель навигации — это, по сути, список ссылок, поэтому использование элементов
- и
- идеально подходит для
смысл:
Пример
Попробуйте сами »
Теперь давайте удалим маркеры, поля и отступы из списка:
Пример
ул. {
тип-стиля-списка: нет;
маржа: 0;
заполнение: 0;
}Попробуйте сами »
Объяснение примера:
-
тип-стиля-списка: нет;
— Удаляет пули.Панель навигации не требует маркеров списка
- Установить
поля: 0;
изаполнение: 0;
удалить настройки браузера по умолчанию
Код в приведенном выше примере является стандартным кодом, используемым как в вертикальных, так и в горизонтальных панелях навигации, о которых вы узнаете больше в следующих главах.
❮ Предыдущий Следующий ❯
НОВИНКА
Мы только что запустили
Видео W3SchoolsУзнать
ВЫБОР ЦВЕТА
КОД ИГРЫ
Играть в игру
Top Tutorials
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery900 Справочник
900 Справочник по HTML
7 Лучшие примеры
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
7 Лучшие примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQueryФОРУМ | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.
Copyright 1999-2022 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
Вертикальная панель навигации CSS
❮ Предыдущая Следующая ❯
Вертикальная панель навигации
- Главная
- Новости
- Контакт
- О
Чтобы построить вертикальную панель навигации, вы можете стилизовать элементы внутри списка, в дополнение к коду с предыдущей страницы:
Пример
li a {
дисплей: блок;
ширина: 60 пикселей;
}Попробуйте сами »
Объяснение примера:
-
display: block;
— Отображение ссылок в виде блочных элементов делает все область ссылки кликабельна (не только текст), и это позволяет нам указать ширину (и отступы, поля, высота и т. д., если хотите) -
ширина: 60 пикселей;
— Блочные элементы занимают всю доступную по умолчанию ширину. Мы хотим указать ширину 60 пикселей
Вы также можете установить ширину
- и удалить ширину ,
так как они будут занимать всю доступную ширину при отображении в виде блочных элементов.
- Дом
- Новости
- Контакт
- О
- Домашняя страница
- Новости
- Контакт
- О
- или для центрирования ссылок.
Добавьте свойство
border
в- добавить границу вокруг панели навигации. Если вы также хотите
границы внутри панели навигации, добавьте
- , кроме
последний:
- Дом
- Новости
- Контакт
- О
Пример
ul {
граница: 1 пиксель сплошная # 555;
}li {
text-align: center;
нижняя граница: 1px сплошная #555;
}li:последний ребенок {
нижняя граница: нет;
}Попробуйте сами »
Полноразмерная фиксированная вертикальная панель навигации
Создание полноразмерной «липкой» боковой панели навигации:
Пример
ul {
list-style-type: none;
маржа: 0;
заполнение: 0;
ширина: 25%;
background-color: #f1f1f1;
высота: 100 %; /* Полная высота */
position: fixed; /* Сделайте так, чтобы он оставался даже при прокрутке */
переполнение: авто; /* Включить прокрутку, если в боковой панели слишком много контента */
}Попробуйте сами »
Примечание: Этот пример может некорректно работать на мобильных устройствах.
❮ Предыдущий Далее ❯
НОВИНКА
Мы только что запустили
Видео W3SchoolsУзнать
ВЫБОР ЦВЕТА
КОД ИГРЫ
Играть в игру
Top Tutorials
Учебник HTML
Учебник CSS
Учебник JavaScript
Учебник How To
Учебник SQL
Учебник Python
Учебник по W3.CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQueryОсновные ссылки
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQueryTop8 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.
border-bottom
ко всем элементам - , кроме
последний:
Это даст тот же результат, что и в предыдущем примере:
Пример
ул {
тип стиля списка: нет;
маржа: 0;
заполнение: 0;
ширина: 60 пикселей;
}ли а {
дисплей: блок;
}Попробуйте сами »
Примеры вертикальной панели навигации
Создайте базовую вертикальную панель навигации с серым фоном и изменить цвет фона ссылок, когда пользователь наводит курсор мыши им:
Пример
ul {
тип-стиля-списка: нет;
маржа: 0;
заполнение: 0;
ширина: 200 пикселей;
background-color: #f1f1f1;
}li a {
дисплей: блокировать;
цвет: #000;
отступ: 8 пикселей 16 пикселей;
text-decoration: нет;
}/* Изменить цвет ссылки при наведении */
li a:hover {
цвет фона: #555;
цвет: белый;
}Попробуйте сами »
Активная/текущая навигационная ссылка
Добавить «активный» класс к текущей ссылке, чтобы пользователь знал, на какой странице он находится:
Пример
.
active {
background-color: #04AA6D;
белый цвет;
}Попробуйте сами »
Центрирование ссылок и добавление границ
Добавьте
text-align:center
в -
Leave a Comment