Сайт с фиксированным боковым меню

35 CSS Sidebar Menu Examples

An agglomeration of the top free HTML and CSS sidebar menu code examples. These carefully selected CSS sidebar navigation menus are practical and utilize good color schemes ideal for web design. Moreover, many are responsive sidebars making them great for both desktop and mobile applications.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A Stylish CSS sidebar menu with excellent transition effects on hover over the menu items. It is created using HTML and SCSS. The menu items are highlighted with black bar and gives a smooth transition effect.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A modern and stylish sidebar menu with rounded corner in classic blue background created using pure HTML and CSS. On hover, it will change the background color to white to show the selection giving a very dignified look to the web page.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A decorous, collapsible, responsive sidebar menu created using pure HTML and CSS. On click, it opens a menu with a smooth transition and on hovering of menu items, it shows gradient background.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A sophisticated, alluring side menu in black created with the slide effect on the sub menu items is created using HTML and CSS. When you hover over the side menu icons, menu items appears on the side in a block. When you hover over the menu items it gives a beautiful effect.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A classic collapsible sidebar menu with icons that has a smooth transition effects on hover. It is created using pure HTML and CSS. On hover over the menu, it expands the menu. When you hover over the menu item, it is highlighted with the light blue bar.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Code description:

An awesome triangular mobile CSS sidebar menu with amazing animation effects. It was created using HTML, SCSS, and JQuery. On click, the main page fades out to the right showing triangular sidebar items with nice animations.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A cool CSS sidebar menu with a 3D transition. It is created using HTML, SCSS, and Javascript. When the menu button is clicked, a 3D transition occurs on the main page reviling the sidebar menu to the left. The menu item is highlighted with a white background when you hover over them.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A beautiful, collapsible sidebar created using HTML, SCSS and JS(Babel). When you click on the menu bar, it expands covering the whole page with the different menu items listed on it and a close button to collapse the menu. When you hover over the menu items, it changes the text color to yellow.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A classic, sophisticated bootstrap sidebar menu with smooth transition effects created using HTML, CSS, and jQuery. It highlights the menu items when you you hover over them. It has used font awesome icons to show icons which gives a descent look to the web page.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

An amazing, vertical navigation bar that switches from an icon to text with a cool animation. It is created using HTML5 and CSS3. When you hover over the icons, it will change its face with smooth animation to show text giving a 3D look to the menu.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

An amazing sidebar menu for the medium screen with the sliding effect created using HTML, CSS, and Javascript. On click, it will expand the menu and push the main page right.

Title:

Author:

Created on:

Made with:

Responsive:

Dependencies:

Compatible browsers:

Opera, Firefox, Chrome, Brave, Edge

Code description:

A classic, sophisticated sidebar with the menu icons created using HTML and CSS. When you hover over the icon on the menu, it highlights the menu with a beautiful purple color to give a decent look. This menu bar can be expanded and collapsed using the arrow on the top of menu. It also has a button to switch between dark mode and light mode in the web page.

Источник

Фиксированная боковая панель

Узнать, как создать фиксированное боковое меню навигации с помощью CSS.

Создать фиксированную боковую панель

Шаг 1) Добавить HTML:

Пример

Шаг 2) Добавить CSS:

Пример

/* Меню боковой панели */
.sidenav height: 100%; /* Полная высота: удалите это, если вы хотите «авто» высота */
width: 160px; /* Установите ширину боковой панели */
position: fixed; /* Фиксированная боковая панель (оставайтесь на месте при прокрутке) */
z-index: 1; /* Оставайтесь с верху */
top: 0; /* Оставайтесь на вершине */
left: 0;
background-color: #111; /* Черный */
overflow-x: hidden; /* Отключить горизонтальную прокрутку */
padding-top: 20px;
>

/* Ссылки в меню навигации */
.sidenav a padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
>

/* При наведении курсора мыши на навигационные ссылки измените их цвет */
.sidenav a:hover color: #f1f1f1;
>

/* Стиль содержимого страницы */
.main margin-left: 160px; /* То же, что и ширина боковой панели */
padding: 0px 10px;
>

/* На небольших экранах, где высота меньше 450px, измените стиль боковой панели (меньше отступов и меньший размер шрифта) */
@media screen and (max-height: 450px) .sidenav
.sidenav a
>

Совет: Зайдите на наш учебник CSS Навигации, чтобы узнать больше о навигационных панелях.

Совет: Зайдите на наш учебник Как сделать — Анимированное боковое меню, чтобы узнать, как создать анимированную, закрываемую боковую навигацию.

Источник

Исходники для старта из Github

Все исходники для начала проекта вы сможете скачать по ссылке с моего Github. Там содержатся SVG-иконки, базовые настройки стилей, а также сброс стилей.

Разметка бокового меню

Первым делом сделаем разметку бокового меню в файле index.html. Разметка содержит в себе само меню (класс .menu), а также основной контент (класс .content).

Drivefile
 Home Recents Starred Photos Shared File Delete 

 Get help Logout 

Стили бокового меню

Важно сделать само меню фиксированным, а также растянуть его на всю высоту экрана.

