Вертикальное меню css примеры: Как сделать вертикальное меню

alexxlab

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

Сегодня я приведу пример создания вертикального выпадающего меню оформленного с помощью CSS. Постараюсь задействовать как можно больше свойств css, чтобы наглядно показать, как можно оформить созданное меню. Меню будет полностью оформлено с использованием Каскадных таблиц стилей. Единственно, что пришлось сделать с помощью JavaScript, это эффект выпадающего меню для Internet Explorer, т.к одно из нужных свойств он всё таки не поддерживает.

Для начала нужно построить структуру нашего меню. Она будет состоять из ненумерованного базового списка включающего в себя списки-подменю.
index.html

<title>Вертикальное выпадающее меню на CSS</title>
<script type="text/javascript" src="cssmenu.js"></script>
 	<link rel="stylesheet" type="text/css" href="style.css">
 
<ul>
 
 	<li><a href="#">Главная страница</a></li>
 
 
 	<li><a href="#">Создание сайтов</a>
 
<ul>
 
 	<li><a href="#">Дизайн сайтов</a></li>
 
 
 	<li><a href="#">Вёрстка сайтов</a></li>
 
 
 	<li><a href="#">Оптимизация сайтов</a></li>
 
</ul>
 
</li>
 
 
 	<li><a href="#">Продвижение сайтов</a>
 
<ul>
 
 	<li><a href="#">SEO продвижение</a></li>
 
 
 	<li><a href="#">SMO продвижение</a></li>
 
</ul>
 
</li>
 
 
 	<li><a href="#">SEO биржи</a></li>
 
 
 	<li><a href="#">SEO софт</a></li>
 
</ul>

style. css

