W3.CSS Sidebar
Open the Sidebar Navigation Over a Part of the Content
Example
function w3_open() <
document.getElementById("mySidebar").style.display = «block»;
>
function w3_close() <
document.getElementById("mySidebar").style.display = «none»;
>
Open the Sidebar Navigation Over the Content
Example
function w3_open() <
document.getElementById("mySidebar").style.width = «100%»;
document.getElementById("mySidebar").style.display = «block»;
>
function w3_close() <
document.getElementById("mySidebar").style.display = «none»;
>
Collapsible Responsive Side Navigation
Example
<script>
function w3_open() <
document.getElementById("mySidebar").style.display = "block";
>
function w3_close() <
document.getElementById("mySidebar").style.display = "none";
>
</script>
Slide the Page Content to the Right
Example
function w3_open() <
document.getElementById(«main»).style.marginLeft = «25%»;
document.getElementById("mySidebar").style.width = «25%»;
document.getElementById("mySidebar").style.display = «block»;
document.getElementById("openNav").style.display = ‘none’;
>
function w3_close() <
document.getElementById(«main»).style.marginLeft = «0%»;
document.getElementById("mySidebar").style.display = «none»;
document.getElementById("openNav").style.display = «inline-block»;
>
Right-sided Side Navigation
Example
<div style=»margin-right:25%»>
. page content .
</div>
Right-sided Collapsible Navigation
Example
<script>
function w3_open() <
document.getElementById("mySidebar").style.display = "block";
>
function w3_close() <
document.getElementById("mySidebar").style.display = "none";
>
</script>
Left & Right Side Navigation
Example
Styling the Side Navigation
Add the w3-color class to the w3-sidebar to change the background color. If you want an active/current link, to let the user know which page he/she is on, add the w3-color class to one of the links as well:
Example
Bordered Side Navigation
Use the w3-border class to add a border around the side navigation:
Example
Add the w3-border-bottom class to the links to create link dividers:
Example
Use the w3-card class to display the side navigation as a card:
Example
Hoverable Links
When you mouse over the links inside a bar block, the background color will change to grey.
If you want a different background color on hover, use any of the w3-hover-color classes:
Example
You can turn off the default hover effect with the w3-hover-none class. This is often used when you only want to highlight text color (and not background color) on hover:
Example
Side Navigation Sizes
Increased font-size (w3-large etc):
Increased padding (w3-padding etc):
Example
Side Navigation with Icons
Example
Sidebar with Dropdown
Example
Tip: When the dropdown menu is «open», the dropdown link gets a grey background color to indicate that it is active. To override this, add a w3-hover-color class to both the «dropdown» <div> and <a>.
Sidebar with Accordion
Example
Animated Sidebar
Use any of the w3-animate-classes to fade, zoom or slide in side navigation:
Example
Sidebar Overlay
The w3-overlay class can be used to create an overlay effect when opening the sidebar. The w3-overlay class adds a black background with a 50% opacity to the "page content" — this effect will «highlight» the side navigation.
Example
<!— Overlay —>
<div onclick="w3_close()" style="cursor:pointer" >
<!— Page content —>
<button w3-xxlarge" onclick="w3_open()">☰</button>
<div > <h1>Sidebar Overlay</h1>
<p>Click on the "hamburger" icon to slide in the side navigation.</p>
</div>
Как сделать — меню с фиксированной боковой навигацией
Узнайте, как создать меню с фиксированной боковой навигацией с помощью CSS.
Создание фиксированной боковой панели
Шаг 1) добавить HTML:
Пример
Шаг 2) добавить CSS:
Пример
/* The sidebar menu */
.sidenav <
height: 100%; /* Full-height: remove this if you want "auto" height */
width: 160px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: #111; /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
>
/* The navigation menu links */
.sidenav a <
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
>
/* When you mouse over the navigation links, change their color */
.sidenav a:hover <
color: #f1f1f1;
>
/* Style page content */
.main <
margin-left: 160px; /* Same as the width of the sidebar */
padding: 0px 10px;
>
/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) <
.sidenav
>
Совет: Чтобы узнать больше о навигационных панелях, перейдите в наш учебник CSS Navigation.
Совет: Чтобы узнать, как создать анимированную, закрывающуюся боковую навигацию, перейдите в руководство по навигации.
CSS Sidebars: A Beginner’s Guide
Sidebars are a staple of website navigation — they’re convenient to users and ensure that certain page elements are always in view. Inside them, you can place links, menus, widgets, CTAs, display ads, or just about anything else you want.
If you’re DIY-ing your website, it’s easy to add sidebars with just a bit of HTML and CSS know-how. You could use a CSS framework like Bootstrap CSS for your sidebar — this template from Start Bootstrap provides a simple, mobile-friendly sidebar interface you can try. Or, you might want a pure CSS implementation.
In this article, you’ll learn several ways to make a sidebar with CSS along with some sidebar examples. We’ll make static sidebars, fixed and sticky sidebars, full-page sidebars, sidebars in CSS grids, and collapsible sidebars. That’s a lot to cover, so let’s dive in.
Создание сайдбара с помощью HTML, CSS и JavaScript
Предлагаю пошаговое руководство по создания отзывчивого сайдбара (боковой панели). Этот графический элемент можно использовать для навигации в любых веб-проектах. Уверен, что существует миллион различных способов создания боковой панели, но я выбрал именно этот.
Все шаги руководства будут доступны каждому, кто обладает базовыми знаниями в области HTML, CSS и JavaScript. Замечу, что изначально этот сайдбар создавался для использования на дашборде/CMS, поскольку он позволяет добавить множество опций меню.
Из личных предпочтений я использовал ванильный JavaScript вместо jQuery. Единственная необходимая зависимость — Font Awesome 6.2 — последняя доступная на данный момент версия. Я использовал бесплатную версию Font Awesome 6.2, доступ к которой можно получить здесь.
Чтобы начать работу, выполните следующие шаги. Вы можете скачать код из GitHub по этой ссылке.
Шаг 1: Настройте HTML и не забудьте добавить Font Awesome 6.2 CDN в тег <head> .
Шаг 2: Настройте CSS.
Шаг 3: Добавьте JS.
Вы можете дополнительно включить в сайдбар такой элемент, как меню “Избранное”, и динамически загружать понравившиеся страницы. Если вы используете стек LAMP, то, вероятно, примерно представляете, как добавить эту функцию.