body < width: 100%; min-height: 100vh; background-color: #f5f6fb; >/* Основные свойства для бокового меню */ .menu < display: flex; flex-direction: column; /* размещаем элементы к колонку */ width: 240px; min-height: 100vh; /* на всю высоту экрана */ position: fixed; /* чтобы меню было фиксированным */ top: 0; /* прижимаем к верхнему */ left: 0; /* .. и нижнему краю */ background-color: #343951; box-shadow: 4px 4px 8px 0 rgba(34, 60, 80, 0.2); /* задаем тень, чтобы отделить от фона */ >/* Свойства для контента */ .content < padding-left: 280px; /* отступ от бокового меню 240px + 40px */ padding-top: 40px; padding-right: 40px; padding-bottom: 40px; >.logo < display: flex; align-items: center; /* центрируем логотип с текстом */ color: #fff; font-size: 24px; text-decoration: none; font-family: "Rubik", sans-serif; font-weight: bold; >/* Задаем псеводоэлемент для иконки */ .logo:before < content: url(./img/logo.svg); /* путь от иконки-лого */ padding-right: 8px; /* немного отступим справа */ >/* Позиционирование лого в меню */ .menu__logo < padding-top: 50px; padding-left: 30px; margin-bottom: 59px; >/* Позиционирование элементов в меню */ .menu__link, .admin__link < padding-left: 30px; >/* Свойства для элементов меню */ .link < position: relative; /* чтобы задать потом псевдоэлемент */ display: flex; /* чтобы элемент тянулся на всю ширину */ align-items: center; /* по центру текст и иконка */ height: 45px; /* высота элемента 45px */ text-decoration: none; >/* Свойства иконки внутри ссылки */ .link > img < width: 25px; margin-right: 20px; >/* Свойства текста внутри ссылки */ .link > span < font-family: "Karla", sans-serif; font-size: 20px; color: #fff; >/* При наведении на ссылку - полупрозрачный белый фон */ .link:hover < background-color: rgba(255, 255, 255, 0.1); >/* Выводим оранжевую линию слева */ .link:hover:before < display: flex; >/* Создаем оранжевую линию слева */ .link:before < content: ""; display: none; position: absolute; left: 0; top: 0; width: 5px; height: 100%; background-color: #ffa000; >/* Позиционирование админ-меню */ .menu__admin

Источник

Как создать сайт с фиксированным боковым меню

Узнайте, как создать сайт с фиксированным боковым меню, используя HTML, CSS и JavaScript, для улучшения пользовательского опыта и навигации.

Создание сайта с фиксированным боковым меню может быть полезным, чтобы пользователи всегда имели доступ к навигации, даже когда прокручивают страницу. В этой статье мы покажем, как создать сайт с фиксированным боковым меню, используя HTML, CSS и JavaScript. 😉

Начнем с разметки HTML

Для начала нам нужно создать структуру нашего сайта с помощью HTML. Вот пример такой структуры:

Стилизация с помощью CSS

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

/* Общие стили для body и header */ body < margin: 0; font-family: Arial, sans-serif; >header < background-color: #333; color: white; padding: 1rem; text-align: center; >/* Стили для основного контента и меню */ main < display: flex; >aside < background-color: #f1f1f1; width: 250px; padding: 1rem; position: fixed; height: 100%; overflow: auto; >section < margin-left: 250px; padding: 1rem; >/* Стили для подвала */ footer

Добавление JavaScript (опционально)

Если вы хотите добавить некоторую интерактивность к вашему фиксированному боковому меню, например, чтобы оно скрывалось при клике на кнопку, вы можете использовать JavaScript. Вот пример такого кода:

document.addEventListener("DOMContentLoaded", function() < const toggleMenuButton = document.createElement("button"); toggleMenuButton.textContent = "☰"; toggleMenuButton.style.position = "fixed"; toggleMenuButton.style.top = "1rem"; toggleMenuButton.style.left = "1rem"; toggleMenuButton.style.zIndex = "1000"; toggleMenuButton.addEventListener("click", function() < const aside = document.querySelector("aside"); aside.style.display = aside.style.display === "none" ? "block" : "none"; >); document.body.appendChild(toggleMenuButton); >);

Теперь вы знаете, как создать сайт с фиксированным боковым меню, используя HTML, CSS и немного JavaScript. Удачи в вашей веб-разработке! 🚀

Источник

Боковое меню с иконками на CSS

Иконки в данном меню могут иметь любые форматы (графика или шрифт).

Для SVG-иконок предусмотрен вариант с анимацией (пункт 3 в меню).

Пример меню можно увидеть справа

На экранах менее чем 767 пикселей, меню не показывается.

HTML:

Ставится в любое место страницы

CSS:

Смотрите также:

Многоуровневое вертикальное меню

Многоуровневое вертикальное меню с выпадающим списком по клику на плюсик

Блочное меню со сменой фона

Меню на графическом фоне, который меняется при выборе каждого пункта

Настраиваемое контекстное меню на элементе

Настраиваемое меню вызываемое правой кнопки мыши на заданном элементе

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

Комментарии:

Очень удобное меню, например, для того, чтобы в нем поместить иконки ссылок на соц.сети организации.
Но есть минус, который, увы, всё решает. Меню «прикручено» к правой стороне вьюпорта.
И если сайт неширок (1200px, например), а монитор широкий, то меню улетает далеко вправо от контента сайта.
А как его прикрутить к правой стороне контента, а не окна браузера, но при этом сохранить вертикальное позиционирование, как при position: fixed? То есть, думаю, с помощью JS функции Math динамически пересчитывать позицию меню так, чтобы на любой ширине экрана оно продолжало прилипать к правой стороне контента сайта. Это сильно сложно сделать?

1 — для широких экранов делаем отступ справа по вкусу
2 — прячем всплывающую подсказку не за экраном, а за иконкой.

Годный скрипт, спасибо!
Ещё бы понять, как сделать так, чтобы пункты меню сворачивались назад)
и прилепить меню не к боку, а к низу))

Источник