Содержание

Создание меню с помощью CSS и HTML

Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню — раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML.

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

Первым шагом создания вертикального меню будет создание маркированного списка. Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором «navbar». Каждый элемент <li> нашего списка будет содержать по одной ссылке:


<ul>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">Контакты</a></li>
  <li><a href="#">О нас</a></li>
</ul>

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


#navbar {
  margin: 0;
  padding: 0;
  list-style-type: none;
  width: 100px;
}

Теперь пришло время стилизовать сами ссылки. Мы добавим к ним фоновый цвет, изменим параметры текста: цвет, размер и насыщенность шрифта, уберем подчеркивание, добавим небольшие отступы и переопределим отображение элемента <a> со строчного на блочный. Дополнительно были добавлены левая и нижняя рамки к пунктам списка.

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


#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;
}

Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      #navbar {
        margin: 0;
        padding: 0;
        list-style-type: none;
        width: 100px;
      }
      #navbar li {
        border-left: 10px solid #666;
        border-bottom: 1px solid #666;
      }
	  #navbar a {
        background-color: #949494;
        color: #fff;
        padding: 5px;
        text-decoration: none;
		font-weight: bold;
        border-left: 5px solid #33ADFF;
		display: block;
      }
    </style>
  </head>

  <body>
  
    <ul>
      <li><a href="#">Главная</a></li>
      <li><a href="#">Новости</a></li>
      <li><a href="#">Контакты</a></li>
      <li><a href="#">О нас</a></li>
    </ul>

  </body>
</html>
Попробовать »

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

Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:


#navbar a:hover {
  background-color: #666;
  border-left: 5px solid #3333FF;
}
Попробовать »

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

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

Горизонтальное меню можно создать путем стилизации обычного списка. Свойству display для элементов <li> нужно присвоить значение inline, чтобы пункты списка располагались друг за другом.

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


<ul>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">Контакты</a></li>
  <li><a href="#">О нас</a></li>
</ul>

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


#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-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:


<ul>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">Контакты</a></li>
  <li><a href="#">О нас</a></li>
</ul>

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


<ul>
  <li><a href="#">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">Контакты</a>
    <ul>
      <li><a href="#">Адрес</a></li>
      <li><a href="#">Телефон</a></li>
      <li><a href="#">Email</a></li>
    </ul>
  </li>
  <li><a href="#">О нас</a></li>
</ul>
Попробовать »

Теперь приступим к написанию CSS кода. Для начала необходимо скрыть список с подпунктами с помощью объявления display: none;, чтобы они не отображались на веб-странице все время. Для отображения подпунктов нам нужно чтобы при наведении на элемент <li> список снова был преобразован в блочный элемент:


#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; }
Попробовать »

puzzleweb.ru

Горизонтальное меню для сайта на 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-файле, который вы можете скачать ниже. Выглядит это как на скриншоте: 

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

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

nz4.ru

Создание простого меню для сайта на HTML и CSS

И снова всех приветствую на нашем проекте! Сегодня у нас будет рассмотрен урок на тему создание простого меню для сайта. Тема очень распространенная, но надеюсь Вы сможете для себя, как новичок, получить полезные знания и возможно просто разобраться, как это реализуется.

 

Данный урок был записан по просьбе одного из наших постоянных читателей, поэтому другие темы и не рассматривались. После чего я, вместе со своим напарником по разработке, Евгением Кузьменко, подготовил для Вас выпадающее меню для сайта. С данным уроком Вы можете ознакомиться, как на сайте прочитав статью, так и по видео уроку, чтобы более детально понять основные принципы реализации выпадающего меню. Кстати, по поводу создания меню, также рассказывали и в других уроках, например таких как: Создание меню в Битрикс, Делаем меню как в nexus или например, как Адаптивное меню SlickNav, поэтому можете рассмотреть и их, вдруг что-то окажется полезным и пригодится!

 

 

Первый шаг. HTML.

 

И так, переходим к первому шагу данного урока и сначала нам нужно подключить файл demo.css, который лежит у нас в папочке css, а затем уже подключаем шрифт Open Sans. Ребята, я рассказываю все по демо, поэтому Вы можете все делать по своему усмотрению. 

 


<link rel="stylesheet" href="css/demo.css">
<link href="http://allfont.ru/allfont.css?fonts=open-sans" rel="stylesheet" type="text/css" />

 

Далее нам нужно создать обычный маркированный список ul li, а также задать первому ul идентификатор nav, чтобы мы могли работать через него, обращаясь к стилям css. Делается это очень просто, не знаю, что тут можно описать, поэтому скидываю сразу структуру, как в демо.

 


