Разное

Боковое меню css: Как сделать меню с фиксированной боковой навигацией

17.08.2021

Содержание

html — Можно ли сделать так, чтобы боковое меню перестало быть sticky, когда мы долистаем к footer(нижней части нашей страницы)?

Вопрос задан

Изменён 5 месяцев назад

Просмотрен 44 раза

Я хочу сделать так, чтобы в определённый момент (когда мы долистаем к 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