Горизонтальное меню html: Горизонтальное меню для сайта

Содержание

Горизонтальное меню для сайта на HTML+CSS готовые шаблоны | Как создать красивое горизонтальное выпадающее меню с примером

Доброго времени суток, дорогие читатели. Сегодня мы разберем тему «как сделать горизонтальное меню используя HTML и CSS». Меню, как правило, находится в шапке сайта и является перечнем ссылок на самые важные страницы, его также называют главным меню. Данные ссылки пользователи будут постоянно нажимать. То, как вы их расположите и какой дизайн вы зададите меню будет влиять на поведение пользователей, конверсию, их общее впечатление от вашего сайта и, конечно, на seo-продвижение.

HTML-код для горизонтального меню

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

Для создания меню используют теги <ul>, <li> и <a>.

Если вам не совсем понятно, что такое эти html-теги, css, таблицы, то почитайте об основных технологиях для создания сайта.

Пример использования html тегов для создания меню в коде ниже:

<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Услуги</a></li>
<li><a href="#">Цены</a></li>
<li><a href="#">Контакты</a></li>
</ul>

Стандартные CSS стили для горизонтального меню

ul {
  list-style: none; /*убираем маркеры списка*/
  margin: 0; /*убираем отступы*/
  padding-left: 0; /*убираем отступы*/
}
a {
  text-decoration: none; /*убираем подчеркивание текста ссылок*/
}
li {
  float:left; /*Размещаем список горизонтально для реализации меню*/
  margin-right:5px; /*Добавляем отступ у пунктов меню*/
}

Мы получаем готовое верхнее меню в шапку, без каких-либо особых стилей и наворотов это можно назвать каркасом вашего будущего красивого меню. Если вы скопируете и поставите у себя данный html и css это будет выглядеть следующим образом.

Пример каркаса (шаблона) вашего будущего меню

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

Существует так же несколько других CSS методов используемых для того чтобы сделать меню горизонтальным помимо float:left;, например, display:inline-block; или display:flex;, но рекомендуется использовать способ описанный выше.

Давайте же наполним наш шаблон меню различными стилями и сделаем его красивым.

Примеры красивого горизонтального меню для сайта

Сейчас я приведу несколько готовых примеров с готовым дизайном горизонтального меню.

Все «красивости» вы можете создать для своего сайта сами, а не искать в интернете. Проще всего это сделать взяв за основу один из примеров ниже

Простое меню синего цвета с раздельными пунктами

CSS стили «верхнего» меню

Ниже расположены стили данного меню. HTML остается тем же, что и в «каркасе» меню.

ul {
  list-style: none; /*убираем маркеры списка*/
  margin: 0; /*убираем отступы*/
  padding-left: 0; /*убираем отступы*/
  margin-top:25px; /*делаем отступ сверху*/
}
a {
  text-decoration: none; /*убираем подчеркивание текста ссылок*/
  background:#30A8E6; /*добавляем фон к пункту меню*/
  color:#fff; /*меняем цвет ссылок*/
  padding:10px; /*добавляем отступ*/
  font-family: arial; /*меняем шрифт*/
  border-radius:4px; /*добавляем скругление*/
  -moz-transition: all 0.3s 0.01s ease; /*делаем плавный переход*/
  -o-transition: all 0.3s 0.01s ease;
  -webkit-transition: all 0.3s 0.01s ease;
}
a:hover {
  background:#1C85BB;/*добавляем эффект при наведении*/
}
li {
  float:left; /*Размещаем список горизонтально для реализации меню*/
  margin-right:5px; /*Добавляем отступ у пунктов меню*/
  
}

Главное меню, расположенное на цветной линии с красным фоном