<ul>
	<li>
	<a href="">Ссылка</a>
		<ul>
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
		</ul>
	</li>
	<li>
	<a href="">Ссылка</a>
		<ul>
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
		</ul>
	</li>
	<li>
	<a href="">Ссылка</a>
		<ul>
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
		</ul>
	</li>
	<li>
	<a href="">Ссылка</a>
		<ul>
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
		</ul>
	</li>
	<li>
	<a href="">Ссылка</a>
		<ul>
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
			<li><a href="">Ссылка</a></li>
		</ul>
	</li>
</ul>

 

 

Второй шаг. CSS.

 

 

Переходим к стилям CSS и первым делом, мы должны установить тот шрифт, который прописали вначале данного урока, а именно Open Sans. После того, как наш шрифт успешно прописан, переходим уже к самому каркасу нашего маркированного списка, которому зададим определенные свойства, а также расположение и позиционирование элементов. Заметим, что мы создаем горизонтальное меню, поэтому применяем свойство float left. 

 


#nav{
	font-family: 'Open Sans', arial;
}

#nav li{
	float:left; /* все ссылки идут слева на право */
    position:relative;
    list-style:none; /* убираем точки */
    background:#ff3131;
	width:190px;
}

 

Убираем у каждой ссылки нашего меню нижнее подчеркивание, а также придаем белый цвет. Далее, чтобы при наведении на выпадающее меню основная ссылка была выделена, задаем идентификатор active, а также не забываем про сам цвет при наведении всех элементов данного меню. Так как у нас имеется выпадающее меню, нам соответственно нужно его будет скрыть. Для этого прописываем свойство visible и указываем ему параметр hidden, а также не забываем про абсолютное позиционирование данного элемента.

 


#nav a{
    text-decoration:none;
    display:block; /* делаем блочным элементов тег "a" */
    padding:35px 65px;
    color:#ffffff;
}

#active a, #nav li:hover > a{
    background:#b32424;
}

#nav ul {
	visibility:hidden; /* скрываем выпадающее меню */
    padding:0;  
    position:absolute;
}

 

Теперь после того, как наше меню успешно скрыто, нам нужно сделать выпадающее меню. Это реализовать достаточно просто, нужно задать элементу меню с идентификатором nav свойство visible. Тем самым мы получим результат выпадающего меню. Далее все по стандарту, изменяем выпадающее меню на наше усмотрение, задаем ему отступы и цвет. Не забываем указать свойство left 0 при ховере, ведь без него все выпадающее меню поедет и соответственно будет не очень красиво. (пункт 1)

 


#nav li:hover > ul{
    visibility:visible; /* показываем выпадающее меню при наведении */
	position: relative;
}

#nav ul a{
	padding:18.5px 65px; /* делаем отступы выпадающего меню меньше от основного */
}

#nav ul li:hover{
    background:#d92a2a;
}

#nav li:first-child:hover > ul{
	left: 0px; /* при наведении на первый элемент чтобы не съежало выпадающее меню */
}

 

Так как Евгений, подготовил макет данного меню, то все моменты связанные с его дизайном, мы реализовали с Вами в соответствии. Теперь, нам нужно реализовать border меню, так как он имеют некую функциональную особенность. Давайте ее рассмотрим. Для начала нам потребуется сделать border справа для основного меню, затем чтобы border не было слева нам нужно указать основному меню задать свойство none. 

 


#nav > li{
	border-right: 2px solid #d92a2a; /* добавляем рамку к основному меню справа */
}

#nav > li:last-child{
	border-right: none; /* убираем рамку справа основного меню */
}

 

Теперь, пора перейти к выпадающему меню, где функциональные свойства намного покажутся сложнее основного меню, ведь нам придется задавать определенные свойства элементам. Для начала укажем border для двух сторон выпадающего меню, а именно для правой стороны и левой. И напоследок нам будет необходимо скрыть с помощью свойства border none правую и левую сторону меню. 

 


#nav > li ul li{
	border-left: 2px solid #d92a2a; /* добавляем рамку к выпадающему меню слева */
	border-right:2px solid #d92a2a; /* добавляем рамку к выпадающему меню справа */
}

#nav li:first-child ul li,#nav li:first-child ul{
	border-left:none; /* убираем рамку у выпадающего меню слева */
} 
#nav li:last-child ul li,#nav li:last-child ul{
	border-right:none; /* убираем рамку у выпадающего меню справа */
}

 

