Вопрос задан
Изменён 9 месяцев назад
Просмотрен 60 раз
Я хочу сделать так, чтобы в определённый момент (когда мы долистаем к footer) боковое навигационное меню (aside) перестало быть со свойством sticky, и чтобы оно не заступало footer. Можно ли это реализовать, и как ?
Вот мой HTML код:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>тест</title> <link rel="stylesheet" href="style_of_main_page. css" type="text/css"> </head> <body> <div> <div> <header>1</header> <nav>2</nav> <main>3</main> <aside>4</aside> <footer>5</footer> </div> </div> </body> </html>
Вот мой Css Grid код:
.grid-header { grid-area: header; } .grid-navigation { grid-area: nav; } .grid-content { grid-area: content; } .grid-side { grid-area: side; } .grid-footer { grid-area: footer; } .grid__body { display: grid; grid-template: 0px ; grid-template: [start] "header header" 200px [row2] [row2] "nav nav" 150px [row3] [row3] "content side" 800px [row4] [row4] "footer footer" 600px [row-end] / 1fr 150px; } header, nav, main, aside, footer { border-style: dotted; border-width: 0.1px; } header { background-color: violet; } main { background-color: aqua; } aside { position: sticky; top: 150px; background-color: #444; } nav { position: sticky; top: 0; background-color: #777; } footer { background-color: green; }
- html
- css
- html5
- вёрстка
- css-grid
11
Да можно всё. sticky
зависит от родительского блока. Так как у Вас родительский – это .grid__body
, то и правый блок останавливается в самом низу.
Как вы хотите сделать – у Вас sticky
должен быть внутри aside
. Или вариант похуже: main+aside обернут в дополнительный блок.
.grid-header { grid-area: header; } .grid-navigation { grid-area: nav; } .grid-content { grid-area: content; } .grid-side { grid-area: side; } .grid-footer { grid-area: footer; } .grid__body { display: grid; grid-template: 0px; grid-template: [start] "header header" 200px [row2] [row2] "nav nav" 150px [row3] [row3] "content side" 800px [row4] [row4] "footer footer" 600px [row-end] / 1fr 150px; } header, nav, main, aside, footer { border-style: dotted; border-width: 0.1px; } header { background-color: violet; z-index: 10; } main { background-color: aqua; } aside { height: 100%; background-color: #444; } .aside-content { position: sticky; top: 150px; background: pink; height: 150px; /* Как пример, чтобы показать остановку блока */ } nav { position: sticky; top: 0; background-color: #777; z-index: 10; } footer { background-color: green; }
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1. 0"> <title>тест</title> <link rel="stylesheet" href="style_of_main_page.css" type="text/css"> </head> <body> <div> <div> <header>1</header> <nav>2</nav> <main>3</main> <aside> <div>4</div> </aside> <footer>5</footer> </div> </div> </body> </html>
1
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Адаптивное боковое меню на чистом CSS
- org/Breadcrumb»>Главная >
- Всё для сайта >
- Меню для сайта
День добрый. В этом посте я выкладывают отличный скрипт бокового адаптивного выдвигающегося меню на голом CSS. Меню анимированное, с плавным раскрытием и в двух вариациях: слева и справа. Отличный вариант для тех, кто хочет сделать мобильное адаптивное меню для своего сайта.
В архиве отдельный файл CSS для правого меню и для левого. Подключить данный скрипт довольно легко. Нужно лишь выполнить несколько шагов:
Скачать zip-архив
Скачать его можно по ссылке внизу «Скачать». Также необходимо разархивировать zip-архив
Закачать css файл
Закачиваем в папку css в корне сайта нужный файл css. Если вам нужно меню слева, то left-nav-style. css, если справа, то right-nav-style.css
Подключить css файл
Незабываем подключить нужный css файл, вставив между <head> и </head>
<link rel="stylesheet" href="css/left-nav-style.css">
если нужно подключить левое боковое меню и
<link rel="stylesheet" href="css/right-nav-style.css">
если правое
Прописать HTML код
Ну и самое главное, в самое начало сайта после открытия тега <body> вставляем следующий HTML код:
<!-- Скрытый checkbox, отвечающий за переключение панели, должен быть в верхней части документа, лучше сразу после тега `<body>` `id` атрибут предназначен для связки с атрибутом `for` тега <label> Атрибут `hidden` указывает состояние «скрытый» у текущего элемента --> <input type="checkbox" hidden> <!-- Выдвижную панель размещаете ниже флажка (checkbox), но не обязательно непосредственно после него, например можно и в конце страницы --> <nav> <!-- Метка с именем `id` чекбокса в `for` атрибуте Символ Unicode 'TRIGRAM FOR HEAVEN' (U+2630) Пустой атрибут `onclick` используем для исправления бага в iOS < 6. 0 См: http://timpietrusky.com/advanced-checkbox-hack --> <label for="nav-toggle" onclick></label> <!-- Здесь размещаете любую разметку, если это меню, то скорее всего неупорядоченный список <ul> --> <h3> <a href="https://bayguzin.ru/">Bayguzin.ru</a> </h3> <ul> <li><a href="#1">Один</a> <li><a href="#2">Два</a> <li><a href="#3">Три</a> <li><a href="#4">Четыре</a> <li><a href="#5">Пять</a> <li><a href="#6">Шесть</a> <li><a href="#7">Семь</a> </ul> </nav> <!-- Маска (затемнение) основного контента при включенной панели по-умолчанию данная фишка не используется, если оно вам надо, просто расккоментируйте div-контейнер ниже <div></div> --> <!-- Далее размещаем любую разметку, много слов, картинки и т.д... -->
На размещение меню влияет только css файл, html код абсолютно одинаковый.
Если вы всё сделали правильно, то скрипт заработает. Скачать его вы можете по ссылке внизу абсолютно бесплатно и по прямой ссылке. Для более детального ознакомления с меню можете пройти по ссылке «Демо» и увидеть скрипт в работе. Пока
Если вы не видите кнопку «Скачать»
отключите блокировщик рекламы Скачать (15.65 Kb) Demo
Отблагодарить
Вконтакте
Twitter
Похожие статьи
Не то, что искали? Воспользуйтесь поиском
22 крутых примера дизайна меню боковой панели CSS (БЕСПЛАТНЫЕ демонстрации)
Привлекательное боковое меню
Фрагмент кода простого бокового меню с привлекательной анимацией открытия/закрытия, созданный с помощью ❤️ для Frontend planet.
Сделано с:
HTML
CSS
Javascript
Зависимости:
Посмотреть код и демо
SVG липкое боковое меню при наведении курсора
Этот пример кода представляет собой боковое меню, которое имеет приятный эффект жидкости, когда вы перемещаете курсор близко к значку гамбургера.
Сделано с:
HTML
CSS
Javascript
Зависимости:
JQuery
Посмотреть код и демонстрацию
Скользящее меню при наведении курсора
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Вращающаяся 3D-навигация
Классное вращающееся боковое меню HTML/CSS с 3D-эффектом при наведении.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Меню боковой панели 3D-отображение
Этот фрагмент кода представляет собой боковое меню с изящным и красивым эффектом 3D-отображения.
Сделано с:
HTML
CSS
JS
Зависимости:
SCSS
JQuery
Посмотреть код и демонстрацию
Адаптивная боковая панель
Адаптивная правая боковая панель, которая открывается при нажатии с плавной анимацией открытия/закрытия.
Сделано с:
HTML
CSS
JS
Зависимости:
JQuery
Посмотреть код и демонстрацию
Боковое меню, сделанное с помощью Bootstrap, с возможностью скрывать и показывать его, а также красивой многоцветной анимацией при наведении курсора на разные элементы.
Сделано с:
HTML
CSS
JS
Зависимости:
Bootstrap
Animate CSS
Tether
Popper JS
JQuery
Посмотреть код и демонстрацию
Навигация на боковой панели, выполненная на чистом CSS
Фрагмент кода многоуровневого бокового меню, созданный только с использованием чистого CSS и HTML.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Переходы боковой панели
Этот Codepen представляет собой набор различных скользящих переходов для меню боковой панели, полезных для вдохновения.
Сделано с:
HTML
CSS
Javascript
Зависимости:
Посмотреть код и демонстрацию
Перекрестное меню
Демонстрация поперечного меню, красиво анимированного при открытии и закрытии нажатием кнопки гамбургера.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Эластичный дизайн материалов боковой панели SVG
Пример боковой панели с упругой анимацией SVG при открытии
Сделано с:
HTML
CSS
Javascript
Зависимости:
SCSS
JQuery
Посмотреть код и демонстрацию
Фиолетовое боковое меню
Статичное боковое меню с фиолетовой темой дизайна, без большого количества анимации, но привлекающее внимание.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Меню боковой панели при наведении Показать/скрыть CSS
Меню боковой панели, которое показывает полную версию с текстом при наведении курсора мыши на каждый элемент.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Шаблон боковой панели Pro
Этот фрагмент кода представляет собой вертикальное меню с красивым фоном, сворачиваемыми элементами внутри меню и сворачиваемой версией при нажатии на значок меню-гамбургера.
Сделано с:
HTML
CSS
Javascript
Зависимости:
Посмотреть код и демонстрацию
Easy Ionic Side Menu Transitions
Боковое меню с цветными значками для каждого пункта меню, созданное с помощью Ionic, и с различными эффектами перехода ввода.
Сделано с:
HTML
CSS
JavaScript
Зависимости:
HAML
SCSS
JQUERY
Боковое скользящее меню CSS
Меню боковой панели на чистом CSS с эффектом наведения для отображения текста каждого элемента боковой панели.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Awesome Bootstrap 3 Навигация по боковой панели
Эта боковая панель сделана с использованием известной CSS-инфраструктуры Bootstrap. Имеет эффект скольжения при наведении на каждый элемент меню боковой панели и скрывает/показывает при нажатии на элемент меню.
Сделано с:
HTML
CSS
Зависимости:
Меньше
Bootstrap
JQuery
Посмотреть код и демонстрацию
Современное меню боковой панели
Фиксированная боковая панель, сделанная только с помощью CSS и HTML, она имеет закругленный эффект наведения, играющий с контрастом фона.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Боковое меню без Javascript, которое имеет красивый переход при открытии и незначительное изменение непрозрачности фона при открытии меню.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Боковые меню администратора с помощью Tailwind CSS
Codepen некоторых боковых меню администратора, созданных только с помощью HTML и Tailwind CSS, в качестве бонуса у вас есть темный режим каждого из них.
Сделано с:
Зависимости:
Tailwind
Посмотреть код и демонстрацию
Исправлена навигация при наведении
Исправлена навигация с эффектом наведения, открывающая полную версию, элементы имеют эффект градиента наведения.
Сделано с:
HTML
CSS
Зависимости:
Посмотреть код и демонстрацию
Сворачивающееся боковое меню
Фрагмент кода бокового меню, которое при нажатии сворачивается и разворачивается в меню-гамбургер.
Сделано с:
HTML
CSS
Javascript
Зависимости:
SCSS
JQuery
Посмотреть код и демонстрацию
30+ потрясающих боковых меню CSS (бесплатный код + загрузки)
1.
Меню боковой панели Purple CSSАвтор: Шон Рейснер (SREISNER)
Ссылки: СТАРКИ
2. Фиксированная навигация при наведении
Фиксированная навигация в боковом ящике, которая расширяется при наведении. (Вдохновлен домик на дереве)
Автор: Винс Браун (vincebrown)0005
Создано: 12 ноября 2014 г.
Сделано с: HTML, SCSS
Теги: навигация, svg, sidedrawer, анимация, наведение
3. С раскрывающимся списком CSS Animation (Pure Megantion)
Автор: Ризки Курниаван Ритонга (rizkykurniawanritonga)
Ссылки: Исходный код/демонстрация
Создано: Апрель 2, 2014
Сделано с HTML,40005
Теги: Меню
Автор: Milica (Kamilica)
Ссылки: Sucde Code / Demo
73. . with: HTML, SCSS5. Только CSS Отражать как меню боковой панели навигации
Автор: sean_codes (sean_codes)
Ссылки: Исходный код / Демо
Created on0374 18 мая 2017 г.
Сделано с: PUG, CSS, JS
CSS Предпроцессор: NOT
JS Pre-Processor: None
HTML: 9000
HTML: 9000
HTML: 9000
. Анимация навигации на боковой панели Ничто так не сравнится с небольшим модным движением тела. Автор: magnificode (magnificode) Ссылки: Исходный код / Демо Создано: 8 июня 2015 г. Сделано с: HTML, SCSS Теги: nav, push, svg Простая многоуровневая навигация на боковой панели. Включает в себя поднавигацию на чистом css, которая оставляет видимыми значки родительской навигации. Элементы навигации будут прокручиваться (overflow-y) при необходимости. Использует преобразования и переходы. Автор: Стивен Скафф (StephenScaff) Ссылки: Исходный код/Демо Дата создания: 26 августа 2015 г. Сделано с помощью: HTML, SCSS Теги: nav, sidebar, transform, pure-css, navigation С Scroll No JS не использовался
Автор: Eduard L. (Eduardl)
Ссылки: Исходный код / Демо
Созданы: HT 30,
9. CSS
Теги: меню, слайд, сторона, css
9.
Полностью адаптивное меню CSS3Полностью адаптивное меню, не требующее JavaScript и использующее менее 200 строк функционального кода CSS.
Автор: Claudio Holanda (Kazzkiq)
Ссылки: Исходный кодек меню, адаптивное, css3, мобильное
10. Меню боковой панели при наведении Показать/скрыть CSS
Меню боковой панели при наведении Показать/скрыть только с помощью CSS
Автор: JFarrow (JFarrow)
11 февраля 2014 г.
Сделано с помощью: HTML, CSS
Теги: showhide, css, sidebar, navigation
11. Вращающаяся 3D-навигация
Переключение с вертикальной панели навигации на текстовую иконку с текстом классная анимация. HTML5 и CSS3.
Автор: Arjan Jassal (Arjancodes)
Ссылки: Исходный код / демонстрация
Создано: мая 30,
, сделанные с: . , анимация, css3, иконки, transform
12. Фиксированный эффект наведения при наведении
Тестирование новой концепции дизайна с эффектом наведения на псевдоэлемент с использованием css-переходов.
Автор: Теренс Девайн (tdevine33)
Ссылки: Исходный код / демонстрация
Создано: 11 августа 2013 г.
Сделано с: HTML, SCSS
TAGS: HOVER, PSEUDO, NAVER, CANSS5. Боковая панель CSS NAV
Автор: Jon Ambas (Jonambas)
Ссылки: Исходный кодек0373 Теги: SASS, навигация, боковая панель
14. 金魚 收合式 側邊 選單 練習
Автор: Эдди Чен (LiveHighvu06)
Ссылки: Исходный код
. , 2019
Сделано с: HTML, CSS
TAG: HTML, CSS, SIDEMENU
15.
MINAMAL CSS SidebarАвтор: RIJRENZU
Автор: RIJRENZU . Демо
Сделано с: HTML, SCSS, JS
16. Меню отзывчивого навигации
Автор: Abdelfattah Baraka (Abdelfattahbaraka)
Links: 4444. Souce Sound / Demo Sound / Demo Sound / Demo Sound / Demo / Demo Sound / Demo / Demo Code / Demo. , 2017
Сделано с использованием: HTML, CSS, JS
17. Чистая панель навигации CSS — 2
Выровненная по правому краю панель навигации, созданная исключительно с помощью CSS, HTML без использования JavaScript
Автор: Turret [http://turret.in] (teamturret)
Ссылки: Исходный код / Демо
Создано: 14 января 2014 г.
Сделано с помощью: HTML
Метки: CSS, Navbar, Sidebar, Sidenav
18.
Боковое менюВертикальное боковое меню, Pure CSS3 и HTML
Автор: Modesto (LYKN)
9
. Создано: 21 января 2020 г. Сделано с: HTML, SCSS TAG: HTML, CSS, Side-Menu 444444444444444444444444444444444444444444444444444444444444444444444н. Ссылки: Исходный код / Демо Создано: 29 июня 2018 г. Сделано с помощью: HTML, CSS Теги: вертикальная навигация, боковая навигация, боковая навигация, фиксированная боковая панель000, боковая панель000, боковая панель0370 20. Боковая панель Twitter с CSS & HTML Автор: Assia Chemlali (Assiachemlali) Ссылки: Исходный код / демонстрация Создано: 22 июля
. SCSS
Теги: twitter, sidebar, html5, css3
21. Меню Off Canvas на чистом CSS с анимированными ссылками
Меню Off Canvas на чистом CSS с анимированными ссылками
Автор: Амит Сингх (Amitasaurus)
Ссылки: Исходный код / демонстрация
Созданы: 6 января 2016 г.
Сделано с: HTML, CSS
. , Navigation, CSS
Автор: VIRM90 (VIRM90)
Ссылки: Исходный код / Демо
Созданы: ФЕВРАЛИ 14, 2020
.0374 HTML, CSS
Метки: Sidenav, Menu Navigation, CSS
23. Меню боковой панели
Сторонний меню с индивидуальным переходом
Автор: 4.