- CSS Вертикальная панель навигации
- Пример
- Пример
- Примеры вертикальной панели навигации
- Пример
- Активная / текущая навигационная ссылка
- Пример
- Центрировать ссылки и добавлять границы
- Пример
- Фиксированная вертикальная навигационная панель во всю высоту
- Пример
- Сообщить об ошибке
- Ваше предложение:
- Спасибо Вам за то, что помогаете!
- CSS Vertical Navigation Bar
- Example
- Active/Current Navigation Link
- Example
- Center Links & Add Borders
- Example
- Full-height Fixed Vertical Navbar
- Example
- Create a Vertical menu & Horizontal Navigation Bar using HTML CSS
- The HTML Code for Horizontal Navigation Bar
- The CSS code
- Creating the Vertical Navigation bar (Vertical menu)
- CSS code
- Read also
- How to design Bootstrap Vertical Tab
- How to Create Bootstrap 5 Cards Templates
- Create a Vertical menu & Horizontal Navigation Bar using HTML CSS
- Share this:
- Related Post
- Owl Carousel Product Slider in HTML5
- Review Page Design in HTML5 Download
- Product Grid in HTML5
- jQuery Carousel Slider With Accordion Style Transitions
- Testimonials HTML Template Free Download
- Bootstrap Table with Pagination and Search
- Leave a Reply Cancel reply
- Search
- Donate
- Categories
- Advertisement
- Quick Links
- Important Links
- Share on
- Privacy Overview
CSS Вертикальная панель навигации
Чтобы создать вертикальную панель навигации, вы можете стилизовать элементы внутри списка в дополнение к коду с предыдущей страницы:
Пример
- display: block; — Отображение ссылок в виде блочных элементов делает кликабельной всю область ссылок (а не только текст), а также позволяет указать ширину (а также отступы, поля, высоту и т.д. если хотите)
- width: 60px; — Элементы блока занимают всю ширину, доступную по умолчанию. Мы хотим указать ширину 60 пикселей
Пример
ul <
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
>
Примеры вертикальной панели навигации
Создайте базовую вертикальную панель навигации с серым цветом фона и измените цвет фона ссылок при наведении на них курсора мыши:
Пример
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;
>
/* Изменить цвет ссылки при наведении курсора */
li a:hover background-color: #555;
color: white;
>
Активная / текущая навигационная ссылка
Добавьте класс «active» к текущей ссылке, чтобы пользователь знал, на какой странице он находится:
Пример
Центрировать ссылки и добавлять границы
- добавьте границу вокруг навигационной панели. Если вам также нужны границы внутри навигационной панели, добавьте border-bottom ко всем элементам
, кроме последнего:
Пример
li text-align: center;
border-bottom: 1px solid #555;
>
li:last-child border-bottom: none;
>
Фиксированная вертикальная навигационная панель во всю высоту
Создайте полноразмерную, «sticky» боковую навигацию
Пример
ul <
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
height: 100%; /* Во всю высоту */
position: fixed; /* Сделайте так, чтобы он прилепал даже к прокрутке */
overflow: auto; /* Включить прокрутку, если sidenav имеет слишком много содержимого */
>
Примечание: Этот пример может неправильно работать на мобильных устройствах.
Мы только что запустили
SchoolsW3 видео
Сообщить об ошибке
Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:
Ваше предложение:
Спасибо Вам за то, что помогаете!
Ваше сообщение было отправлено в SchoolsW3.
ТОП Учебники
ТОП Справочники
ТОП Примеры
SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.
CSS Vertical Navigation Bar
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:
Example
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;
>
Active/Current Navigation Link
Add an «active» class to the current link to let the user know which page he/she is on:
Example
Center Links & Add Borders
- add a border around the navbar. If you also want borders inside the navbar, add a border-bottom to all
elements, except for the last one:
Example
li text-align: center;
border-bottom: 1px solid #555;
>
li:last-child border-bottom: none;
>
Full-height Fixed Vertical Navbar
Create a full-height, «sticky» side navigation:
Example
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 */
>
Note: This example might not work properly on mobile devices.
Create a Vertical menu & Horizontal Navigation Bar using HTML CSS
In this tutorial, I explore two different methods for creating a Vertical menu & Horizontal Navigation Bar using HTML CSS. The snippet is responsive.
First, we will learn how to create a Horizontal Navigation Bar using HTML CSS.
The HTML Code for Horizontal Navigation Bar
Let’s start with the HTML. We have a simple unordered list of hyperlinks. Each list item has a classname.
We will be clearing out the margin and padding on the body.
Subsequently, we’ll style the list to hide the bullets and provides it a background color. Clearing the margin will make it hug the top of the page which we need.
We will write the style CSS for ul inside the #navmenu.
The CSS code
#navmenu > ul > li:hover, #navmenu ul li.active:hover, #navmenu ul li.active, #navmenu ul li.has-sub.active:hover
Final code: The following is the combination of all of the above HTML and CSS code snippets.
#navmenu > ul > li:hover, #navmenu ul li.active:hover, #navmenu ul li.active, #navmenu ul li.has-sub.active:hover
Creating the Vertical Navigation bar (Vertical menu)
Now we will write the HTML and CSS code for the vertical navigation bar. The HTML code looks like.
To create a vertical navigation bar, we can style the elements inside the unordered list .
display: block; – Displaying the hyperlinks as block parts make the entire hyperlink area clickable.
active class: Add an “active” class to the hyperlink to highligt the current page.
CSS code
We hope the vertical navigation bar using HTML and CSS is quite a simple tutorial.
Read also
How to design Bootstrap Vertical Tab
How to Create Bootstrap 5 Cards Templates
Create a Vertical menu & Horizontal Navigation Bar using HTML CSS
Share this:
Related Post
Owl Carousel Product Slider in HTML5
Review Page Design in HTML5 Download
Product Grid in HTML5
jQuery Carousel Slider With Accordion Style Transitions
Testimonials HTML Template Free Download
Bootstrap Table with Pagination and Search
Leave a Reply Cancel reply
Search
Donate
Categories
Adobe Photoshop
API Integrations
Bootstrap 5.0 Tutorials
Database Query
Email Templates
Flask and MongoDB
Google Cloud
HTML and CSS
Javascript
PHP
Search Engine Optimization
Templates
WordPress Theme
Advertisement
Quick Links
Important Links
Share on
© Copyrights 2021. All rights reserved. HTML CSS3 Tutorials
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit «Cookie Settings» to provide a controlled consent. Read More
Privacy Overview
This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
Cookie | Duration | Description |
---|---|---|
cookielawinfo-checkbox-analytics | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Analytics». |
cookielawinfo-checkbox-functional | 11 months | The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category «Functional». |
cookielawinfo-checkbox-necessary | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category «Necessary». |
cookielawinfo-checkbox-others | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Other. |
cookielawinfo-checkbox-performance | 11 months | This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category «Performance». |
viewed_cookie_policy | 11 months | The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data. |
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.