Проверяем все на сайте и видим, что все отлично работает, кроме одной детали, а именно наше выпадающее меню при наведении на вторую ссылку и последующую сдвигается немного вправо. Для этого, чтобы устранить данную проблему, мы задаем элементу меню с идентификатором nav свойство left и в качестве параметра даем ему минус два. (см. пункт 1)

 


#nav li:hover > ul{
    left: -2px; /* смещаем выпадающее меню слева от размера рамки*/
}

 

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

 

Я благодарю Вас за ваше внимание, за ваши комментарии, а также за то, что Вы ознакомились с данным уроком и надеюсь, смогли для себя что-то выделить и подчеркнуть. А я с Вами прощаюсь и в следующем уроке мы рассмотрим тему меню сопровождением звуковой анимацией. Всем удачи!)


Роман Краутер

roothelp.ru

Создание меню на CSS – руководство для новичков

70.7K

Просторы всемирной сети стремительно растут, размещая огромное множество различных веб-сайтов, каждый из которых стремится привлечь внимание посетителей и заинтересовать их.

Способы покорения людских сердец выбираются разные — от применения Flash анимации, использования баннеров и смелых дизайнерских решений до различных звуковых и визуальных эффектов.

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

Меню является самой распространённой системой навигации на сайте, которую можно сравнить с оглавлением в книге. Меню должно быть заметно на любой странице ресурса, позволяя пользователю мгновенно перейти на интересующий раздел.

На объёмных сайтах, содержащих более 50 страниц, невозможно разместить полное меню для доступа ко всем разделам.

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

Существует сразу несколько видов и типов CSS меню:

  1. Главное меню. Это список определённых ссылок на ключевые разделы веб-сайта.
  2. Дополнительное меню. Такое меню имеет иерархическую структуру и бывает трёх типов:
    • Выпадающее меню. Раскрывается при наведении курсора мыши на пункт;
    • Всплывающее меню сайта. Раскрывается при клике на определённом пункте;
    • Статическое дополнительное меню для CSS. Древовидная структура, представленная в уже раскрытом виде.

Приведём пример создания простого горизонтального и вертикального меню на CSS с пояснениями.

Код горизонтального меню прописывается следующим образом:

<head>
<title>Горизонтальное меню сайта</title>

<style type="text/css">
.navigation {
   list-style: none; /* Отключение отображения маркеров. */
}
.navigation li {
   float: left; /* Выстраивание элементов списка в один ряд. */
   margin-right: 1px; /* создание отступов для того, чтобы не сливались пункты меню. */
   font-family: Verdana, Arial, Helvetica, sans-serif; /* Указание типа шрифта. */
   font-size: 14px; /* Размер текста в ссылках. */
}
.navigation li a {
   display: block; /* Изменение отображения на блочное для того чтобы иметь возможность задать внутренние отступы. */
   padding: 15px 20px;  /* Внутри блочные отступы. */
   background: #0db5b5; /* Цвет блоков меню. */
   color: #3f3f3f; /* Цвет текста в блоках меню. */
   text-decoration: none; /* Устранение подчёркивания ссылок. */
   position: relative; /* Это необходимо при использовании Internet Explorer 6 для того, чтобы ссылка по всей своей площади была «кликабельной». */
}
.navigation li a:hover {
   background: #92d3d3; /* Цвет блока при наведении курсора. */
   color: #6b6b6b;  /* Цвет текста при наведении курсора. */
}
</style>
</head>
<body>
<ul> 
   <!-- Описание ссылок в меню и сами ссылки. -->
   <li><a href="https://www.internet-technologies.ru/news" target="_blank">Новости</a></li>
   <li><a href="https://www.internet-technologies.ru/articles" target="_blank">Статьи</a></li>
   <li><a href="https://www.internet-technologies.ru/templates/" target="_blank">Шаблоны</a></li>
   <li><a href="https://www.internet-technologies.ru/books" target="_blank">Книги</a></li>
   <li><a href="https://www.internet-technologies.ru/scripts" target="_blank">Скрипты</a></li>
   <li><a href="https://www.internet-technologies.ru/lessons" target="_blank">Видео</a></li>
   <li><a href="http://talk.internet-technologies.ru/" target="_blank">Форум</a></li>
</ul>
<body>
</body>
</html>

В конечном итоге получается подобное горизонтальное меню:


