Как найти меню в html - Исправление недочетов и поиск решений вместе с Examum.ru

Вертикальное меню
Горизонтальное меню
Выпадающее меню

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

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

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

<ul id="navbar">
  <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 id="navbar">
      <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 id="navbar">
  <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 id="navbar">
  <li><a href="#">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#">Контакты</a></li>
  <li><a href="#">О нас</a></li>
</ul>

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

<ul id="navbar">
  <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; }

Попробовать »

Источник

Доброго времени суток всем, кто сейчас читает данную публикацию. Сегодня я хочу рассказать вам об одном из инструментов сайтостроения, без которого ни один веб-ресурс не может обойтись. Это меню сайта, или как еще говорят карта сайта. На сегодняшний день существует безграничное множество видов и подвидов меню.

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

Инструменты для создания панели навигации

В языке разметки существует несколько способов создания меню. Основная их концепция заключается в использовании ненумерованного списка. Таким образом, в привычном для нас html 4 разработчики прописывают на станице теги <ul> и <li>.

Как оговаривалось в предыдущих публикациях, парный элемент <ul> создает маркированный список, а <li> — один элемент списка. Для наглядности давайте напишем код простого меню:

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Навигация</title>
 </head>
 <body>
  <p><strong>Навигация сайта</strong></p>
  <ul>
   <li>Главная</li>
   <li>Новости недели</li>
   <li>Технологические достижения</li>
   <li>Чат</li>
  </ul>
 </body>
</html>

Однако с появлением платформы html5 язык разметки пополнился дополнительными тегами. Именно поэтому меню современных веб-сайтов создается при помощи специального тега <menu>. В использовании этот элемент ничем не отличается от маркированных списков.

Вместо единицы <ul> прописывается <menu>. Однако существенные различия появляются если судить со стороны работы браузеров. Так, второй пример ускоряет работу поисковых программ и роботов в интернете. При анализе структуры сайта они сразу понимают, что данный кусок кода отвечает за карту сайта.

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

Создадим-ка горизонтальную навигационную модель

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

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

Для трансформации мы используем свойство css под названием transform. Чтобы указать трансформацию, используется встроенная функция skewX, в которой угол наклона указывается в градусах.

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

-ms- (Internet Explorer)
-o- (Opera)
-webkit- (Chrome, Safari)
-moz- (Firefox)

А теперь полученные знания применим к написанию примера.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Горизонтальная панель</title>
  <style>
   li {
    display: inline-block; 
    margin-right: 6px;
    background: #FF8C00;  
    transform: skewX(-45deg);
    -webkit-transform: skewX(-45deg);
    -o-transform: skewX(-45deg);
    -ms-transform: skewX(-45deg); 
    -moz-transform: skewX(-45deg);
   }
   a {
    display: block; 
    padding: 18px 35px;
    color: #fff;  
    transform: skewX(40deg);
    -webkit-transform: skewX(40deg); 
    -o-transform: skewX(40deg);
    -ms-transform: skewX(40deg); 
    -moz-transform: skewX(40deg); 
   }
   li:hover {
    background: #1C1C1C; 
   }
  </style>
 </head>
 <body>
  <menu>
    <li>Главная</li>
    <li>О компании</li>
    <li><a href="3.html">Продукция</a></li>
    <li><a href="4.html">Контакты</a></li>
  </menu>
 </body>
</html>

А теперь вертикально. Я сказал вертикально!

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

Для этого я воспользовался еще одним свойством css border-radius.

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Вертикальная панель</title>
  <style>
   li{
    display: block; 
    margin: 13px;
    padding: 13px;
    background: #FF8C00;  
    width:20%;
    text-align:center;
    font-size:20px;
    border-radius:10px;
   }
   a {
    color: #fff;  
   }
   li:hover {
    background: #1C1C1C; 
   }
  </style>
 </head>
 <body>
  <menu>
    <li>Главная</li>
    <li>О компании</li>
    <li><a href="3.html">Продукция</a></li>
    <li><a href="4.html">Контакты</a></li>
  </menu>
 </body>
</html>

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

Подпункты в меню: выпадающий список

