Vertical menu css html: How to create a vertical menu with CSS?

Содержание

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

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

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

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

Читать

Обсудить

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

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

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

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

и .

Синтаксис:

 
  Главная
  1
  ...
  нет

Пример:

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   =   "#"   Класс   =   "Active"  > Дом   A  > 
   .
  0051 A   HREF   =   "#"  > около США   A  >  0    <  A 0   . Contact Us  a   > 
             <   a   href   =   "#"   >Login   a   > 
             <   a   href   =   "#"   >Sign Up  a   > 
           div   > 
     body   > 
      
    html   >

Output:

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

Синтаксис:

 
    Главная
    1
    ...
    нет

Пример:

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 {
    ФОНАР. 
                 цвет: белый; 
             } 
       
     стиль   > 
    head   > 
      
  <   body   > 
         <   h2   style   =   "color : зеленый; выравнивание текста: по центру;"   > 
             GeeksforGeeks 
            h2 0003
      
         <   h4   >Vertical Menu  h4   > 
       
         <   div   class   =   "vertical -Мену " > 
    <  A   HREF   =  "#"  Класс   =  " Active "  =  " Active "  =  " . 0052  >Home  a   > 
             <   a   href   =   "#"   >About Us   a   > 
    <   a   href   =   "#"   >Contact Us  a   > 
             <   a   HREF   =   "#"  > Вход в систему   A  > 
    <  A   Href                           .   a   > 
           div   > 
    body   > 
      
    html   >

Вывод:

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

?

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

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

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

Читать

Обсудить

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

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

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

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

HTML

< html >

< Голова >

< SRC = 1001.1051.1051.1051.9151.10519151.1051.1051.1051..1051.1051.151.1051.1001.10519159.... " >

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 >

0051 LI >

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

около

111.0052 a >

li >

ul >

body >

html >

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