Код вертикального меню записывается так:
<head>
<title>Вертикальное меню сайта</title>
<style type="text/css">
.navigation {
   list-style: none; /* Отключение отображения маркеров. */
   width: 120px;  /* Ширина меню. */
}
.navigation li {
   margin-top: 5px; /* Отступ между блоками по высоте, необходимый для того чтобы пункты меню не сливались */
   font-family: Verdana, Arial, Helvetica, sans-serif; /* Тип шрифта пунктов меню */
   font-size: 14px; /* Размер текста меню */
}
.navigation li a {
   display: block; /* Изменение отображения на блочное для того, чтобы иметь возможность задать внутренние отступы.  */
   padding: 4px 15px;  /* Отступы внутри блоков. */
   background: #0db5b5; /* Цвет блоков меню. */
   color: #3f3f3f; /* Цвет текста в блоках меню. */
   text-decoration: none; /* Устранение подчёркивания ссылок. */
   position: relative; /* Это необходимо при использовании Internet Explorer 6 для того, чтобы ссылка по всей своей площади была «кликабельной». */
}
.navigation li a:hover {
   background: #92d3d3; /* Цвет фона при наведении курсора мыши */
   color: #6b6b6b;  /* Цвет текста при наведении курсора мыши */
}
</style>
</head>
<body>
<!-- Описание ссылок в меню и сами ссылки. -->
<ul> 
   <li><a href="https://www.internet-technologies.ru/news" target="_blank">Новости</a></li>
   <li><a href="https://www.internet-technologies.ru/articles" target="_blank">Статьи</a></li>
   <li><a href="https://www.internet-technologies.ru/templates/" target="_blank">Шаблоны</a></li>
   <li><a href="https://www.internet-technologies.ru/books" target="_blank">Книги</a></li>
   <li><a href="https://www.internet-technologies.ru/scripts" target="_blank">Скрипты</a></li>
   <li><a href="https://www.internet-technologies.ru/lessons" target="_blank">Видео</a></li>
   <li><a href="http://talk.internet-technologies.ru/" target="_blank">Форум</a></li>
</ul>
<body>
</body>
</html>

Вертикальное меню, полученное при помощи данного кода, выглядит так:


Руководствуясь всеми вышеперечисленными принципами, приведём код для простого выпадающего меню:
<ul>
  <li><a href="https://www.internet-technologies.ru/news">Новости</a></li>
  <li><a href="https://www.internet-technologies.ru/articles" target="_blank">Статьи</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="https://www.internet-technologies.ru/templates/">Шаблоны</a>
    <ul>
      <li><a href="#">Ссылка 1</a></li>
    </ul>
  </li>
  <li><a href="https://www.internet-technologies.ru/books">Книги</a></li>
  <li><a href="https://www.internet-technologies.ru/scripts">Скрипты</a></li>
  <li><a href="https://www.internet-technologies.ru/lessons">Видео</a></li>
  <li><a href="http://talk.internet-technologies.ru">Форум</a></li>
</ul>

<style type="text/css">	

#menu {
  background: #0db5b5;
  width: 60%;
  padding:1;
  text-align: center;
  float:left;
  font-family: Verdana, Arial, Helvetica, sans-serif; 
}
#menu a {
  color: #3f3f3f;
  text-decoration: none;
}
#menu a:hover {
  color: #6b6b6b;
}
#menu ul {
  padding:0;
  margin:0;
}
#menu li {
  list-style: none;
  padding: 0 15px 0 0;
  width:100px;
  margin: 0 auto;
  float:left;
  line-height: 50px;
}
#menu li ul { 
  position:absolute;
  display: none;
} 
#menu li ul li {
  float: none;
  display: inline;
  width:100px;
  line-height:35px;
}
#menu li ul li:hover {
  background: #c392b;
}
#menu li:hover ul {
  display:block;
}
#menu li ul li { 
  display: block; 
  background:#92d3d3;
}
</style>

Получаем такое выпадающее меню:


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

Желаем удачи!

www.internet-technologies.ru

Создание меню сайта с помощью движка и html-кода

От автора: Меню – пожалуй, самый важный элемент сайта для пользователей, поскольку именно благодаря ему возможна навигация по ресурсу и быстрый переход в интересующие разделы. Давайте посмотрим, как происходит создание меню сайта.

Навигация в wordpress

В любом шаблоне вы можете в визуальном режиме создать свое меню и поставить его в одну из возможных областей. Для этого перейдите Внешний вид – Меню. Тут вы можете создать новое или редактировать уже имеющееся.

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

В визуальном режиме вы можете просто наполнить навигацию ссылками, а также выбрать область для ее отображения. Вообще количество и позиции таких областей зависят от шаблоне. В одном 1 такая область, в другом может быть 4-6.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Что делать, если вы хотите изменить именно внешний вид? Для этого полезно будет воспользоваться инструментом для разработчиков – отладчиком. Хотя вы не разработчик, он вам пригодится.

