Вертикальное меню для сайта
Простой элегантный вариант оформления. Подходит для стилизации категорий на сайте. При наведении элемент списка меняет цвет ссылки.
* .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
Вертикальное меню
Здесь вы узнаете, как сделать вертикальное меню при помощи CSS.
Вертикальное меню
Как сделать вертикальное меню
Шаг 1) Добавляем HTML:
Главная Ссылка 1 Ссылка 2 Ссылка 3 Ссылка 4
Шаг 2) Добавляем CSS:
.vertical-menu < width: 200px; /* Если нужно, задаем ширину */ >.vertical-menu a < background-color: #eee; /* Серый фон */ color: black; /* Черный текст */ display: block; /* Чтобы ссылки отображались друг под другом */ padding: 12px; /* Отступы */ text-decoration: none; /* Убираем у ссылок подчеркивание */ >.vertical-menu a:hover < background-color: #ccc; /* Темно-серый фон при наведении курсора */ >.vertical-menu a.active < background-color: #04AA6D; /* Зеленый фон для "активной/текущей" ссылки */ color: white; >
Вертикальное меню с прокручиванием
Если требуется сделать, чтобы вертикальное меню прокручивалось, задайте высоту height и добавьте свойство overflow :
CSS меню
Если ваш веб-сайт не ограничивается одной веб-страницей, то стоит подумать о добавлении панели навигации (меню). Меню — раздел веб-сайта, предназначенный помогать посетителю перемещаться по сайту. Любое меню представляет собой список ссылок, ведущих на внутренние страницы сайта. Самым простым способом добавить панель навигации на сайт является создание меню с помощью CSS и HTML.
Вертикальное меню
Первым шагом создания вертикального меню будет создание маркированного списка. Также нам нужно будет иметь возможность идентифицировать список, поэтому мы добавим к нему атрибут id с идентификатором «navbar». Каждый элемент нашего списка будет содержать по одной ссылке:
Наша следующая задача заключается в сбросе стилей списка, установленных по умолчанию. Нам нужно убрать внешние и внутренние отступы у самого списка и маркеры у пунктов списка. Затем зададим нужную ширину:
#navbar
Теперь пришло время стилизовать сами ссылки. Мы добавим к ним фоновый цвет, изменим параметры текста: цвет, размер и насыщенность шрифта, уберем подчеркивание, добавим небольшие отступы и переопределим отображение элемента со строчного на блочный. Дополнительно были добавлены левая и нижняя рамки к пунктам списка.
Самой важной частью наших изменений является переопределение строчных элементов на блочные. Теперь наши ссылки занимают все доступное пространство пунктов списка, то есть для перехода по ссылке нам больше не нужно наводить курсор точно на текст.
#navbar a < background-color: #949494; color: #fff; padding: 5px; text-decoration: none; font-weight: bold; border-left: 5px solid #33ADFF; display: block; >#navbar li
Мы объединили весь код, описанный выше, в один пример, теперь, нажав на кнопку попробовать, вы можете перейти на страницу с примером и увидеть результат:
При наведении курсора мыши на пункт меню его внешний вид может изменяться, привлекая к себе внимание пользователя. Создать такой эффект можно с помощью псевдо-класса :hover.
Вернемся к рассмотренному ранее примеру вертикального меню и добавим в таблицу стилей следующее правило:
#navbar a:hover
Горизонтальное меню
В предыдущем примере мы рассмотрели вертикальную панель навигации, которую чаще всего можно встретить на сайтах слева или справа от области с основным контентом. Однако меню с навигационными ссылками также часто располагается и по горизонтали в верхней части веб-страницы.
Для размещения пунктов меню по горизонтали, сначала создадим маркированный список с ссылками:
Напишем для нашего списка пару правил, сбрасывающих стиль используемый для списков по умолчанию, и переопределим пункты списка с блочных на строчные:
#navbar < margin: 0; padding: 0; list-style-type: none; >#navbar li
Теперь нам осталось лишь определить стилевое оформление для нашего горизонтального меню:
#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
Выпадающее меню
Меню, которое мы будем создавать, будет иметь основные навигационные ссылки, расположенные в горизонтальной панели навигации, и подпункты, которые будут отображаться только после наведения курсора мыши на тот пункт меню, к которому эти подпункты относятся.
Сначала нам нужно создать HTML-структуру нашего меню. Основные навигационные ссылки мы поместим в маркированный список:
#navbar ul < display: none; >#navbar li:hover ul
Убираем у обоих списков отступы и маркеры, установленные по умолчанию. Элементы списка с навигационными ссылками делаем плавающими, формируя горизонтальное меню, но для элементов списка, содержащих подпункты задаем float: none;, чтобы они отображались друг под другом.
#navbar, #navbar ul < margin: 0; padding: 0; list-style-type: none; >#navbar li < float: left; >#navbar ul li
Затем нам нужно сделать так, чтобы наше выпадающее подменю не смещало контент, расположенный под панелью навигации, вниз. Для этого мы зададим пунктам списка position: relative;, а списку, содержащему подпункты position: absolute; и добавим свойство top со значением 100%, чтобы абсолютно позиционированное подменю отображалось точно под ссылкой.
#navbar ul < display: none; position: absolute; top: 100%; >#navbar li < float: left; position: relative; >#navbar
Высота для родительского списка была добавлена специально, так как браузеры не учитывают в качестве содержимого элемента плавающий контент, то без добавления высоты наш список будет проигнорирован браузером и контент, следующий за списком, будет обтекать наше меню.
Теперь нам осталось стилизовать оба наших списка и выпадающее меню будет готово:
#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
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru
Как сделать вертикальное меню css
WordPress 6 с Нуля до Гуру
Этот курс научит Вас созданию самых разных сайтов на самой популярной в мире CMS — WordPress. Вы увидите установку и настройку локального сервера, разбор каждой настройки, каждой кнопки и каждого пункта меню в панели WordPress.
Также Вы получите и всю практику, поскольку прямо в курсе с нуля создаётся полноценный Интернет-магазин, который затем публикуется в Интернете. И всё это прямо на Ваших глазах.
Помимо уроков к курсу идут упражнения для закрепления материала.
И, наконец, к курсу идёт ценнейший Бонус по тому, как используя ChatGPT и создавая контент для сайта, можно выйти на пассивный доход. Вы наглядно увидите, как зарегистрироваться в ChatGPT (в том числе, и если Вы из России), как правильно выбрать тему для сайта, как правильно генерировать статьи для него(чтобы они индексировались поисковыми системами) и как правильно монетизировать трафик на сайте.
Уроки и статьи
Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.
Подписаться
Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.
Подписаться
Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.
Мой аккаунт Моя группа
Какая тема Вас интересует больше?