<div>
/* Убираем отступы и маркеры в ненумерованном списке, задаём ширину и стили оформления */
ul {
padding: 0;
margin: 0;
list-style: none;
width: 140px;
list-style: none;
border-bottom: 1px solid #C1D8E6;
font-size: 11px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
/* Задаём относительное позиционирование выпадающего списка */
ul li {
position: relative;
}
/* Задаём абсолютное позиционирование выпадающего списка, сдвиг влево на 139 px, чтобы выпадающее меню перекрывало главное и не создавалась двойная граница, по умолчанию выпадающий список будет скрыт */
li ul {
position: absolute;
left: 139px;
top: 0;
display: none;
}
/* Задаём стили для ссылок */
ul li a {
display: block;
text-decoration: none;
color: #003399;
background: #EAF4FF;
background-image:  url('images/bullet-arrow.gif') ;
background-repeat: no-repeat;
background-position: 1px 9px;
padding: 5 5 5 10;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Указываем браузеру, что подменю будет появляться, когда курсор находится над элементом списка.
  */
li:hover ul, li.over ul{
display: block;
}
/* Задаём стили для выпадающего меню */
ul li a:hover {
background: #77CF7F;
background-image:  url('images/bullet-arrow.gif') ;
background-repeat: no-repeat;
background-position: 1px 9px;
text-decoration: none;
}
/* ХАК для ie, чтобы и там всё корректно отображалось:)*/
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */</div>

JavaScript нужен, чтобы заставить выпадающее меню работать в Internet Explorer. В остальных браузерах должно работать без него.

Вот так работает наше меню — Вертикальное выпадающее меню на CSS
Скачать Example1.zip

Твитнуть

Метки: вертикальное выпадающее меню, выпадающее меню на CSS, примеры 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

Как создать вертикальное меню с помощью HTML и CSS?

Улучшить статью

Сохранить статью

  • Уровень сложности: Средний
  • Последнее обновление: 16 ноя, 2021

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

    Вертикальное меню: Мы можем создать вертикальное меню в виде кнопок и меню с возможностью прокрутки. Вертикальное меню — это кнопки, расположенные в вертикальной строке меню/навигационной панели.

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

    ,
  • и .

    Синтаксис:

    Пример:

     

    HTML

    < html >

       

    < head >

         < meta name = "viewport" content =

             "width=device-width,initial-scale=1"

    2

    20052

    < Стиль >

    . ВЕРТИЧЕСКИЙ МЕНУ {

    ;

    }

    . ВОДЕРТА-МЕНУ A {

    ФОНАЛОР: #EEE;

                 цвет: черный;

                 дисплей: блок;

                 отступ: 12 пикселей;

                 украшение текста: нет;

    }

    . ВОДЕРЬ МЕНУ A: HOVER {

    ФОНАЛЬНЫЙ

             }

    . ВОДИТЕЛЬНЫЙ Мену A.Active {

    ФОНАЛОР: #04AA6D;

                 цвет: белый;

    }

    .0052

    < Body >

    < H2 Стиль = "Цвет: зеленый;" >

             GeeksforGeeks

         h2 >

           

         < h4 >Vertical Menu h4 >

       

         < div class = "vertical-menu" >

             < a href = "#" Класс = "Актив" > Дом A >

    <

    . 0051 a href = "#" >About Us a >

             < a href = "#" > Contact Us a >

             < a href = "#" >Login a >

    < A HREF = "#" > Зарегистрируйтесь A >

    A >

    . Body >

    HTML >

    9002 . 0003

    Как создать a вертикальное меню с помощью прокрутки: Здесь мы увидим, как создать вертикальное меню с помощью прокрутки. Для этого мы будем использовать простой HTML и CSS.

    Синтаксис:

    Пример:

    HTML

    < html >

       

    < head >

         < meta name = "область просмотра" контент =

             "width=device-width,initial-scale=1"

    2

    < Стиль >

    . ВВЕТАЛЬНЫЙ МЕНУ {

    WIDTH: 200PX;

                 высота: 150 пикселей;

                 переполнение-у: авто;

             }

       

             . .vertical-menu0052

                 background-color: #eee;

                 цвет: черный;

                 дисплей: блок;

                 отступ: 12 пикселей;

                 украшение текста: нет;

             }

       

             :vertical-menu0052

                 background-color: #ccc;

    }

    . ВОДЕРЖАНИЕ-Мену A.Active {

    ФОНАЛОКОР: #04AA6D;

                 цвет: белый;

             }

         стиль >

    head >

       

    < body >

         < h2 style = "color : зеленый; выравнивание текста: по центру;" >

             GeeksforGeeks

         h2 0003

       

         < h4 >Vertical Menu h4 >

       

         < div class = "vertical -Мену " >

    < A HREF = "#" Класс = " Актив " = " Актив = ". 0052 >Home a >

             < a href = "#" >About Us a >

    < A HREF = "#" > Свяжитесь с нами A >

    110051

    -

    111111111 гг.0051 href = "#" >Login a >

             < a href = "#" >Sign Up a >

         div >

    body >

       

    html >

    Вывод:


    Статьи по теме Как создать вертикальную панель и навигацию с помощью HTML

    ?

    Улучшить статью

    Сохранить статью

    • Последнее обновление: 14 сент, 2021

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

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

    Давайте начнем писать нашу вертикальную панель навигации, сначала мы напишем структуру панели навигации. В этом руководстве мы создадим панель навигации, используя элемент списка HTML. Мы используем шрифт — потрясающие 5 значков на панели навигации. Для этого после тега «title» мы добавили тег «script», чтобы включить библиотеку шрифтов — потрясающую библиотеку .

    HTML

    < html >

    < Голова >

    < SRC = SRC = . " >

         script >

    head >

     

    < body >

         < ul >

             < li >

                 < a href = " #" класс = "активный" >

                            < i 0051 = "fas fa-home icon" > i >

                     Home

                 a >

             < / LI >

    < LI > < A HREF = "# = "# = "# = 0051 >

                     < i class = "fas fa-rss icon" > i >

                     News

                 A >

    LI >

    <

    <

    <

    <0052 LI > < A HREF = "#" >

    . « > I >

    Контакт

    A > 9003

    A >

    A0051 LI >

    < LI > < A HREF = A A . = "ICON FAS FA-USER" > I >

    около

    0052 a >

             li >

         ul >

    body >

     

    html >

    Мы определили структуру веб-страницы с помощью HTML. Теперь нам нужно добавить стиль, используя свойства CSS. Во-первых, удалите маркеры, поля и отступы из списка. Теперь задайте цвет фона и определенную ширину.

    CSS

    • стиль list-; Свойство удаляет маркеры из списка HTML.
    • Поле : 0; и заполнение: 0; удаляет поля браузера по умолчанию и отступы из элемента.

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

    CSS

    CSS

    Окончательный код: Ниже приведена комбинация всех приведенных выше фрагментов кода.

    HTML

    < html >

    < head >

         < title > Название страницы title >

          < Сценарий SRC = "

    https://kit.fontawesom < стиль >

           ul {

             2 2       

             поля: 0;

             заполнение: 0;

             ширина: 300 пикселей;

             background-color: #f1f1f1;

           }

           li a {

              5 блок 90        5 1;

             цвет: #000;

             отступы: 8 пикселей 16 пикселей;

             украшение текста: нет;

           }

     

           /* Change the link color on hover */

           li a:hover {

             background-color: #fad390;

             цвет: #fff;

           }

           . icon {

             поле справа: 10 пикселей;

           }

       style >

    head >

    < body >

         < ul >

             < li >< a href = "#" class = "active" >

                < i class = «Fas FA-Home Icon» > I >

    Главная A > LI > > LI >

    9000.

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

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

    Copyright © 2025
    Дропшиппинг в России.
    Сообщество поставщиков дропшипперов и интернет предпринимателей.
    Все права защищены.
    ИП Калмыков Семен Алексеевич. ОГРНИП: 313695209500032.
    Адрес: ООО «Борец», г. Москва, ул. Складочная 6 к.4.
    E-mail: mail@russia-dropshipping.ru. Телефон: +7 (499) 348-21-17