Агуулга
- Vertical Navigation Bar
- Vertical Navigation Bar Examples
- Active/Current Navigation Link
- Center Links & Add Borders
- Full-height Fixed Vertical Navbar
- Home
- News
- Contact
- About
To build a vertical navigation bar, you can style the <a> elements inside the list, in addition to the code from the previous page
li a {
display: block;
width: 60px;
}
Example explained:
display: block;– Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width (and padding, margin, height, etc. if you want)width: 60px;– Block elements take up the full width available by default.
We want to specify a 60 pixels width
We want to specify a 60 pixels widthYou can also set the width of <ul>, and remove the width of <a>, as they will take up the full width available when displayed as block elements. This will produce the same result as our previous example:
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li a {
display: block;
}
Create a basic vertical navigation bar with a gray background color and change the background color of the links when the user moves the mouse over them:
- Home
- News
- Contact
- About
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
Add an “active” class to the current link to let the user know which page he/she is on:
- Home
- News
- Contact
- About
.
active {
background-color: #4CAF50;
color: white;
}
Center Links & Add Borders #
Add text-align:center to <li> or <a> to center the links.
Add the border property to <ul> add a border around the navbar. If you also want borders inside the navbar, add a border-bottom to all <li> elements, except for the last one:
- Home
- News
- Contact
- About
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
Create a full-height, “sticky” side navigation:
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /* Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}
What are your Feelings
Бид яаж туслах вэ?
Name: *
Email: *
Message: *
Updated on 05/10/2021
Powered by BetterDocs
Как создать вертикальную панель навигации с помощью HTML и CSS?
Улучшить статью
Сохранить статью
- Последнее обновление: 14 сент, 2021
Улучшить статью
Сохранить статью
Прочитав эту статью, вы сможете создать свою собственную вертикальную панель навигации.
Давайте начнем писать нашу вертикальную панель навигации, сначала мы напишем структуру панели навигации. В этом руководстве мы создадим панель навигации, используя элемент списка HTML. Мы используем font-awesome 5 иконки на панели навигации. Для этого после тега «title» мы добавили тег «script», чтобы включить библиотеку шрифтов -awesome .
HTML
|
fontawesome.com/a076d05399.js" 
0035 
0035> > > . Теперь нам нужно добавить стиль, используя свойства CSS. Во-первых, удалите маркеры, поля и отступы из списка. Теперь задайте цвет фона и определенную ширину.CSS
|
- Стиль list-; Свойство удаляет маркеры из списка HTML.
- Поле : 0; и заполнение: 0; удаляет поля браузера по умолчанию и отступы из элемента.
Чтобы создать вертикальную панель навигации, вы должны стилизовать элементы внутри списка.
CSS
|
- Дисплей : блок; Свойство , отображающее ссылки как блочные элементы, делает область ссылок кликабельной. Это позволяет нам указать ширину (отступы, поля, высоту и т. д.)
- padding: 8px 16px; Верхний и нижний отступы 8px. Отступы справа и слева равны 16px.
- украшение текста: нет; Удалить подчеркивание с элементов
CSS
|
- 8 поле-право Добавляет отступ между текстом и значками.
Окончательный код: Ниже приведена комбинация всех приведенных выше фрагментов кода.
HTML
> Маржа: 0; px < body > Контакт |
icon { .
спросил
Изменено 4 года, 1 месяц назад
Просмотрено 895 раз
У меня возникла проблема с прокруткой вертикального меню на моем веб-сайте в мобильной версии (правило 1299px @media определено). Ссылка: https://my-digital.ro/wp/
Видео, объясняющее проблему: https://youtu.be/K9fQJPb6WMI
Итак, моя проблема в том, что я пытаюсь сделать все меню прокручиваемым на мобильном телефоне. . Он работал нормально, когда я добавил свойство overflow: scroll к элементам, за исключением того, что оно не работает, когда подменю развернуто. Просто застревает, как было переполнение: скрыто и дальше прокрутить не могу.
Фактический CSS:
.clearfix {
дисплей:блок;
ясно: оба;
положение: липкое;
}
Только экран @media и (максимальная ширина: 1299 пикселей) {
#содержание {
положение: абсолютное;
отступ слева: 0px;
z-индекс: 102
}
# главная навигация {
переполнение: прокрутка;
}
.