Как сделать меню слева html css
Перейти к содержимому

Как сделать меню слева html css

  • автор:

Вертикальное меню для сайта

Простой элегантный вариант оформления. Подходит для стилизации категорий на сайте. При наведении элемент списка меняет цвет ссылки.

* .widget < padding: 20px 30px; background: white; font-family: 'Roboto', sans-serif; >.widget-title < text-transform: uppercase; letter-spacing: 2px; color: #222; font-size: 16px; padding-left: 15px; margin-bottom: 15px; border-left: 2px solid #b99d61; >.widget-list < padding: 0; list-style: none; >.widget-list a:before < content: "\2014"; margin-right: 14px; >.widget-list a < text-decoration: none; outline: none; display: block; padding: 6px 0; letter-spacing: 1px; font-weight: 300; color: #444; transition: .3s linear; >.widget-list a:hover

2. Вертикальное меню в стиле «схема метро»

Интересное решение для оформления вертикального меню, предусмотрено добавление вложенных меню. «Ветка метро» — левая граница списка, маркеры генерируются перед каждой ссылкой.

.metro < list-style: none; padding: 0; margin: 30px 0 0 50px; border-left: 5px solid #DAE4F1; >.metro li .metro ul < margin: 20px 0 20px 15px; padding: 0; border: none; list-style: none; >.metro ul:before, .metro ul:after < content: ""; width: 5px; height: 28px; background: #DAE4F1; position: relative; display: block; left: -9px; >.metro ul:before < transform: rotate(-45deg); margin-top: -15px; >.metro ul:after < transform: rotate(45deg); bottom: -20px; >.metro ul li .metro ul li:first-child < margin-top: -5px; padding-top: 5px; >.metro ul li:last-child < padding-bottom: 9px; margin-bottom: -25px; >.metro a < text-decoration: none; display: block; font-family: 'Noto Sans', sans-serif; color: #4A4B4D; >.metro a:before

3. Вертикальное меню с эффектами при наведении

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

.category-wrap < padding: 15px; background: white; width: 200px; box-shadow: 2px 2px 8px rgba(0,0,0,.1); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; >.category-wrap h3 < font-size: 16px; color: rgba(0,0,0,.6); margin: 0 0 10px; padding: 0 5px; position: relative; >.category-wrap h3:after < content: ""; width: 6px; height: 6px; background: #80C8A0; position: absolute; right: 5px; bottom: 2px; box-shadow: -8px -8px #80C8A0, 0 -8px #80C8A0, -8px 0 #80C8A0; >.category-wrap ul < list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(0,0,0,.3); >.category-wrap li .category-wrap a < text-decoration: none; display: block; font-size: 13px; color: rgba(0,0,0,.6); padding: 5px; position: relative; transition: .3s linear; >.category-wrap a:after < content:"\f18e"; font-family: FontAwesome; position: absolute; right: 5px; color: white; transition: .2s linear; >.category-wrap a:hover

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

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

* .widget < padding: 20px; border: 5px solid #f1f1f1; background: #fff; border-radius: 5px; font-family: 'Roboto', sans-serif; >.widget h3 < margin-bottom: 20px; text-align: center; font-size: 24px; font-weight: normal; color: #424949; >.widget ul < margin: 0; padding: 0; list-style: none; width: 250px; >.widget li < border-bottom: 1px solid #eaeaea; padding-bottom: 15px; margin-bottom: 15px; >.widget li:last-child < border-bottom: none; margin-bottom: 0; padding-bottom: 0; >.widget a < text-decoration: none; color: #616a6b; display: inline-block; >.widget li:before < font-family: FontAwesome; font-size: 20px; vertical-align:bottom; color: #dd3333; margin-right: 14px; >.widget li:nth-child(1):before .widget li:nth-child(2):before .widget li:nth-child(3):before .widget li:nth-child(4):before .widget li:nth-child(5):before

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

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

 

Распродажа

Продукт 1
 
₽ 2000
Продукт 2
 
₽ 2500
Продукт 3
 
₽ 2070
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600'); .col < width: 300px; background: white; padding: 20px; border: 1px solid #eeeeee; font-family: 'Open Sans', sans-serif; >.col * .widget-title < margin: 0 0 30px; line-height: 1; text-transform: uppercase; letter-spacing: 1px; font-size: 20px; color: #242424; overflow: hidden; >.widget-title:after < content: ""; position: relative; display: inline-block; width: 100%; vertical-align: middle; right: -15px; margin-right: -100%; border-top: 2px solid #cca86d; >.price-line .price-line:last-child .price-line:after < content: ""; display: table; clear: both; >.product-image < width: 80px; float: left; >.product-image a < display: block; outline: none; >.product-image img < display: block; width: 100%; >.product-content < float: left; margin-left: 20px; >.product-title < font-size: 18px; margin-bottom: 10px; line-height: 1; >.product-title a < text-decoration: none; color: #242424; >.price-box < color: #666; font-size: 18px; line-height: 1; >.star-rating < margin-bottom: 10px; font-size: 13px; position: relative; font-family: 'FontAwesome'; >.star-rating:before

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

Сегодня мы поговорим о том как сделать подобное меню:

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

Итак, для начала я добавлю разметку:

 
Главная
Услуги
Преимущества
Обратная связь

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

.block < height: 1000px; width: 100%; text-align: center; font-size: 24px; color: #FFF; padding: 40px 0; >/* Для каждого блока свой цвет: */ .one < background: #000; >.two < background: #939346; >.three < background: #CC6633; >.four

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