Мы с вами рассмотрели основные группы навигационных панелей, однако существует еще несколько разновидностей или лучше сказать дополнений.

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

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

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Выпадающий список</title>
        <style>
body {
    padding-left: 30%;
    font-size: 18px;
}
.m-menu {
    margin: 0;
    padding: 9px;    
    width:50%;
    text-align:center;
    border: 3px solid #000;
    background: #FF8C00;  
}
.m-menu > li {
    position: relative;
    display: inline-block;
 }
.m-menu a {
    display: block;
    margin-left: -2px;
    padding: 13px;
    color: #fff;
    border-left: 3px solid #fff;
}
.m-menu a:hover {
    background: #1C1C1C;
}
.m-menu .s-menu {
    left: 10px;
    position: absolute;
    display: none;
    width: 155px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #FF8C00;
}
.m-menu .s-menu a {
    border: 1px solid #000;
}
.m-menu > li:hover .s-menu {
    display: block;
}
        </style>
    </head>
    <body>
        <ul class="m-menu">
            <li><a href="#index">Главная</a></li>
            <li>
                <a href="#product">Продукция</a>
                <ul class="s-menu">
                    <li><a href="#1">Конфеты</a></li>
                    <li><a href="#2">Торты</a></li>
                    <li><a href="#3">Печенье</a></li>
                </ul>
            </li>
            <li><a href="#adress">Контакты</a></li>
        </ul>
    </body>
</html>

В данном примере я разделил единицы меню на два класса:

m-menu
s-menu

Первый класс отвечает за основное меню, а s-menu – за подменю.

В коде можно встретить такой прием, как .m-menu > li:hover или .m-menu > li.

Так, при помощи :hover указывается, как будет вести себя элемент при наведении на него курсора.

При этом знак «>» видоизменяет селектор так, чтобы блочно-строчными были только объекты, относящиеся к верхнему уровню.

Изначально подменю было задано display: none, что оповещает обработчик скрывать данный объект. После наведения на элемент навигации с указанием hover, значение свойства display меняется на block и поэтому открывается выпадающий список.

Как видите, реализация такого приема очень простая.

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

С уважением, Роман Чуешов

Источник

Основы верстки

Чаще всего меню создается на основе не упорядоченных списков ul. В каждый пункт li вкладывается гиперссылка a.

Можно создавать меню и на основе блоков div, таблиц table или списков определений dl.
Но традиционной является конструкция ul.

Код простейшего меню будет выглядеть так:

<ul>
  <li><a href="#/">пункт 1</a></li>
  <li><a href="#/">пункт 2</a></li>
  <li><a href="#/">пункт 3</a></li>
  <li><a href="#/">пункт 4</a></li>
  <li><a href="#/">пункт 5</a></li>
</ul>

Примечание

В процессе разработки удобно указывать адрес гиперссылки — #/. Во-первых, она никуда не ведет, а во-вторых — не происходит перехода к началу страницы.

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

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

Поэтому предварительно нужно создать файл, например my-menu.css, и подключить его.

<!-- Подключение таблицы стилей -->
 
<!DOCTYPE html>
<html>
<head>
     ...
     <title>Создание меню</title>
     <link rel="stylesheet" href="css/MAIN.css" type="text/css" />
     <link rel="stylesheet" href="css/my-menu.css" type="text/css" />
     ...
</head>
<body>
...
</body>
</html>

Позже код можно будет перенести в общий файл, а этот удалить (или отключить).

Как прописываются стилевые правила для меню

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

