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

Leave a Comment / Css / By /

Содержание

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

schoolsw3.com

САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

❮ НазадВперед ❯

Узнать, как создать вертикальное меню с помощью CSS.

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

ГлавнаяСсылка 1Ссылка 2Ссылка 3Ссылка 4

Редактор кода »

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

Шаг 1) Добавить HTML:

Пример

<div>
  <a href=»#»>Главная</a>
  <a href=»#»>Ссылка 1</a>
  <a href=»#»>Ссылка 2</a>
  <a href=»#»>Ссылка 3</a>
  <a href=»#»>Ссылка 4</a>
</div>

Шаг 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: #4CAF50; /* Добавить зеленый цвет «активная/текущая» ссылки */
  color: white;
}

Редактор кода »

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

ГлавнаяСсылка 1Ссылка 2Ссылка 3Ссылка 4Ссылка 5Ссылка 6Ссылка 7Ссылка 8Ссылка 9Ссылка 10

Установите определенный height и добавить свойство overflow, если вы хотите меню вертикальной прокрутки:

Пример

.vertical-menu {
  width: 200px;
  height: 150px;
  overflow-y: auto;
}

Редактор кода »

Совет: Проверьте наши учебник Как сделать — Боковую панели навигации чтобы узнать, как создать фиксированную, полноразмерную боковую навигацию.

❮ НазадВперед ❯

ВЫБОР ЦВЕТА
ТОП Учебники
HTML Учебник
CSS Учебник
JavaScript Учебник
КАК Учебник
SQL Учебник
Python Учебник
W3. CSS Учебник
Bootstrap Учебник
PHP Учебник
Java Учебник
C++ Учебник
jQuery Учебник
ТОП Справочники
HTML Справочник
CSS Справочник
JavaScript Справочник
SQL Справочник
Python Справочник
W3.CSS Справочник
Bootstrap Справочник
PHP Справочник
HTML Цвета
Java Справочник
Angular Справочник
jQuery Справочник
ТОП Примеры
HTML Примеры
CSS Примеры
JavaScript Примеры
КАК Примеры
SQL Примеры
Python Примеры
W3.CSS Примеры
Bootstrap Примеры
PHP Примеры
Java Примеры
XML Примеры
jQuery Примеры

Форум | О SchoolsW3

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

Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Авторское право 1999- Все права защищены.
SchoolsW3 работает на площадке от SW3.CSS.

Создаем вертикальное меню на CSS – Zencoder

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

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

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

Механизм действия и построения такого меню основан на одном единственном CSS-свойстве — 

1

display
, а точнее на его значениях — 
1

display: block
и 
1

display: none
.

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

Такая навигация называется 

1

меню-аккордеон
и принцип его создания будет рассмотрен позже.

C чего же мы начнем? С построения обычного маркированного списка, пунктами которого будут ссылки. Списку зададим класс с именем 

1

menu
, так как он нам понадобиться в дальнейшем:

<ul>
  <li>
    <a href="#">Punkt 1</a>
  </li>
  <li>
    <a href="#">Punkt 2</a>
  </li>
  <li>
    <a href="#">Punkt 3</a>
  </li>
  <li>
    <a href="#">Punkt 4</a>
  </li>
  <li>
    <a href="#">Punkt 5</a>
  </li>
</ul>

Созданное только что меню будет внешним, а внутри него (точнее внутри его пунктов) мы поместим еще одно меню. Получиться одно меню, вложенное в другое (помните уроки HTML?).

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

1

display
из none в 
1

block
и наоборот.

В итоге получиться пять подменю, для каждого из которых мы пропишем один класс — 

1

sub-menu
. Этот класс нам также потребуется в дальнейшем:

<ul>
  <li>
    <a href="#">Punkt 1</a>
        <ul>
      <li>
        <a href="#">Punkt 1-1</a>
      </li>
      <li>
        <a href="#">Punkt 1-2</a>
      </li>
      <li>
        <a href="#">Punkt 1-3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Punkt 2</a>
        <ul>
      <li>
        <a href="#">Punkt 2-1</a>
      </li>
      <li>
        <a href="#">Punkt 2-2</a>
      </li>
      <li>
        <a href="#">Punkt 2-3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Punkt 3</a>
        <ul>
      <li>
        <a href="#">Punkt 3-1</a>
      </li>
      <li>
        <a href="#">Punkt 3-2</a>
      </li>
      <li>
        <a href="#">Punkt 3-3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Punkt 4</a>
        <ul>
      <li>
        <a href="#">Punkt 4-1</a>
      </li>
      <li>
        <a href="#">Punkt 4-2</a>
      </li>
      <li>
        <a href="#">Punkt 4-3</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">Punkt 5</a>
        <ul>
      <li>
        <a href="#">Punkt 5-1</a>
      </li>
      <li>
        <a href="#">Punkt 5-2</a>
      </li>
      <li>
        <a href="#">Punkt 5-3</a>
      </li>
    </ul>
  </li>