.menu_right < position: fixed; /*Задаем фиксированную позицию */ top: 35%; /*Задаем расстояние сверху на котором будет наше меню*/ right: 40px;/*Задаем расстояние справа(или слева, если ваше меню должно быть слева)*/ >.menu_right ul < list-style-type: none;/*Убираем свойства маркированного списка */ height: 250px;/*Задаем высоту */ display: flex;/*Задаем для того что бы мы могли легко и просто манипулировать положением li */ flex-direction: column;/*Делаем меню вертикально*/ justify-content: space-evenly;/*И задаем расстояние между объектами */ >.menu_right ul li < position: relative;/*Относительно li будут располагаться div с пунктом меню */ >.menu_right ul li a span < display: block; background-color: #8bc34a;/*Цвет для span*/ width: 15px;/*Ширина для span*/ height: 15px;/*Высота для span*/ transform: rotate(45deg);/*Поворот span */ >.menu_right ul li a:hover span < background-color: #dadada;/*Цвет для span при наведении на него*/ box-shadow: 0px 0px 14px 4px #dadada;/*Тень для span при наведении на него*/ transform: rotate(45deg);/*Поворот span */ >.menu_right ul li a div < position: absolute;/*Положение задается относительно li*/ right: 30px;/*Справа относительно li*/ top: -10px;/*Сверху относительно li*/ height: 0; opacity: 0; overflow: hidden;/*Данные пункты позволяют нам полность скрыть пункты меню, высвечивающиеся при наведении*/ border-radius: 5px;/*Обычное закругление углов div*/ transition: opacity 1.5s;/*Время проявление div при наведении*/ >.menu_right ul li a:hover>div < position: absolute;/*Положение задается относительно li*/ right: 30px;/*Справа относительно li*/ top: -10px;/*Сверху относительно li*/ opacity: 1;/*Делаем проявление div при наведении*/ padding: 8px 25px; color: #fff;/*Цвет текста*/ overflow: visible; background-color: #0a5014;/*Цвет фона div*/ border: 1px solid #9e9e9e;/*Цвет border*/ border-radius: 5px;/*Обычное закругление углов div*/ white-space: pre;/*для правильной адаптации текста*/ height: 20px;/*Высота div*/ font-size: 18px;/*Размер шрифта*/ >

При желании пункты меню можно сделать круглыми:

.menu_right ul li a span < display: block; background-color: #dadada;/*Цвет для span*/ width: 10px;/*Ширина для span*/ height: 10px;/*Высота для span*/ border-radius: 10px;/*Закругление*/ box-shadow: 0px 0px 14px 4px #dadada;/*Тень для span*/ >.menu_right ul li a:hover span < background-color: #8bc34a;/*Цвет для span при наведении на него*/ box-shadow: 0px 0px 14px 4px #dadada;/*Тень для span при наведении на него*/ >

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

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

 
Главная
Услуги
Преимущества
Обратная связь

Теперь для ссылок в меню мы добавим href=»» с определенным названием соответствующим названию секции:

Якорь в секции: === Сcылка в меню:

Что ж, переходы по блокам мы реализовали, но нам бы хотелось что бы при нахождении на нужной секции подсвечивался пункт меню. Тут одними средствами html/css уже не обойтись. Но, не стоит переживать, просто посмотрите на этот код:

window.addEventListener('scroll', () => < //Добавляем обработчик события "скролл" на окно браузера let scrollDistance = window.scrollY; //Определяем на сколько документ пролистали в данный момент по вертикали и записываем //это в переменную scrollDistance if (window.innerWidth >768) < //Получаем нужные секции(в моем примере это просто divы с классом "block", используем //цикл forEach для перебора элементов, учитывая как сам элемент- "el", //так и его порядковый номер - "i") if (el.offsetTop li>a').forEach((el) => < if (el.classList.contains('active')) < //проверяем при скролле все ссылки и если ссылка уже имеет класс 'active', //то убираем его el.classList.remove('active'); >>); document.querySelectorAll('.menu_right__ul li')[i].querySelector('a').classList.add('active'); //Берем порядковый номер конкретной секции и добавляем ей класс 'active' > >); >

Теперь у нас при скролле или переходе на ту или иную секцию будет добавляться к ссылке(соответствующей данной секции) класс «active» который мы легко использовать в наших целях. Например(для подсветки пункта меню на котором мы находимся):

.menu_right ul li a.active span< background-color: #dadada;/*Цвет для span */ box-shadow: 0px 0px 14px 4px #dadada;/*Тень для span*/ transform: rotate(45deg);/*Поворот span */ >

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

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

Здесь создается навигационное меню с четырьмя пунктами: «Главная», «О нас», «Услуги» и «Контакты».

    свойство display: flex; :

nav ul  display: flex; list-style: none; margin: 0; padding: 0; > nav li  margin-right: 20px; > nav a  color: #000; text-decoration: none; > 

HTML: Боковая панель

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

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

Основной контент страницы. Это может быть статья, описание услуги, данные на странице контакты

Оставить заявку
Читайте также
Услуга 2

Описание новой услуги

Ссылка на услугу
Услуга 3

Описание новой услуги

Ссылка на услугу
Услуга 4

Описание новой услуги

Ссылка на услугу

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

Задание

Создайте шапку сайта. Она состоит из 2-х элементов:

  • Логотип
  • Секция навигации. Внутри неё маркированный список из двух элементов

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

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

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет ��

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

Мой код отличается от решения учителя ��

Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Полезное

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

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

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