CSS стили меню на цветной линии
ul {
  list-style: none; /*убираем маркеры списка*/
  margin: 0; /*убираем отступы*/
  padding-left: 0; /*убираем отступы*/
  margin-top:25px; /*делаем отступ сверху*/
  background:#FF4444; /*добавляем фон всему меню (заменив этот параметр, вы поменяете цвет всего меню)*/
  height: 50px; /*задаем высоту*/
}
a {
  text-decoration: none; /*убираем подчеркивание текста ссылок*/
  background:#FF4444; /*добавляем фон к пункту меню (заменив этот параметр, вы поменяете цвет всех пунктов меню)*/
  color:#fff; /*меняем цвет ссылок*/
  padding:0px 15px; /*добавляем отступ*/
  font-family: arial; /*меняем шрифт*/
  line-height:50px; /*ровняем меню по вертикали*/
  display: block; 
  border-right: 1px solid #F36262; /*добавляем бордюр справа*/
  -moz-transition: all 0.
3s 0.01s ease; /*делаем плавный переход*/ -o-transition: all 0.3s 0.01s ease; -webkit-transition: all 0.3s 0.01s ease; } a:hover { background:#D43737;/*добавляем эффект при наведении*/ } li { float:left; /*Размещаем список горизонтально для реализации меню*/ }

Выпадающее меню на HTML+CSS

Для реализации дополнительного выпадающего (раскрывающегося) меню на сайте у какого-либо пункта меню нам необходимо добавить дополнительный перечень пунктов в HTML-код для какой-либо ссылки из горизонтального меню и изменить стили CSS. В стилях мы будем применять простой трюк — изменение отображения раскрывающегося меню по средствам наведения на нужный нам пункт в верхнем меню. Для примера возьмем пункт «услуги».

Пример создания простого выпадающего меню

HTML код выпадающего меню
<ul>
    <li><a href="#">Главная</a></li>
    <li><a href="#">Услуги</a>
        <ul>
            <li><a href="#">Услуга 1</a></li>
            <li><a href="#">Длинная услуга 2</a></li>
            <li><a href="#">Услуга 3</a></li>
        </ul>
    </li>  
    <li><a href="#">Цены</a></li>
    <li><a href="#">Контакты</a></li>
</ul>
Стили CSS выпадающего меню
ul {
  list-style: none; /*убираем маркеры списка*/
  margin: 0; /*убираем отступы*/
  padding-left: 0; /*убираем отступы*/
  margin-top:25px; /*делаем отступ сверху*/
  background:#819A32; /*добавляем фон всему меню*/
  height: 50px; /*задаем высоту*/
}
a {
  text-decoration: none; /*убираем подчеркивание текста ссылок*/
  background:#819A32; /*добавляем фон к пункту меню*/
  color:#fff; /*меняем цвет ссылок*/
  padding:0px 15px; /*добавляем отступ*/
  font-family: arial; /*меняем шрифт*/
  line-height:50px; /*ровняем меню по вертикали*/
  display: block; 
  border-right: 1px solid #677B27; /*добавляем бордюр справа*/
  -moz-transition: all 0. 3s 0.01s ease; /*делаем плавный переход*/
  -o-transition: all 0.3s 0.01s ease;
  -webkit-transition: all 0.3s 0.01s ease;

}
a:hover {
  background:#D43737;/*добавляем эффект при наведении*/
}
li {
  float:left; /*Размещаем список горизонтально для реализации меню*/
  position:relative; /*задаем позицию для позиционирования*/
}
     
    /*Стили для скрытого выпадающего меню*/
    li > ul {
        position:absolute;
        top:25px;
        display:none;   
    }
     
    /*Делаем скрытую часть видимой*/
    li:hover > ul {
        display:block; 
        width:250px;  /*Задаем ширину выпадающего меню*/      
    }
   li:hover > ul > li {
        float:none; /*Убираем горизонтальное позиционирование*/
    }

А чтобы понять, какие именно у вас должны быть услуги и категории рекомендую ознакомиться с материалом: составление структуры и семантического ядра.

Я постарался максимально кратко рассказать вам о том как создать главное горизонтальное меню, сделать несколько шаблонов, как добавить к нему простые стили и сделать его симпатичнее, как сделать выпадающее меню для вашего сайта. Для удобства я собрал все меню, представленные выше, в одном html-файле, который вы можете скачать ниже. Выглядит это как на скриншоте: 

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

Благодарю за внимание.

Создаем выпадающее меню на чистом CSS

В сегодняшней статье я хотел бы рассказать, как создать на CSS2.1 и HTML выпадающее меню. Также я покажу один небольшой трюк, при помощи которого можно будет добавлять иконку «+» к элементам навигации в том случае, если в них скрыто выпадающее меню. Для этого мы воспользуемся псевдоэлементом :only-child.


Исходный код
Демо

Для начала мы создадим базовую структуру навигационного меню, состоящего из шести пунктов:

<nav>
			    <ul>
			        <li><a href="#">Home</a></li>
			        <li><a href="#">WordPress</a></li>
			        <li><a href="#">Graphic Design</a></li>
			        <li><a href="#">Inspiration</a></li>
			        <li><a href="#">Contact</a></li>
			        <li><a href="#">About</a></li>
			    </ul>
			</nav>

Далее нам нужно добавить базовые CSS-стили для HTML горизонтального меню. Я оставил комментарии к каждому блоку кода:

/* задаем цвет фона для контейнера nav. */
			nav {
			    margin: 100px 0;
			    background-color: #E64A19;
			}
			
			/* убираем отступы и поля, а также list-style для "ul", 
			 * и добавляем "position:relative" */
			nav ul {
			    padding:0;
			    margin:0;
			    list-style: none;
			    position: relative;
			    }
			
			/* применяем inline-block позиционирование к элементам навигации */
			nav ul li {
			    margin: 0px -7px 0 0;
			    display:inline-block;
			    background-color: #E64A19;
			    }
			
			/* стилизуем ссылки */
			nav a {
			    display:block;
			    padding:0 10px;
			    color:#FFF;
			    font-size:20px;
			    line-height: 60px;
			    text-decoration:none;
			}
			
			/* изменяем цвет фона при наведении курсора */
			nav a:hover {
			    background-color: #000000;
		}

После применения стилей у нас должно получиться нечто вроде этого:


Чтобы добавить выпадающий список к какому-либо из элементов HTML меню, нам нужно добавить <ul> внутрь элемента <li> для пункта, в котором нужно скрыть выпадающий список:
<nav>
			    <ul>
			        <li><a href="#">Home</a></li>
			        <li><a href="#">WordPress</a>
			
			            <!-- первый уровень выпадающего списка -->
			            <ul>
			                <li><a href="#">Themes</a></li>
			                <li><a href="#">Plugins</a></li>
			                <li><a href="#">Tutorials</a></li>
			            </ul>
			
			        </li>
			        <li><a href="#">Graphic Design</a></li>
			        <li><a href="#">Inspiration</a></li>
			        <li><a href="#">Contact</a></li>
			        <li><a href="#">About</a></li>
			    </ul>
		</nav>

Мы добавили новый неупорядоченный список с тремя пунктами списка внутрь второго элемента <li>, который отвечает за пункт меню WordPress.

Обратите внимание на то, что мы добавили <ul> после анкорного тега (<a>).

Теперь добавим CSS-стили, чтобы выпадающий список был скрыт по умолчанию, и появлялся, когда посетитель наводит курсор мыши на соответствующий родительский элемент HTML меню для сайта. После приведенного выше CSS-кода добавьте следующий фрагмент:

/* скрываем выпадающие списки по умолчанию
			 * и задаем абсолютное позиционирование */
			nav ul ul {
			    display: none;
			    position: absolute;
			    top: 100%;
			}
			
			/* отображаем выпадающий список при наведении */
			nav ul li:hover > ul {
			    display:inherit;
			}
			
			/* первый уровень выпадающего списка */
			nav ul ul li {
			    min-width:170px;
			    float:none;
			    display:list-item;
			    position: relative;
			}

Если до этого момента вы все делали правильно, то при наведении курсора на пункт меню «WordPress» должны увидеть выпадающий список с тремя другими пунктами («Themes», «Plugins», «Tutorials»):


Чтобы добавить выпадающие списки, состоящие из нескольких уровней, этот процесс нужно повторить. Определяем пункт меню, из которого нужно сделать выпадающий список, и добавляем новый <ul> между тегами <li></li>.

Взгляните на приведенный ниже HTML-код, в котором мы добавляем второй уровень выпадающего списка к пункту меню «Tutorial», который находится внутри пункта «WordPress»:

<nav>
			    <ul>
			        <li><a href="#">Home</a></li>
			        <li><a href="#">WordPress</a>
			
			            <!-- первый уровень выпадающего списка -->
			            <ul>
			                <li><a href="#">Themes</a></li>
			                <li><a href="#">Plugins</a></li>
			                <li><a href="#">Tutorials</a>
			
			                    <!-- второй уровень выпадающего списка -->
			                    <ul>
			                        <li><a href="#">Stuff</a></li>
			                        <li><a href="#">Things</a></li>
			                        <li><a href="#">Other Stuff</a></li>
			                    </ul>
			                    <!—конец второго уровня выпадающего списка -->
			
			                </li>
			            </ul>
			            <!—конец первого уровня выпадающего списка -->
			
			        </li>
			        <li><a href="#">Graphic Design</a></li>
			        <li><a href="#">Inspiration</a></li>
			        <li><a href="#">Contact</a></li>
			        <li><a href="#">About</a></li>
			    </ul>
		</nav>

Чтобы вертикальное меню HTML отображалось корректно, нужно добавить еще пару строк CSS кода:

/* второй, третий и последующие уровни 
			 * смещаем 2 и 3 уровни влево 
			 * на значение длины первого уровня. 
			*/
			nav ul ul ul {
			    position: absolute;
			    top:0;
			    left:100%;
		}

Если все сделано правильно, у вас должно получиться нечто вроде этого:


Этот процесс можно повторять, и добавлять новые уровни. Но не следует добавлять их к последнему элементу выпадающего списка, так как я сделал это лишь для примера.

Добавляем индикатор выпадающего списка

Перед тем, как сделать выпадающее меню в HTML до конца, разберемся с индикатором, который указывает на наличие выпадающего списка, прикрепленного к тому или иному пункту меню (знак «+»):

/* измените ' +' на любой другой символ, если нужно
	*/
			li > a:after { content:  ' +'; }
		li > a:only-child:after { content: ''; }

Для этого мы используем псевдоэлемент CSS3 (:only-child). В данном случае он проверяет, имеются ли в тегах <li> родительского элемента другие элементы. Если нет, то знак плюса просто убирается, так как по умолчанию он присутствует рядом со всеми пунктами. Видите + возле пунктов WordPress и Tutorials?


Значит, вы все сделали правильно.

В завершение

Многие для достижения подобного эффекта используют jQuery или другие библиотеки. Я считаю, что в этой статье приведен самый простой и легкий вариант. Но выбор за вами.

А как вы сделали меню на HTML? Пожалуйста, расскажите об этом в комментариях.

Данная публикация представляет собой перевод статьи «How to Create a Pure CSS Dropdown Menu» , подготовленной дружной командой проекта Интернет-технологии.ру

Большой обзор красивых многоуровневых меню с codepen / Блог компании mr. Gefest / Хабр

Хабр, привет!

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

Раньше я их выкладывал в группе продукта облачной IDE mr. Gefest, это были сборки из 5-8 решений. Но теперь у меня стало скапливаться по 15-30 скриптов в разных тематиках (кнопки, меню, подсказки и так далее).

Такие большие наборы следует показывать большему числу специалистов. Поэтому выкладываю их на Хабр. Надеюсь они будут Вам полезны.

В этом обзоре мы рассмотрим многоуровневые меню.

Flat Horizontal Navigation

Красивая навигационная панель с плавно появляющимся подменю. Код хорошо структурирован, используется js. Судя по использованным возможностям, работает в ie8+.
http://codepen.io/andytran/pen/kmAEy

Material Nav Header w/ Aligned Dropdowns

Адаптивная панель ссылок с двухколонным подменю. Все сделано на css и html. Применены css3 селекторы, которые не поддерживаются в ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ
 
Smooth Accordion Dropdown Menu

Стильное вертикальное меню с плавно раскрывающимися элементами. Используется transition, transform js-код.
http://codepen.io/fainder/pen/AydHJ
 
Pure CSS Dark Inline Navigation Menu

Темная вертикальная навигационная панель с иконками из ionicons. Применяется javascript. В ie8 скорее всего будет работать без анимации.
http://codepen.io/3lv3n_snip3r/pen/XbddOO
 
Pure CSS3 Mega Dropdown Menu With Animation

Стильное меню с двумя форматами вывода: горизонтальным и вертикальным. Используются иконки и css3-анимация. В ie8 точно будет ужасно выглядеть, но зато в других браузерах все круто.
Ссылка на вертикальную: http://codepen.io/rizky_k_r/full/sqcAn/
Ссылка на горизонтальную: http://codepen.io/rizky_k_r/pen/xFjqs
 
CSS3 Dropdown Menu

Горизонтальное меню с большими элементами и выпадающим списком ссылок. Чистый и минималистичный код без js.
http://codepen.io/ojbravo/pen/tIacg
 
Simple Pure CSS Dropdown Menu

Простое, но стильное горизонтальное меню. Используется font-awesome. Все работает на css и html, без js. В ie8 будет работать.
http://codepen.io/Responsive/pen/raNrEW
 
Bootstrap 3 mega-dropdown menu

Отличное решение для интернет-магазинов. Отображает несколько уровней категорий и большие изображения (например, товар по акции). В его основе лежит boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/
 
Flat Navigation

Стильная навигационная панель с плавным подменю. В старых браузерах отобразится с проблемами.
http://codepen.io/andytran/pen/YPvQQN
 
3D nested navigation

Горизонтальное меню с очень крутой анимацией без js!
http://codepen.io/devilishalchemist/pen/wBGVor
 
Responsive Mega Menu — Navigation

Горизонтальное адаптивное меню.  Выглядит неплохо, но мобильная версия немного "хромает". Используется css, html и js.
http://codepen.io/samiralley/pen/xvFdc
 
Pure Css3 Menu

Оригинальное меню. С простым и чистым кодом без js. Применяйте для "вау" эффектов.
http://codepen.io/Sonick/pen/xJagi
 
Full CSS3 Dropdown Menu

Красочное выпадающее меню с одним уровнем вложенности. Используются иконки из font-awesome, html и css.
http://codepen.io/daniesy/pen/pfxFi
 
Css3 only dropdown menu

Достаточно неплохое горизонтальное меню с тремя уровнями вложенности. Работает без js.
http://codepen.io/riogrande/pen/ahBrb
 
Dropdown Menus

Минималистичное меню с оригинальным эффектом появления вложенного списка элементов. Радует, что это решение тоже без javascript.
http://codepen.io/kkrueger/pen/qfoLa
 
Pure CSS DropDown Menu

Примитивное, но эффективное решение. Только css и html.
http://codepen.io/andornagy/pen/xhiJH
 
Pull Menu — Menu Interaction Concept

Интересный концепт меню для мобильного телефона. Я такого ещё не видел. Используется html, css и javascript.
http://codepen.io/fbrz/pen/bNdMwZ
 
Make Simple Dropdown Menu

Чистый и простой код, без js. В ie8 точно работать будет.
http://codepen.io/nyekrip/pen/pJoYgb
 
Pure CSS dropdown [work for mobile touch screen]

Решение неплохое, но слишком уж много используется классов. Радует, что нет js.
http://codepen.io/jonathlee/pen/mJMzgR
 
Dropdown Menu

Симпатичное вертикальное меню с минимальным javascript-кодом. JQuery не используется!
http://codepen.io/MeredithU/pen/GAinq
 
CSS 3 Dropdown Menu

Горизонтальное меню с дополнительными подписями может хорошо украсить Ваш сайт. Код простой и понятный. Javascript не применяется.
http://codepen.io/ibeeback/pen/qdEZjR
 
KVdKQJ (автор очень долго думал над названием)

Красивое решение с большим количеством кода (html, css и js). Придумано 3 формата подменю. Для интернет-магазинов решение хорошо подходит.
http://codepen.io/martinridgway/pen/KVdKQJ
 
CSS3 Menu Dropdowns (особенное решение)!

Темное горизонтальное меню с тринадцатью (13) вариантами анимации! Обязательно советую ознакомиться, пригодится в быту.
http://codepen.io/cmcg/pen/ofFiz
 
П.С.
Надеюсь, Вам понравилась сборка из 23 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
Всем приятной работы.

Простое и красивое горизонтальное выпадающее меню на CSS и HTML — Технический блог

Предлагаю, вашему вниманию простое и при этом красивое двухуровневое выпадающее горизонтальное меню на чистых CSS и HTML. Его код я собрал по крупицам и лично адаптировал при подготовке новой темы WordPress.

У меня на сайте оно выглядит так, при наведении мыши на пункт меню «О блоге» выпадает вертикальное подменю:

HTML код горизонтального выпадающего меню

Код горизонтального выпадающего меню выглядит так, это реальный пример взятый с одного из моих сайтов:


<nav role="navigation">
<ul>
  <li><a href="/">Главная</a></li>
  <li><a href="#">О блоге</a>
    <ul>
      <li><a href="/about">Об авторе</a></li>
      <li><a href="/history">История блога</a></li>
      <li><a href="/privacy-policy">Политика конфиденциальности</a></li>
      <li><a href="/disclaimer">Отказ от ответственности</a></li>
    </ul>
  </li>
  <li><a href="/sitemap">Карта сайта</a></li>
  <li><a href="/contact">Обратная связь</a></li>
</ul>
</nav>

Это классический вариант по структуре меню из комбинаций тегов UL и LI. Который встречается на большинстве сайтов в интернете, в том числе и WordPress.

CSS код стилей для горизонтального выпадающего меню


/*| Navigation |*/

nav{
background: #334; /* Задаем основной фон меню */
padding: 0 3%; /* Задаем внутренние отступы */
}

nav ul {
list-style: none; /* Убираем маркер для элементов списка */
}

nav ul li {
display:inline-block;/*Выстраиваем пункты меню в ряд по горизонтали */
}

nav ul li a {
display:block; /* Настраиваем оформление пунктов меню */
padding: 15px 20px;
font-size: .9em;
color: #eee;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
border-top: 1px solid #445;
}

nav ul li:hover {
background: #445; /* Меняем фон пункта меню при наведении указателя мыши */
}

nav ul li ul {
display: none; /* Прячем пункты выпадающего блока меню */
position:absolute;
background: #334; /* Задаем фон выпадающего блока меню */
}

nav ul li:hover ul {
display:block; /* Отображаем подменю при наведении мыши */
}

nav ul li ul li {
display:block; /* Выстраиваем по вертикали пункты выпадающего меню */
}

Выводы о реализации меню на CSS и HTML

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

Так же предложенное решение содержит минимум оформления и требует доработки под дизайн сайта, где оно будет внедряться.

Как сделать меню навигации в HTML и CSS для сайта

Автор статьи: admin

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

Также, перед тем как начать читать эту статью, рекомендуется сначала прочитать наш учебник по HTML и учебник по CSS.

Как сделать вертикальное меню:

Для начала разберём как сделать вертикальное меню в HTML и CSS, это самый просто тип, на подобие того что есть во ВКонтакте. Но для начала нужно сделать не большую HTML страницу.

<header>

    <h4>Header</h4>

</header>

<main>

    <nav>

        <ul>

            <li><a href="#">Главная</a></li>

            <li><a href="#">Новости</a></li>

            <li><a href="#">Игры</a></li>

            <li><a href="#">Продукты</a></li>

        </ul>

    </nav>

    <div>

        <h2>Content</h2>

    </div>

</main>

Тут всё понятно, единственное, что смущает, это тег <nav>, он нужен для обозначения, что внутри него будет меню навигации.

Примечание:

Тег <nav> нужно использовать для навигации, что бы лучше индексировался ваш сайт.

Теперь добавим в тег <nav> список <ul>, что бы сделать меню.

<ul>

    <li><a href="#">Главная</a></li>

    <li><a href="#">Новости</a></li>

    <li><a href="#">Игры</a></li>

    <li><a href="#">Продукты</a></li>

</ul>

Здесь не чего интересного нет, единственно, вместо решётки в атрибуте href, надо использовать ссылку на страницу, вот результат.

Как видите всё работает не так как нам надо, теперь с помощью CSS сделаем так, что бы меню стало с левого бока от контента.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

header {

  border: black 2px solid;

}

 

main nav {

  display: inline-block;

  width: 200px;

  border: black 2px solid;

  margin-right: 10px;

  padding: 10px 20px;

  float: left;

}

 

main nav ul {

  padding: 0;

}

 

main nav ul li {

  list-style-type: none;

}

 

main . content {

  display: inline-block;

  width: 500px;

  border: black 2px solid;

  float: left;

}

Как можете заметить для тега <nav> и <div> с классом «content», используем свойство display со значение «inline-block», то есть эти два блока принимают свойства как строчных, так и блочных элементов.

Также, каждый из этих блоков использует свойство float, оно нужно для выравнивания блоков, блочно строчного типа, более подробно по ссылки.

Примечание:

В современных проектах не используется блочно строчные элементы и float, сейчас используются FlexBox или Grid, но новичкам это стоит знать, поэтому в статье используются именно это.

Вот результат.

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

Как сделать горизонтальное меню:

Теперь перейдём к самому интересном, это то как сделать горизонтальное меню в HTML и CSS,  суть примерно такая же, как и с первым случаем, но тут буду уже использовать FlexBox.

Сначала надо внести изменения в HTML, мы просто перетащим навигацию в header.

<header>

    <h4>Header</h4>

    <nav>

        <ul>

            <li><a href="#">Главная</a></li>

            <li><a href="#">Новости</a></li>

            <li><a href="#">Игры</a></li>

            <li><a href="#">Продукты</a></li>

        </ul>

    </nav>

</header>

<main>

    <div>

        <h2>Content</h2>

    </div>

</main>

Просто перенесли всё навигацию на верх, теперь изменим CSS.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

header {

  border: black 2px solid;

}

 

header nav {

  width: 600px;

  border: black 2px solid;

  margin-right: 10px;

  padding: 10px 20px;

}

 

header nav ul {

  display: flex;

  justify-content: space-around;

  padding: 0;

}

 

header nav ul li {

  list-style-type: none;

}

 

main . content {

  border: black 2px solid;

}

Тут самое важное, это то, что для работы с FlexBox, нужно сделать значение свойства display, «flex», что и сделали для тега <ul>.

Дальше, после этого идёт свойство justify-content, которое нужно для определения пространства между дочерними блоками, в нашем случае принимает значение «space-around», что означает равномерное распределение пространства, вот результат.

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

Вывод:

В этой статье показали как сделать меню навигации в HTML и CSS, думаю вам было интересно и полезно, в одной из следующих статей, будет показываться как сделать выпадающее меню.

Подписываетесь на соц-сети:

Оценка:

Количество оценивших: 2
Средняя оценка: 3,00

Загрузка. ..

Также рекомендую:

Cоздание выпадающего меню на HTML и CSS просто

Автор статьи: admin

В этой статье мы разберём, как происходит создание выпадающего меню на HTML, CSS и JavaScript.

Также, если вы вообще не знаете как делать меню, то посмотрите статью: Меню навигации на HTML и CSS, там вы научитесь создавать простое меню навигации.

Создание горизонтального выпадающего меню:

Сперва на HTML и CSS сделаем выпадающее меню которое будет проявляться при наведении мышки, вот его HTML.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

<header>

    <nav>

        <ul>

            <li><a href="#">Главная</a></li>

            <li>Галерея

                <ul>

                    <li><a href="#">Машины</a></li>

                    <li><a href="#">Горы</a></li>

                    <li><a href="#">Компьютеры</a></li>

                </ul>

            </li>

            <li>О себе

                <ul>

                    <li><a href="#">Имя</a></li>

                    <li><a href="#">Аватарка</a></li>

                </ul>

            </li>

        </ul>

    </nav>

</header>

Тут всё как в обычном меню, если вы читали статью про то как сделать меню навигации, единственное что отмечу, это то, что обязательно меню должно находится в теги <nav>, для лучшей индексации.

Теперь перейдём к CSS, но сначала мы не будем делать прям выпадающие меню, оно просто при наведении мыши, будет просто появляться, вот и всё.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

html, body {

margin: 0;

padding: 0;

}

 

nav > ul {

display: flex;

margin: 0;

width: 100%;

background-color: green;

}

 

nav > ul > li {

margin-right: 20px;

}

 

li {

color: white;

list-style: none;

font-size: 20px;

}

 

li a {

color: white;

text-decoration: none;

}

 

li > ul{

display: none;

position: absolute;

background-color: tomato;

padding: 0;

}

 

li:hover > ul{

display: block;

}

В самом начале, мы убираем отступы со всего документа, чтобы, меню было чётко прибито ко краям страницы.

Дальше настраиваем внешний вид, делаем FlexBox и задаём отступы, самое главное, что нужно сделать, это тегам <ul>, которые находятся внутри тега <li>, сделать позиционирование absolute и добавить ему свойство display: none, что бы блок не показывался на экране.

Последнее важное изменение, это при наведении мышкой на <li>, внутри которого есть <ul>, он появлялся, вот что получилось.

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

Примечание:

Тут покажу только те селекторы, которые изменим, а не весь CSS, так как, там добавилось не много.


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

nav > ul {

display: flex;

margin: 0;

width: 100%;

height: 25px;

background-color: green;

}

 

li > ul{

position: absolute;

top: 40px;

visibility: hidden;

opacity: 0;

background-color: tomato;

padding: 0;

transition: 400ms;

}

 

li:hover > ul{

visibility: visible;

top: 25px;

opacity: 1;

}


В первом селекторе мы добавляем высоту, чтобы было проще менять позицию, во втором, добавляем позицию top равного 45 пикселем, также устанавливаем свойство visibility: hidden, которое отвечает за скрытие элемента, и opacity: 0, для прозрачности, значение ноль, означает что элемент полностью прозрачен.

В последнем селекторе который мы изменяем, который ещё отвечает за наведение мышки, убираем display и добавляем visibility: visible, для показа элемента, top равный 25 пикселям и opacity: 1, для полной не прозрачности.

Также появилось свойство transition, для плавных переходов, мы задаём ему время перехода 400 миллисекунды.

Вывод:

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

Подписываетесь на соц-сети:

Оценка:

(Пока оценок нет)

Загрузка...

Также рекомендую:

CSS Горизонтальная панель навигации


Горизонтальная панель навигации

Есть два способа создать горизонтальную панель навигации. Используя встроенные или плавающие элементов списка.

Элементы встроенного списка

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

  • как встроенный, в дополнение к "стандартному" коду с предыдущей страницы:

    Объяснение примера:

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

    Элементы плавающего списка

    Еще один способ создания горизонтальной панели навигации - разместить

  • элементы и укажите макет для ссылок навигации:

    Пример

    Ли {
    плыть налево;
    }

    а {
    дисплей: блок;
    отступ: 8 пикселей;
    цвет фона: #dddddd;
    }

    Попробуй сам "

    Объяснение примера:

    • поплавок: левый; - используйте float, чтобы элементы блока скользили рядом друг с другом
    • дисплей: блок; - Позволяет указать отступы (и высота, ширина, поля и т. д.если хотите)
    • отступ: 8 пикселей; - Поскольку блочные элементы занимают всю доступную ширину, они не могут плавать рядом друг с другом. Поэтому укажите отступы, чтобы они хорошо выглядят
    • цвет фона: #dddddd; - Добавить серый цвет фона к каждому элементу a

    Совет: Добавьте цвет фона в

      вместо каждого элемента , если хотите цвет фона на всю ширину:


      Примеры горизонтальной панели навигации

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

      Пример

      ul {
      list-style-type: none;
      маржа: 0;
      отступ: 0;
      переполнение: скрытый;
      цвет фона: # 333;
      }

      ли {
      плыть налево;
      }

      li a {
      дисплей: блок;
      белый цвет;
      выравнивание текста: по центру;
      отступ: 14 пикселей 16 пикселей;
      текст-оформление: нет;
      }

      / * Измените цвет ссылки на # 111 (черный) при наведении * /
      li a: hover {
      background-color: # 111;
      }

      Попробуй сам "

      Активная / текущая ссылка для навигации

      Добавьте «активный» класс к текущей ссылке, чтобы пользователь знал, на какой странице он находится:

      Ссылки с выравниванием по правому краю

      Выровнять ссылки по правому краю, перемещая элементы списка вправо ( float: right; ):

      Пример

      Попробуй сам "

      Разделители границы

      Добавьте свойство border-right в

    • , чтобы создать разделители ссылок:

      Пример

      / * Добавляем серую правую границу ко всем элементам списка, кроме последнего элемента (последний ребенок) * /
      li {
      граница справа: 1px solid #bbb;
      }

      li: last-child {
      border-right: нет;
      }

      Попробуй сам "

      Фиксированная панель навигации

      Сделать так, чтобы панель навигации оставалась вверху или внизу страницы, даже когда пользователь прокручивает страницу:

      Примечание: Фиксированное положение может некорректно работать на мобильных устройствах.

      Серая горизонтальная панель навигации

      Пример серой горизонтальной панели навигации с тонкой серой рамкой:

      Пример

      ul {
      border: 1px solid # e7e7e7;
      цвет фона: # f3f3f3;
      }

      li a {
      цвет: # 666;
      }

      Попробуй сам "

      Липкая панель навигации

      Добавить позиция: липкая; в

        , чтобы создать липкую панель навигации.

        Прикрепленный элемент переключается между относительным и фиксированным в зависимости от положения прокрутки.Он позиционируется относительно, пока не будет достигнута заданная позиция смещения во вьюпорте - затем он «застревает» на месте (например, position: fixed).

        Пример

        ul {
        position: -webkit-sticky; / * Safari * /
        положение: липкое;
        верх: 0;
        }

        Попробуй сам "

        Примечание. Internet Explorer не поддерживает фиксированное позиционирование. Safari требует -webkit- префикс (см. пример выше). Вы также должны указать по крайней мере один из верхний , правый , нижний или левый для липкое позиционирование для работы.


        Другие примеры

        Адаптивный Topnav

        Как использовать медиа-запросы CSS для создания адаптивной верхней навигации.

        Попробуй сам "

        Адаптивный Sidenav

        Как использовать медиа-запросы CSS для создания адаптивной боковой навигации.

        Попробуй сам "

        Html-код горизонтального меню - обновляется ежедневно в 2021 г.

        Коды купоновБесплатная доставка Amazon
        • Amazon Hunter
        Праздничные предложения
        • Черная пятница Купоны
        • Купоны на День подарков
        • Cyber ​​Monday Купоны
        • Купоны на День Благодарения
        Популярные категории
        • Автомобильная промышленность
        • Одежда
        • Принадлежности
        • Красота и уход за собой
        • Путешествия
        • Здоровье
        • Спортивные товары
        • Электроника
        • Образование и обучение
        • Домашние животные
        • Коды купонов
        • Бесплатная доставка
        • Amazon

          Amazon

          • Amazon Hunter
        • Праздничные предложения

          Праздничные предложения

          • Черная пятница Купоны
          • Купоны на День подарков
          • Cyber ​​Monday Купоны
          • Купоны на День Благодарения
        • Популярные категории

          Популярные категории

          • Автомобильная промышленность
          • Одежда
          • Принадлежности
          • Красота и уход за собой
          • Путешествия
          • Здоровье
          • Спортивные товары
          • Электроника
          • Образование и обучение

        Создание раскрывающегося меню навигации с помощью HTML5 и CSS3

        Есть несколько отличных решений для раскрывающихся меню навигации, например, плагин jquery superfish. Многие из них используют множество файлов и ресурсов для создания раскрывающихся списков, но иногда они вам не нужны. Я хочу показать вам, как создать собственное простое, но стильное раскрывающееся меню, используя новые теги HTML5 и прекрасные стили CSS3.

        Nav Menu (7554 загрузок)

        Раскрывающийся список, который мы собираемся создать, скрывается и открывается при наведении курсора, используя только CSS. Используя новые функции переходов CSS3, мы анимируем состояния наведения и раскрывающиеся списки. Эти эффекты действуют точно так же, как эффекты javascript, которые вы использовали.Структура файлов проста. Вам понадобятся файлы index.html и style.css для хранения стилей css.

        Вот предварительный просмотр того, что мы построим сегодня:

        Начнем со структуры HTML. Это головная часть:

        
         Раскрывающееся меню навигации HTML5 / CSS3 
        
        
        
        
         
        
        
        
        
         

        В основной части мы добавим html-код для навигационного меню. Каждый список ul внутри li представляет собой раскрывающееся меню. Я добавил «» к каждому родительскому li, чтобы показать иерархию. Код создает двойные кавычки под прямым углом к ​​элементу.

        
        
        
        
        
         

        Теперь стилизуем навигацию. Начнем со стилей для основной навигации. При желании стили для #nav id можно удалить. Они просто в центре меню. Вы можете изменить их, чтобы они соответствовали вашему дизайну.

        / * Основная навигация * /
        #nav {
        положение: относительное;
        ширина: 620 пикселей;
        маржа: 0 авто;
        маржа сверху: 50 пикселей;
        отступ: 10 пикселей;
        }
        
        ul # navigation {
        маржа: 0px авто;
        положение: относительное;
        плыть налево;
        граница слева: сплошной 1px # c4dbe7;
        граница справа: сплошной 1px # c4dbe7;
        }
        
        ul # navigation li {
        дисплей: встроенный;
        размер шрифта: 12 пикселей;
        font-weight: жирный;
        маржа: 0;
        отступ: 0;
        плыть налево;
        положение: относительное;
        граница сверху: сплошной 1px # c4dbe7;
        нижняя граница: 2px solid # c4dbe7;
        }
        
        ul # navigation li a {
        отступ: 10px 25px;
        цвет: # 616161;
        тень текста: 1px 1px 0px #fff;
        текстовое оформление: нет;
        дисплей: встроенный блок;
        граница справа: сплошной 1px #fff;
        граница слева: сплошной цвет 1px # C2C2C2;
        граница-верх: сплошной 1px #fff;
        фон: # f5f5f5;
        
        -webkit-transition: цвет 0. 2 с линейный, фон 0,2 с линейный;
        -moz-transition: цвет 0,2 с линейный, фон 0,2 с линейный;
        -o-переход: цветной 0,2 с линейный, фон 0,2 с линейный;
        переход: цветной 0,2 с линейный, фон 0,2 с линейный;
        }
        
        ul # navigation li a: hover {
        фон: # f8f8f8;
        цвет: # 282828;
        }
        
        ul # navigation li a.first {
        граница слева: 0 нет;
        }
        
        ul # navigation li a.last {
        граница справа: 0 нет;
        }
        
        ul # navigation li: hover> a {
        фон: #fff;
        }
        
         

        Обратите внимание, что ul # navigation li a имеет несколько стилей перехода.Они используются для создания приятного эффекта затухания при наведении курсора.

        Теперь стилизуем выпадающие меню:

        / * Выпадающая навигация * /
        ul # навигация li: hover> ul
        {
        / * эти 2 стиля очень важны,
        это те, которые заставляют раскрывающийся список появляться при наведении * /
        видимость: видимая;
        непрозрачность: 1;
        }
        
        ul # navigation ul, ul # navigation ul li ul {
        стиль списка: нет;
            маржа: 0;
            отступ: 0;
        / * следующие 2 стиля очень важны,
        это те, которые заставляют раскрывающийся список оставаться скрытым * /
            видимость: скрыта;
            непрозрачность: 0;
            позиция: абсолютная;
            z-индекс: 99999;
        ширина: 180 пикселей;
        фон: # f8f8f8;
        box-shadow: 1px 1px 3px #ccc;
        / * css3 переходы для плавного наведения * /
        -webkit-transition: непрозрачность 0. 2 с линейный, видимость 0,2 с линейный;
        -moz-transition: непрозрачность 0,2 с линейная, видимость 0,2 с линейная;
        -o-переход: непрозрачность 0,2 с линейная, видимость 0,2 с линейная;
        переход: непрозрачность 0,2 с линейная, видимость 0,2 с линейная;
        }
        
        ul # navigation ul {
            верх: 43px;
            слева: 1px;
        }
        
        ul # navigation ul li ul {
            верх: 0;
            слева: 181px; / * сильно связано с шириной: 180 пикселей; сверху */
        }
        
        ul # navigation ul li {
        ясно: оба;
        ширина: 100%;
        граница: 0 нет;
        нижняя граница: сплошной 1px # c9c9c9;
        }
        
        ul # navigation ul li a {
        фон: нет;
        отступ: 7px 15px;
        цвет: # 616161;
        тень текста: 1px 1px 0px #fff;
        текстовое оформление: нет;
        дисплей: встроенный блок;
        граница: 0 нет;
        плыть налево;
        ясно: оба;
        ширина: 150 пикселей;
        }
         

        Теперь меню стилизовано и процесс разработки завершен.Меню готово к использованию в ваших собственных проектах. При использовании CSS3, конечно, возникают проблемы с совместимостью IE с меню. Плавные эффекты, реализованные с помощью переходов CSS3, не работают в IE, но меню все еще работает и может быть надежной альтернативой меню javascript.

  • Оставить комментарий

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    © 2019 Штирлиц Сеть печатных салонов в Перми

    Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми.