Создаем горизонтальное меню CSS
0 ∞
В этой статье мы рассмотрим, как создать горизонтальное меню для сайта с помощью HTML и CSS. Чтобы получить интерактивное меню, нужно использовать JQuery, HTML 5 и CSS3.
Для написания сценария можете использовать любой HTML редактор, но не забудьте сохранить файл с расширением .HTML.
Шаг 1: Откройте любой HTML — редактор и напишите код HTML с элементами списка ul-li и сохраните файл с расширением .html:
<html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ /> <title>Horizontal CSS Menu Bar</title> <body> <ul id=”menu”> <li><a href=”#”>Link1</a></li> <li><a href=”#”>Link2</a> <ul> <li><a href=”#”>Link2.1</a></li> <li><a href=”#”>Link2.2</a></li> <li><a href=”#”>Link2.3</a></li> </ul> </li> <li><a href=”#”>Link3</a> <ul> <li><a href=”#”>Link3.1</a></li> <li><a href=”#”>Link3.2</a></li> </ul></li> <li><a href=”#”>Link4</a></li> </ul> </body> </html>
Теперь, если вы откроете эту HTML — страницу в браузере, она будет выглядеть, как показано ниже. Далее мы добавим CSS код для позиционирования горизонтального меню с подменю для сайта.
• Link1
• Link2
o Link2.1
o Link2.2
o Link2.3
• link3
o Link3.1
o Link3.2
• link4
Шаг 2: Здесь мы добавляем CSS в HTML разметку. Этот тип CSS кода называется внутренним. Во внешнем CSS мы размещаем код в отдельном файле, сохраняя его с расширением .
css и подключая на странице HTML. Преимущество использования внешнего CSS заключается в его многократном использовании. Чтобы сделать его проще, мы добавили внутренний CSS. Для этого разместите тег <style> под head в HTML и напишите CSS код внутри блока <style>. Для начала мы добавим несколько основных свойств, чтобы установить ширину, высоту, цвет фона:<style> /* Main */ #menu{ width: 100%; margin: 0; padding: 10px 0 0 0; list-style: none; background: #111; } </style>
После добавления CSS:
Шаг 3: Теперь закруглите угол, чтобы придать ему красивый внешний вид. Для этого используйте свойство CSS border-radius и установите значение 50px:
#menu{ width: 100%; margin: 0; padding: 10px 0 0 0; list-style: none; background: #111; border-radius: 50px; }
После добавления CSS:
Он выглядит лучше, правда?
Шаг 4: Теперь упорядочим структуру будущего горизонтального резинового меню для сайта. Все элементы ‘li’ будут находиться в одной строке, а все элементы ‘ul’ будут располагаться ниже:
#menu li{ float: left; padding: 0 0 10px 0; position: relative; }
После добавления CSS:
Шаг 5: Настроим свойства для тега ‘a’ (при наведении курсора мыши) такие как цвет, оформления текста, шрифт:
#menu a{ float: left; height: 25px; padding: 0 25px; color: #CC6600; font: bold 12px/25px Arial, Helvetica; text-decoration: none; text-shadow: 0 1px 0 #000; }
После добавления CSS:
Шаг 6: Добавьте еще одно свойство, чтобы цвет ссылок изменялся при нажатии:
#menu li:hover > a{ color: #CC3333; }
Шаг 7: Теперь добавьте два CSS блока для элементов ‘ul’. Первый блок будет скрывать все элементы ‘ul’, также необходимо задать такие свойства отображения как цвет, внутренний отступ, позиция. Второй блок — для отображения всех элементов ‘ul’ при наведении курсора мыши на элементы ‘li’:
#menu ul{ list-style: none; margin: 0; padding: 0; display: none; position: absolute; top: 35px; left: 0; background: #222; } #menu li:hover > ul{ display: block; }
После добавления CSS:
Шаг 8: Установите padding (внутренний отступ) 0, margin (внешний отступ) 0 для всех элементов, чтобы многоуровневое горизонтальное меню для сайта лучше смотрелось:
#menu ul li{ float: none; margin: 0; padding: 0; display: block; }
Шаг 9: Установите свойства для всех элементов ‘а’, которые располагаются под тегом ‘ul’:
#menu ul a{ padding: 10px; height: auto; line-height: 1; display: block; white-space: nowrap; float: none; text-transform: none; }
Шаг 9: Добавьте еще несколько строк, чтобы улучшить визуальные эффекты оригинального горизонтального меню для сайта, установите правильный размер шрифта для черного фона:
#menu:after{ visibility: hidden; display: block; font-size: 0; content: ” “; clear: both; height: 0; }
После добавления CSS:
На этом все. Мы успешно создали горизонтальное меню. Теперь добавим еще несколько строк, чтобы придать нашей панели меню более профессиональный вид.
Дополнительный шаг 1: Для отображения указателя под выделенной ссылкой добавьте код, представленный ниже:
#menu ul li:first-child a:after{ content: ”; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #FF0000; }
После добавления CSS:
Дополнительный шаг 2: Установите свойство border-radius 5px под элементом ‘#menu ul’, который придаст небольшое закругление для всех тегов ul:
border-radius: 5px;
После добавления CSS:
Мы могли бы добавить еще больше свойств, чтобы придать меню более профессиональный вид. Но это наше первое горизонтальное меню для сайта, поэтому не будем усложнять его. Если у вас есть какие — либо вопросы, задайте их нам.
ВЛВиктория Лебедеваавтор-переводчик статьи «Create horizontal menu bar using HTML and CSS»
Как создать меню с горизонтальной прокруткой
schoolsw3. com
САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ
❮ НазадВперед ❯
Узнать, как создать горизонтальное прокручиваемое меню с помощью CSS.
Меню с горизонтальной прокруткой
ГлавнаяНовостиКонтактО НасПоддержкаБлогИнструментыОсноваЗаказыБольшеЛоготипДрузьяПартнерыЛюдиРабота
Редактор кода »
Создать меню с горизонтальной прокруткой
Шаг 1) Добавить HTML:
Пример
<div>
<a href=»#home»>Главная</a>
<a href=»#news»>Новости</a>
<a href=»#contact»>Контакт</a>
<a href=»#about»>О Нас</a>
…
</div>
Шаг 2) Добавить CSS:
Трюк, чтобы сделать навигационную панель прокручиваемой с помощью overflow:auto
и white-space: nowrap
:
Пример
div.scrollmenu {
background-color: #333;
overflow: auto;
white-space: nowrap;
}
div. scrollmenu a {
display: inline-block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}
div.scrollmenu a:hover {
background-color: #777;
}
Редактор кода »
Совет: Зайдите на наш учебник CSS Навигации, чтобы узнать больше о навигационных панелях.
❮ НазадВперед ❯
ВЫБОР ЦВЕТА
ТОП Учебники
HTML УчебникCSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3.CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник
ТОП Справочники
HTML СправочникCSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3.CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник
ТОП Примеры
HTML ПримерыCSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3. CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры
Форум | О SchoolsW3
SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.
Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от SW3.CSS.
Как создать горизонтальную панель навигации в HTML и CSS?
головка > |
Горизонтальная строка меню в HTML
В HTML у нас есть другой набор функций для использования выделенных и более привлекательных для пользователя. Мы уже обсуждали в предыдущей статье полосы прокрутки, например, то же самое в строках меню также имеет некоторые дополнительные возможности, предоставляемые пользователю. Как правило, строка меню помогает классифицировать содержимое и повышает удобочитаемость веб-страницы. Чтобы стать более интерактивным в строке меню пользователя, вам поможет самый простой способ. Полосы прокрутки имеют как горизонтальные, так и вертикальные типы, такие же, как и в полосах меню, а также обе вещи, которые должны использоваться разработчиками. Мы увидим некоторые подробности в приведенных ниже концепциях.
Синтаксис:
При использовании горизонтальных/вертикальных строк меню мы должны использовать CSS для отражения стилей во всех частях HTML-страниц. Как правило, панели навигации нуждаются в некотором стандартном HTML в качестве основы для реализации дочерних или производных документов. Панели навигации или горизонтальные панели содержат в основном список ссылок, поэтому использование элементов
- является синтаксисом для приведенных ниже основ.
<стиль> ул { } li имя_переменной: hover { } стиль> <тело> <ул>
Приведенный выше код представляет собой основной синтаксис горизонтальной строки меню.
Примеры горизонтальной строки меню в HTML
Мы рассмотрели несколько примеров для лучшего понимания концепций.
Пример №1
Код:
<голова> <стиль> ул { поле: 5; набивка: 5; цвет фона: зеленый; } ли { плыть налево; } ли v { белый цвет; выравнивание текста: по центру; набивка: 5; } жить v:наведите { цвет фона: #111; } .актив { цвет фона: зеленый; } стиль> голова> <тело> <ул>
Пример вывода:
В приведенном выше примере мы будем отображать элементы меню в горизонтальном виде при создании веб-страницы. Как правило, мы видим только элементы меню в горизонтальной панели, потому что здесь отображается настраиваемый пользователем вид. является строковым, поэтому мы будем использовать горизонтальный мудрый. Один и тот же класс стилей CSS доступен для всех документов HTML.
Пример #2
Код:
<тело> <р> Главная О нас Контакт тело>
Пример вывода:
Второй пример аналогичен первому, но здесь мы не будем использовать стили CSS в документах HTML. Тег
мы будем использовать некоторые стили CSS, такие как семейства шрифтов, ширина, высота и т.д.
Пример #3
Код:
<голова> <стиль> ул { поле: 5; набивка: 5; цвет фона: #333; } ли { плыть налево; } ли v { белый цвет; выравнивание текста: по центру; набивка: 5; } li v:hover:not(.active) { цвет фона: #111; } .актив { цвет фона: #4CAF50; } стиль> голова> <тело> <ул>
Пример вывода:
Некоторые бесплатные типы горизонтального меню:
Каждая функция представляет собой несколько наборов для различных сценариев. Что-то в горизонтальных меню было чистым CSS, а также они будут использовать javascript, чтобы убедиться, что они отзывчивы и работают на мобильных устройствах.
Некоторые горизонтальные навигаторы работают отлично, а некоторые функции не поддерживаются в сценариях, а также возникают проблемы с совместимостью браузера. В дизайне веб-сайтов горизонтальная панель отлично подходит для минималистического вида, а также хорошо работает, чтобы предоставить пользователю простое пространство интерфейса навигации.
Отзывчивое горизонтальное меню навигации в оранжевом цвете:
Это один из типов горизонтального меню, это легкое, минималистичное меню с полностью чистыми стилями CSS. Меню также отзывчиво и трансформируется в вертикальный тип меню на мобильном устройстве, поддерживает просмотр на маленьких экранах для использования мобильных устройств. На рабочем столе они ничего не изменят, он будет работать только на экранах веб-браузера, а также на мобильных телефонах.
Пример:
<голова> <скрипт src="script.js"> голова> <тело> <дел> <ул>