Для его запуска в Google Chrome или Яндекс. Браузере нажмите F12. Вам нужно найти, какой кусочек кода ответственен за вывод блока меню. А точнее, нам нужно обнаружить стилевой класс или идентификатор у навигационного блока. Если это получится, то можно будет найти в css стили для этого элемента и изменить их на свои.

При наведении на html-код отладчик будет подсвечивать вам элемент, который он формирует. Так можно найти нужный элемент быстро и просто. Всего лишь в 2 клика нашли, что наше меню находится в блоке с классом all-width и лежит в теге nav.

Справа будет отображаться css-код элемента. Например, вы можете выбрать сам список, его пункты или ссылки, кликнув по ним в отладчике, а справа появятся стили для них. Редактируя стили, вы сразу сможете видеть результат. Это очень полезно. Вы можете сразу изменить внешний вид меню так, как вам надо. Но помните, что изменение кода в отладчике никак не влияет на реальный внешний вид меню. После этого вам нужно зайти на сервер и отредактировать style.css вручную, внеся нужные поправки.

Меню с помощью html

Теперь можно посмотреть, как на самом деле в коде выглядит практически любое меню. Для его создания сегодня принято использовать контейнер nav. Это парный html-тег, в который обычно помещают важные ссылки, которые есть на странице. Выводят такие ссылки обычно маркированным списком, в нем располагаются пункты списка, а уже в них – сами ссылки, то есть теги <a> с указанием обязательного атрибута href и прочих атрибутов, если они будут необходимы.

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

В общем, создание меню сайта в html выглядит примерно так:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

<nav id = «menu»> <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> </ul> </nav>

<nav id = «menu»>

<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>

</ul>

</nav>

И выглядит вот так:

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

Собственно, дальнейшая работа происходит в css. Например, если вам нужно убрать маркеры и сделать все пункты в ряд, то используют следующие свойства:

#menu ul{ list-style: none; } #menu li{ float: left; padding: 15px; }

#menu ul{

list-style: none;

}

#menu li{

float: left;

padding: 15px;

}

И вот наша навигация выглядит уже более цивилизованно. А именно, вот так:

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

#menu li a{ display: block; background: purple; padding: 10px; color: #fff; } #menu li a:hover{ background: #333; }

#menu li a{

display: block;

background: purple;

padding: 10px;

color: #fff;

}

#menu li a:hover{

background: #333;

}

И теперь навигация приобрела человеческий вид:

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

Что ж, у меня на этом все. Теперь можно практиковаться и создавать свое уникальное оформление для навигации на любом веб-ресурсе.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

webformyself.com

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

28.7K

В сегодняшней статье я хотел бы рассказать, как создать на 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» , подготовленной дружной командой проекта Интернет-технологии.ру

www.internet-technologies.ru

Простое горизонтальное меню (css + html)

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


<div>
	<ul>
		<li><a href="#">Ссылка 1</a></li>
		<li>
			<a href="#">Ссылка 2</a>
			<ul>
				<li><a href="#">Ссылка подменю 1</a></li>
				<li><a href="#">Ссылка подменю 2</a></li>
			</ul>
		</li>
		<li><a href="#">Ссылка 3</a></li>
		<li><a href="#">Ссылка 4</a></li>
	</ul>
</div>

Теперь к созданной структуре применим следующие стили:


.top-menu li{
	list-style:none;/*Убираем маркер*/	
	display:inline-block;/*Выстраиваем пункты в ряд*/
	background:#ccc;/*Цвет фона для пункта*/
	position:relative;
}
.top-menu li:hover{
	background:#eee;/*Цвет фона при наведение на пункт*/
}
.top-menu li a{
	color:#222;/*Цвет шрифта в пункте*/
	padding:5px 7px;/*Отступы для пункта*/	
	text-decoration:none;/*Убираем подчеркивание*/	
	display:block;
}
.top-menu li ul{
	display:none;/*Прячем выпадающее меню*/
	position:absolute;
	padding-left:0;
	width:120px;/*Ширина выпадающего меню*/
	padding-top:3px;/*Отступ сверху у выпадающего меню*/
}
.top-menu li:hover ul{
	display:block;/*Показываем выпадающее меню при наведение*/
	left:0px;
}

В итоге получим:

Меню созданному на чистом css, очень легко предать требуемый вид. Для того чтобы сменить цвет шрифта нужно поменять значение color, для смены фона значение background

Готовый пример — Скачать

pro-cod.ru

No related posts.