</ul>

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

*{
  margin: 0;
  padding: 0;
}
a{
  text-decoration: none;
}
ul{
  list-style-type: none;
}
.menu{
  margin: 30px 0 0 30px;
  width: 100px;
}

Здесь мы обнуляем 

1

margin
и 
1

padding
для всех элементов, в том числе и ; убираем маркер у пунктов меню; убираем подчеркивание у ссылок.

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

1

100px
.

Дальше форматируем пункты меню:

.menu li{
    position: relative;
    line-height: 20px;
    background-color: #ccc;
    margin-bottom: 1px;
  }

Ставим высоту каждого элемента равной 20px и выравниваем текст внутри него по центру вертикали; задаем фоновый цвет для них же, чтобы можно было различать каждый из пунктов на фоне окна браузера; делаем нижний 

1

margin
в 1px, чтобы элементы не сливались между собой и были похожи на пункты меню.

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

Далее чисто косметические правила для ссылок, находящихся внутри внешнего меню — размер шрифта (кегль) и цвет текста:

.menu li a{
  font-size: 16px;
  color: #000;
}

Теперь приступаем к самому интересному — стилизации подменю. Для начала зададим его ширину (пусть будет чуть меньше ширины внешнего списка):

.sub-menu{
  width: 90px;
}

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

И самое главное — скроем его отображение в браузере через правило 

1

display: none
. В результате код будет выглядеть следующим образом:

.
  sub-menu{
  width: 90px;
  position: absolute;
  left: 100px;
  top: 0;
  display: none;
}

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

.sub-menu li{
  background-color: #aaa;
}
  .sub-menu li a{
    color: #fff;
  }

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

1

display
значение 
1

block
при наведении мыши на ссылку во внешнем списке:

.menu li:hover .sub-menu{
  display: block;
}

В результате подменю отобразиться (браузер сгенерирует его). Изначально в коде было прописано для него 

1

display: none
. То есть, для браузера такого подменю не существовало и в DOM-модели документа элемент с классом 
1

sub-menu
отсутствовал.

Так как этому подменю задано абсолютное позиционирование со смещением вправо на 

1

100px
и вверх на , то оно поместиться точно справа вверху от своего родителя — пункта меню внешнего списка.

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

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

На этом все.

css

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

❮ Назад Далее ❯

Узнайте, как создать вертикальное меню с помощью CSS.

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

Главная страница Ссылка 1 Ссылка 2 Ссылка 3 Ссылка 4

Попробуйте сами »

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

Шаг 1) Добавьте HTML:

Пример

Шаг 2) Добавьте CSS:

Пример

.vertical-menu {
  ширина: 200 пикселей; /* Установите ширину, если хотите */
}

.vertical-menu a {
  background-color: #eee; /* Серый цвет фона */
  color: black; /* Черный текст цвет */
  отображение: блок; /* Сделать так, чтобы ссылки отображались ниже друг друга */
  padding: 12px; /* Добавляем отступы */
  украшение текста: нет; /* Удалить подчеркивание из ссылок */
}

.vertical-menu a:hover {
 фоновый цвет: #ccc; /* Темно-серый фон при наведении мыши */
}

. vertical-menu a.active {
  background-color: #04AA6D; /* Добавляем зеленый цвет к ссылке «активный/текущий» */
  цвет: белый;
}

Попробуйте сами »

Меню вертикальной прокрутки

Главная Ссылка 1 Ссылка 2 Ссылка 3 Ссылка 4 Ссылка 5 Ссылка 6 Ссылка 7 Ссылка 8 Ссылка 9Ссылка 10

Задайте конкретную высоту и добавьте свойство overflow , если хотите меню с вертикальной прокруткой:

Пример

.vertical-menu {
  width: 200px;
 высота: 150 пикселей;
переполнение-у: авто;
}

Попробуйте сами »

Совет: Ознакомьтесь с нашим учебным пособием How To-Side Navigation, чтобы узнать, как создать фиксированную боковую навигацию во всю высоту.

❮ Предыдущий Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

800 Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Вертикальная панель навигации CSS

❮ Предыдущая Следующая ❯

Вертикальная панель навигации

  • Главная
  • Новости
  • Связаться с
  • О

Чтобы построить вертикальную панель навигации, вы можете стилизовать элементы внутри списка, в дополнение к коду с предыдущей страницы:

Пример

ли а {
дисплей: блок;
ширина: 60 ​​пикселей;
}

Попробуйте сами »

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

Вы также можете установить ширину

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

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