/* Не желательно! */
ul li a {color: #f00;}

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

Вторая причина, по которой желательно работать с классами, а не с тегами напрямую — возможность разбить стили по группам. За каждую тематическую группу стилей будет отвечать свой класс.

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

Каким тегам нужно присваивать классы

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

Да, это дополнительная разметка, но оформлять меню будет гораздо удобнее. Кроме того, если в качестве контейнера использовать не div, а nav, то верстка будет более семантической (осмысленной) и удобной для поисковых систем (ПС), что является несомненным плюсом. Второй класс присваиваем тегу ul.

<nav class="menu_color">
  <ul class="my_menu">
    <li><a href="#/">пункт 1</a></li>
    <li><a href="#/">пункт 2</a></li>
    <li><a href="#/">пункт 3</a></li>
    <li><a href="#/">пункт 4</a></li>
    <li><a href="#/">пункт 5</a></li>
  </ul>
</nav>

Почему именно так?

Присвоение класса .menu_color тегу nav дает больше возможности для оформления, чем присовение его тегу ul, а класс .my_menu отвечает только за разметку меню и никакого отношения к содержащему контейнеру иметь не должен.

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

Какие имена должны быть у классов

Осмысленные. В идеале, любое имя класса должно давать представление об объекте и назначении. В приведенном выше примере используются классы nav.menu_color и ul.my_menu.

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

Внимание!

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

Имеено по-этому я выбрал класс .my_menu, так как на сайте уже есть класс .menu со своими стилями.

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

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

Например, за цветовое оформление у нас отвечает класс .menu_color

/* === Группа цветового оформления === */
 
/* Цвет фона менд */
.menu_color {
  background: gray;
}
/* Оформление пункта меню */
.menu_color > ul > li > a {
  background: transparent;
  color: #f5f5f5;
}
...
/* === Группа разметки основного меню === */ 
 
/* Сброс и установка стилей по умолчанию */
.my_menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Разметка для пункта меню */
.my_menu li a {
  display: block;
  margin: 0;
  padding: 12px 20px;
  text-decoration: none;  
}

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

При необходимости, для тега nav также можно добавить дополнительный класс, чтобы не залезать на территорию «цветового оформления» …

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

Простое вертикальное меню

Исходный html-код меню будет выглядеть так:

<nav class="menu_color">
  <ul class="my_menu">
    <li><a href="#/">пункт 1</a></li>
    <li><a href="#/">пунтк 2</a></li>
    <li><a href="#/">пункт 3</a></li>
    <li class="active"><a href="#/">пункт 4</a></li>
    <li><a href="#/">пункт 5</a></li>
  </ul>
</nav>

Кроме основных классов, рассмотренных в предыдущем материале, добавлен класс li.active для активного пункта (ссылка на текущую страницу).

Сброс и установка стилей по умолчанию

Файл my-menu.css

/* Убираем маркеры и отступы */
.my_menu {
  list-style:none;
  margin:0;
  padding:0;
}
.my_menu li {
  margin:0;
  padding:0;
  position:relative;
}
/* Общие правила для пунктов меню */
.my_menu li a {
  display:block;
  margin:0;
  padding:12px 20px;
  text-decoration: none;
}
/*Наведение на активный пункт меню - курсор обычный */
.my_menu li.active > a:hover {
  cursor: default;
}

Цветовое оформление

Примечание

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

/* === Цветовое оформление menu_color === */
.menu_color {
  background:#555;
}
/* Оформление пункта */
.menu_color > ul > li > a {
  color:#999;
  background: rgba(0, 0, 0, 0);
}
/* Подсветка пункта при наведении */
.menu_color > ul > li > a:hover {
  color: #bbb;
  background: rgba(0, 0, 0, 0.1);
}
/* Активный пункт */
.menu_color > ul > li.active > a,
.menu_color > ul > li.active > a:hover {
  color:#fff;
  background:rgba(0, 0, 0, 0.4);
}

Пояснения:

Если возникнет необходимость к определенным пунктам меню добавить подпункты, т.е. сделать меню многоуровневым, то конструкция .menu_color > ul > li > a позволит ограничить применение стилей только к пунктам меню первого уровня. Для подменю можно будет прописать другие стили оформления.
Использование прозрачности при задании цвета фона — background: rgba(0, 0, 0, 0.1). Это универсальное режение для любого темного бэкграунда. Если вы решите изменить цвет фона меню, фон активного пункта и подсветка пунктов при наведении изменятся автоматически. Впрочем, ничто не мешает вам задать понравившиеся цвета явно.

Замечание

Цвет фона меню задавать не обязательно, если он наследуется от родительского блока.

Разделители пунктов

/* Разделитель пунктов меню */
.menu_color > ul > li + li > a {
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
}

Повторяем тот же трюк с использованием rgba. Цвета для верхней границы и тени заданы полупрозрачными — черный 15% прозрачности и белый 10% соответственно.

Это универсальное режение для любого темного бэкграунда. Если вы решите изменить цвет фона, то цвет рамки и тени изменится автоматически!

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

Изначально любое меню нужно создавать как многоуровневое!

В последние годы реально-многоуровневые меню уходят в прошлое. Двух уровней, обычно, вполне достаточно, остальные — оформляются отдельным дополнительным меню.

HTML-код 2-х уровневого меню:

<nav class="menu_color">
    <ul class="my_menu">
        <li><a href="#/">пункт 1</a></li>
        <li class="parent"><a href="#/">родительский пункт 2</a>
            <ul class="sub-menu">
                <li><a href="#/">дочерний подпункт 1</a></li>
                <li><a href="#/">дочерний подпункт 2</a></li>
            </ul>
        </li>
        <li><a href="#/">пункт 3</a></li>
        <li class="active"><a href="#/">пункт 4</a></li>
        <li><a href="#/">пункт 5</a></li>
    </ul>
</nav>

Добавлены классы li.parent — родительский тег, содержащий подменю, и ul.sub-menu — вложенный список выпадающего меню.

Цветовое оформление

/* Оформление sub-menu */
.menu_color .sub-menu {
  background: #f5f5f5;
  border: 1px solid #f5f5f5;
}
/* Офррмление подпунктов */
.menu_color .sub-menu li a{
  color: #555;
  background: rgba(0, 0, 0, 0);
}
/* Офррмление подпунктов при наведении */
.menu_color .sub-menu li a:hover{
  color: #fff;
  background: #555;
}
/* Разделитель для пунктов sub-menu */
.menu_color .sub-menu > li + li > a {
  border-top: 1px solid #fff;
  box-shadow: 0 -1px 0 #ddd;
  padding-left: 40px  /* Добавляем отступ для подпунктов */
}

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

Позиционирование и скрытие

Позиционирование осуществляется относительно родительского li.parent. (Именно для этого при сбросе и установке для него было задано position: relative;)

/*Общие*/
.my_menu .sub-menu {
  display: none;
  position: absolute;
  top: 0;
  min-width: 200px;
  z-index: 9999;
}

Вывод

В зависимости от расположения основного меню (левая/правая боковая колонка), подменю может выпадать как вправо, так и влево. Поэтому для определения стилевых правил используем класс родительского блока .sidebar_left (В исходном html-коде класс не указан, т.к. к коду меню отношения не имеет).

/* Вывод */
.my_menu .parent:hover .sub-menu {
  display: block;
  top: 4px;
}
/* со смещением вправо */
.sidebar_left .my_menu .parent:hover .sub-menu {
  left: 100%;
  margin-left: -10px;
}

Информация

Если у родительского блока нет класса, или он применяется как к правой так и к левой колонкам — нужно этот класс добавить к тегу nav.menu_color.sidebar_left.

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

/* Смещение влево */
.sidebar_right .my_menu .parent:hover .sub-menu {
  right: 100%;
  left: auto;
  margin-right: -5px;
}

Простая анимация

Что мы будем анимировать. В данном случае, эффекты довольно простые:

Переопределение существующих стилей:

/* Оформление пункта */
.menu_color >  ul >  li >  a {
  color: #999;  
  background: rgba(0, 0, 0, 0);
 
  /* добавляем код */
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}
 
/* Офррмление подпунктов */
.menu_color .sub-menu li a{
   color: #555;
   background: rgba(0, 0, 0, 0);
 
  /* добавляем код */
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}

А вот с плавным появленем подменю проблема …

Дело в том, что использовать display: none; для того чтобы скрыть подменю нельзя — анимация работать не будет. Поэтому рассмотрим другой способ.

Скрытие подменю. Вариант 2

Альтернативным способом является смещение меню в исходном состоянии за пределы экрана + полная прозрачность.

/* Переопределение sub-menu*/
.my_menu .sub-menu {
  display: block; /* переопределено */
  position: absolute;
  top: 0;
  width: 200px;
  z-index: 9999;
 
  /* Добавить */
  opacity: 0;
  -webkit-transition: opacity .5s, top .7s;
  -moz-transition: opacity .5s, top .7s;
  -o-transition: opacity .5s, top .7s;
  transition: opacity .5s, top .7s;
}
/* Смещение за экран */
.my_menu .sub-menu {
  left: -3000px;
}
/* Переопределяем эффект отображения при наведении*/
.my_menu .parent:hover > .sub-menu {
  display: block;
  top: 4px;
 
  /* Добавить */
  opacity: 1;
}

Раздвижное меню-аккордеон

Несколько слов вступления

В данном примере рассмотрена технология создания аккордеон-меню, раскрывающегося по hover.

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

Аккордеон должен раскрываться по click, а это уже JS. А рассмотрение javascript выходит за рамки раздела HTML/CSS…

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

Добавлен класс my_accordion к классу родительского контейнера, а класс .sub-menu заменен на .sub-accordion-menu. Можно было бы не заменять, а просто переопределить, но это усложнит пример для понимания.

<nav class="menu_color">
    <ul class="my_menu my_accordion">
        <li><a href="#/">пункт 1</a></li>
        <li class="parent"><a href="#/">родительский пункт 2</a>
            <ul class="sub-accordion-menu>
                <li><a href="#/">дочерний подпункт 1</a></li>
                <li><a href="#/">дочерний подпункт 2</a></li>
            </ul>
        </li>
        <li><a href="#/">пункт 3</a></li>
        <li class="active"><a href="#/">пункт 4</a></li>
        <li><a href="#/">пункт 5</a></li>
    </ul>
</nav>

/* === Группировка классов === */
 
/* Убираем маркеры и отступы */
.my_menu, .sub-menu, 
.sub-accordion-menu {
  list-style:none;
  margin:0;
  padding:0;
}
/* Подсветка пункта при наведении */
.menu_color > ul > li > a:hover,
.my_menu .parent .sub-accordion-menu li a:hover {
  color: #bbb;
  background: rgba(0, 0, 0, 0.1);
}
/* Разделитель пунктов меню */
.menu_color > ul > li + li > a,
.menu_color .sub-accordion-menu li > a {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
}

После этого добавим стили, для закрытого и раскрытого аккордеона:

/* === Закрытый ===*/
.sub-accordion-menu {
  display: block;
  position: static;
  width: auto;
  overflow: hidden;
  border: none;
  margin: 0!important; 
  max-height: 0;   /* Скрываем выпадающее подменю */
  transition: max-height 1s;  /* Задержка раскрытия */
}
/* === Открытый ===*/
.sub-accordion-menu {
  max-height: 1000px;
}
.sub-accordion-menu > li > a {
  padding-left: 40px;  /* Добавляем отступ для подпунктов */
}

Примечание.
Почему было использовано свойство max-height, а не height? Потому что мы не знаем высоту раскрывающегося подменю, а при использовании значения height: auto — анимация не срабатывает.

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

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

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

В итоге наше меню будет выглядеть так:

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

<nav class="hz-bar menu_bordo">
  <ul class="hz_menu">
    <li><a href="#/">punkt 1</a></li>
    <li class="parent_dropdown"><a href="#/">dropdown</a>
      <div class="dropdown_menu">
        <ul>
          <li><a href="#/">sub punkt 1</a></li>
          <li><a href="#/">sub punkt 2</a></li>
        </ul>
      <div>
    </li>
    <li><a href="#/">punkt 3</a></li>
    <li class="active"><a href="#/">active</a></li>
    <li><a href="#/">punkt 5</a></li>
  </ul>
</nav>

Разметка

/* === Разметка основного меню === */
.hz-bar ul {
 list-style: none;
 margin:0;
 padding:0;
}
.hz_menu > li {
 float: left;
 margin:0;
 padding:0;
 position:relative;
}
.hz_menu li a {
 display:block;
 margin:0;
 padding:15px 20px;
 text-decoration: none;
}

Что было сделано:

Сброс стилей по умолчанию для тега ul
Создание горизонтального меню, путем присвоения тегам li, содержащим пунткы основного меню, свойства float: left
Установка отступов для пунктов меню

Пояснения:

Конструкция .hz_menu > li распространяется только на пункты основного меню и не затрагивает выпадающее, в то время как .hz_menu li a задается для всех пунктов. Некоторые свойства, специфичные для подменю, будут переопределены в дальнейшем.

Разметка выпадающего меню

/* === Разметка выпадающего подменю === */
.dropdown_menu {
 display: block;
 position: absolute;
 left: -3000px;
 top: 100%;
}
.dropdown_menu > ul {
 border: 1px solid;
 margin-top: 10px;  /* отступ от основного меню */
 padding: 10px 1px;
 min-width: 140px;
 opacity: 0;
 transition: opacity .5s; /* анимация прозрачности */
}
.dropdown_menu li a {
 white-space: nowrap; /* если не очень длинные заголовки */
 z-index: 9999;
 padding: 10px 20px;
}
.parent_dropdown:hover .dropdown_menu {
 left: 0px;
}
.parent_dropdown:hover .dropdown_menu ul {
 opacity: 1;
}

Рассмотрим некоторые особенности:

Как было видно из html-кода, выпадающее меню обернуто в дополнительный контейнер div.dropdown_menu. Для чего? В принципе, можно вполне обойтись и без него, но эта обертка дает некоторые дополнительные возможности оформления. В частности, возможность задать отступ от основного меню.
Если задать отступ непосредственно для тега ul без обертки, при перемещении курсора от основного пункта к подпункту hover-эффект прервется и подменю пропадет … Дополнительный контейнер обеспечивает, в данном случае, отсутствие разрыва.
Для подпункт определено правило white-space: nowrap. Дело в том что абсолютно позиционированное подменю имеет максимальную ширину родительского пункта, и, соответственно, текст подпунктов будет переноситься на новую строку. Это не очень удобно при коротких названиях основных пунктов.
Данное правило предотвращает перенос. Как альтернатива (дополнение), минимальная ширина подменю была задана явно.

Оформление

Перед тем как заняться цветовым оформлением, необходимо добавить еще несколько стилевых правил разметки. Я специально перенес их в офомление, чтобы был понятнее смысл.

Если основному контейнеру назанчить цвет фона, то мы его не увидим по одной простой причине:

Теги li, которым присвоено float: left, выпадают из основного потока, их для основного контейнера как-бы не существует, поэтому он «схлопывается» и имеет высоту 0. Соответственно, никакого цветового оформления мы не увидим.

Решение

/* Предотвращаем схлопывание */
.hz-bar:after {
 content: '';
 display: table;
 clear: both;
}

Теперь контейнер будет вести себя более дружелюбно и можно его оформлять

/* === Оформление меню === */
.menu_bordo {
 background: #7D0000;
}
.menu_bordo .hz_menu > li > a {
 color: #DBE6B7;
}
.menu_bordo .hz_menu > li > a:hover {
 color: #fff;
}
.menu_bordo .hz_menu .active a{
 box-shadow: inset 0 15px 15px rgba(0, 0, 0, 0.2);
 color: #fff;
 cursor: default;
}

Здесь все достаточно очевидно. Единственное, cursor: default, следовало бы перенести в разметку, чтобы не привязывать к классу цветового оформления.

Для выделения активного пункта меню была применена тень.

/* === Оформление выпадающего подменю === */
.menu_bordo .dropdown_menu > ul {
 background: #fff;
 border-color: #ddd;
}
.menu_bordo .dropdown_menu > ul > li > a {
 color: #555;
}
.menu_bordo .dropdown_menu > ul > li > a:hover {
 background: #7D0000;
 color: #fff;
}

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

Дополнительно

Необязательные стилиевые правила. Первое задает вертикальные разделители между пунктами (аналогично вертикальному меню), второе — дополнительный маркер для родительского пункта.

/* Дополнительно. Разделители пунктов + маркер */
.hz_menu > li + li > a {
 border-left: 1px solid rgba(255, 255, 255, 0.1);
 box-shadow: -1px 0 0 rgba(0, 0, 0, 0.15);
}
.parent_dropdown > a:after {
 display: inline-block;
 padding: 1px 0 0 3px;
 content: "25BC ";
 font-size: 10px;
 vertical-align: top;
}

Здесь вы можете скачать Код примера горизонтального меню

Источник

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

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

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

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

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

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

Разновидности меню в CSS

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

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

Как создать меню в 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 class="navigation"> 
   <!-- Описание ссылок в меню и сами ссылки. -->
   <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 class="navigation"> 
   <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 id="menu">
  <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 кода позволяют создать простое, но стильное меню, которое обязательно найдёт свое место в каком-либо веб-сайте. Обязательно попробуйте реализовать что-то подобное самостоятельно.

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

Источник

In this article you will learn how to create sidebar menu using HTML CSS and JavaScript code. Like the navigation menu bar, the sidebar menu is used on many websites.

You can create a nice side menu using basic HTML CSS and JavaScript programming code. I have already designed many more types of sidebar menus. You can follow those tutorials if you want.

✅ Watch Live Preview 👉👉 Sidebar Menu Using HTML CSS

This is a very simple side menu bar with a profile image and some basic text. Below that I have added eight menus here. I added icons to each menu and added hover effects to menu items.

When you click on those menu items or move the mouse, the background of those menus will change.

Normally the menu bar is fully visible but there is a button that hides the menu bar when clicked. Here I have created a navigation bar but in that case I have not added any menu items. You can add menu items in that space if you want.

Step 1: Create a basic html structure to create sidebars

To create this you need to create an HTML and CSS file. Then copy the structure below and paste it into the HTML file. In the HTML structure below I have put all the information where you will add the required code. Follow this tutorial and add the code according to the information below.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>
<body>

    <div class="wrapper">
        <!--Top menu -->
        <div class="sidebar">
           <!--profile image & text-->
            <!--menu item-->
        </div>

    </div>
  <script>

  </script>
</body>
</html>

Enter fullscreen mode

Exit fullscreen mode

Step 2: Design the background using css code

With that I added some basic CSS code that basically designed the background and gave the sidebar a shape. In this case I have used blue color in the background. You can change this color if you want.

    @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

*{
    list-style: none;
    text-decoration: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

body{
    background: #f5f6fa;
}

.wrapper .sidebar{
    background: rgb(5, 68, 104);
    position: fixed;
    top: 0;
    left: 0;
    width: 225px;
    height: 100%;
    padding: 20px 0;
    transition: all 0.5s ease;
}

Enter fullscreen mode

Exit fullscreen mode

Step 3: Add profile images and titles

As you can see in the demo above, first of all here I used a profile image, a title and some description. I have used the following HTML and CSS programming code to make it.

In this case, you can change the profile image to your liking and increase or decrease the size of this image if you want. In this case I used height 100px and width 100px.

Here I have used border-radius 50% in the profile image which makes this image look completely round. You can change this percentage if you want to keep it square or other size.

 <div class="profile">
                <img src="https://1.bp.blogspot.com/-vhmWFWO2r8U/YLjr2A57toI/AAAAAAAACO4/0GBonlEZPmAiQW4uvkCTm5LvlJVd_-l_wCNcBGAsYHQ/s16000/team-1-2.jpg" alt="profile_picture">
                <h3>Anamika Roy</h3>
                <p>Designer</p>
            </div>

Enter fullscreen mode

Exit fullscreen mode

.wrapper .sidebar .profile{
    margin-bottom: 30px;
    text-align: center;
}

.wrapper .sidebar .profile img{
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto;
}

.wrapper .sidebar .profile h3{
    color: #ffffff;
    margin: 10px 0 5px;
}

.wrapper .sidebar .profile p{
    color: rgb(206, 240, 253);
    font-size: 14px;
}

Enter fullscreen mode

Exit fullscreen mode

Step 4: Add menu items in the sidebar

In this case I have used eight menu items. I have used an icon with each menu to make the menu items more beautiful and attractive. You can change those icons and menu items as you wish.

<ul>
                <li>
                    <a href="#" class="active">
                        <span class="icon"><i class="fas fa-home"></i></span>
                        <span class="item">Home</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon"><i class="fas fa-desktop"></i></span>
                        <span class="item">My Dashboard</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon"><i class="fas fa-user-friends"></i></span>
                        <span class="item">People</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon"><i class="fas fa-tachometer-alt"></i></span>
                        <span class="item">Perfomance</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon"><i class="fas fa-database"></i></span>
                        <span class="item">Development</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon"><i class="fas fa-chart-line"></i></span>
                        <span class="item">Reports</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon"><i class="fas fa-user-shield"></i></span>
                        <span class="item">Admin</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span class="icon"><i class="fas fa-cog"></i></span>
                        <span class="item">Settings</span>
                    </a>
                </li>
            </ul>
        </div>

Enter fullscreen mode

Exit fullscreen mode

Step 5: Design menu items with css code

The following codes are the CSS programming codes that were originally used to design and add colors to the menu items added above.

In this case I have used white color between the icons and the text which looks much more interesting on a blue background. You can see below that I have added the effect of hover. When you hover your mouse over or click on that menu, the background will change as you saw in the demo above.

.wrapper .sidebar ul li a{
    display: block;
    padding: 13px 30px;
    border-bottom: 1px solid #10558d;
    color: rgb(241, 237, 237);
    font-size: 16px;
    position: relative;
}

.wrapper .sidebar ul li a .icon{
    color: #dee4ec;
    width: 30px;
    display: inline-block;
}

Enter fullscreen mode

Exit fullscreen mode

.wrapper .sidebar ul li a:hover,
.wrapper .sidebar ul li a.active{
    color: #0c7db1;

    background:white;
    border-right: 2px solid rgb(5, 68, 104);
}

.wrapper .sidebar ul li a:hover .icon,
.wrapper .sidebar ul li a.active .icon{
    color: #0c7db1;
}

.wrapper .sidebar ul li a:hover:before,
.wrapper .sidebar ul li a.active:before{
    display: block;
}

Enter fullscreen mode

Exit fullscreen mode

Step 6: Create navigation bar

In this case I used a navigation bar but I did not use any link in the navigation bar. In this case I have added a menu button which when clicked will hide the whole menu and when clicked again the menu will appear. The following HTML and CSS programming codes have been used to create and design this menu bar.

<div class="section">
            <div class="top_navbar">
                <div class="hamburger">
                    <a href="#">
                        <i class="fas fa-bars"></i>
                    </a>
                </div>
            </div>

        </div>

Enter fullscreen mode

Exit fullscreen mode

.wrapper .section{
    width: calc(100% - 225px);
    margin-left: 225px;
    transition: all 0.5s ease;
}

.wrapper .section .top_navbar{
    background: rgb(7, 105, 185);
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 30px;

}

.wrapper .section .top_navbar .hamburger a{
    font-size: 28px;
    color: #f4fbff;
}

.wrapper .section .top_navbar .hamburger a:hover{
    color: #a2ecff;
}

Enter fullscreen mode

Exit fullscreen mode

The following CSS codes basically indicate the exact position of the sidebar when this menu button is activated. This means that when you click on the menu button, the entire side will be hidden.

Below I have indicated that when that menu button is clicked, the side will move 225 to the left, that is, it will be completely hidden.


body.active .wrapper .sidebar{
    left: -225px;
}

body.active .wrapper .section{
    margin-left: 0;
    width: 100%;
}

Enter fullscreen mode

Exit fullscreen mode

Step 7: Add JavaScript code to activate the menu button

In this case I have used a very small amount of JavaScript code which was originally used to activate the menu button on the navigation menu bar. If you see the demo above, you will understand that I have created a menu button here and if you click on that button, the entire menu bar will be hidden.

Now we will activate that button which means when you click on this button the css code added above will be valid. I used the following JavaScript programming code to make it. The JavaScript programming code below is very simple and simple I hope you understand.

  var hamburger = document.querySelector(".hamburger");
    hamburger.addEventListener("click", function(){
        document.querySelector("body").classList.toggle("active");
    })

Enter fullscreen mode

Exit fullscreen mode

Hope you learned from this tutorial how I created this sidebar menu. I have already made many more designs like this that you can see if you want. If you want to know better how this sidebar works then you can watch its live demo.
Related Post:

Simple Footer HTML CSS
Todo List JavaScript
Stopwatch using JavaScript
Skeleton Screen Loading Animation
Javascript Age Calculator
JavaScript Random Password Generator
Automatic Image Slider in Html CSS
Sidebar Menu Using HTML CSS

You can visit my blog for more tutorials like this.
https://www.foolishdeveloper.com/

Источник