Разное

Выезжающее меню css: Выезжающее меню на CSS

08.06.2023

html — Как заставить css меню открываться справа?

Вопрос задан

Изменён 2 года 4 месяца назад

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

Сверстал код менюшки:

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}
body {
  font-family: "Lato", sans-serif;
}
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
.sidenav a:hover {
  color: #f1f1f1;
}
.
 
 sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
.position-span {
  float: right;
  margin-top: -100px;
}
@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}
<div>
  <a href="javascript:void(0)">&times;</a>
  <a href="#">О нас</a>
  <a href="#">Сервис</a>
  <a href="#">Клиенты</a>
  <a href="#">Контакты</a>
</div>
<h3>Какая-то надпись</h3>
<p>Какой-то текст.</p>
<span>&#9776;</span>

Как заставить её раскрываться справа-налево, а не слева-направо? Появление реализовано элементарно через ширину, в js — присваивается значение width 250 при клике на кнопку. При клике на закрытие width=0.

  • html
  • css

Если я правильно понял, то тебе просто надо в .sidenav

left: 0; заменить на right: 0; И можно добавить туда же overflow:hidden; white-space: nowrap;, чтобы буквы не скакали при открытии и закрытии меню

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как создать адаптивное выпадающее меню навигации с помощью CSS?

Из этого руководства вы узнаете, как с помощью CSS создать адаптивное выпадающее меню навигации. Для этого мы воспользуемся CSS flexbox и хаком с чек-боксами.

Верхняя панель навигации крайне важна для любого сайта. В этой статье описана одна из реализаций, которая адаптивна. А также не использует JavaScript для переключения выпадающего списка на мобильных устройствах.

  • Настройка
  • HTML
  • CSS
  • Хак с чекбоксом
    • HTML
    • CSS
  • Для больших экранов

Создайте пустой HTML-документ и назовите его index.html. Добавьте в него базовый HTML-код.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   
</body>
</html>

Я использовала шрифт Font Awesome для иконки меню. Поэтому добавьте приведенную далее строку кода ниже тега <title>.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5. 12.0-2/css/all.min.css" rel="stylesheet">

Создайте файл styles.css и подключите его в HTML-документе:

<link rel="stylesheet" href="styles.css">

Я использовал в качестве логотипа приведенное ниже изображение. Вы можете добавить свое собственное изображение.

Добавьте следующий HTML-код в тег <body>

<header>
   <div>
       <img src="logo.png" alt="Logo">
       <nav>
           <ul>
               <li><a href="#">Home</a></li>
               <li><a href="#">About</a></li>
               <li><a href="#">Services</a></li>
               <li><a href="#">Contact</a></li>
           </ul>
       </nav>
       <i></i>
   </div>
</header>

Элемент header формирует темную панель навигации, содержащую все остальное. Также у нас есть div menu-wrap, который является контейнером для логотипа, ссылок навигации и иконки меню.

В файл styles.css добавим несколько стилей для всех элементов:

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: sans-serif;
}

Затем примените эти стили к header.

header {
   height: 70px;
   background-color: #22292F;
   padding: 10px 0;
}

Теперь темная панель навигации растягивается на всю ширину окна просмотра.

Добавьте приведенные ниже стили к классу menu-wrap:

.menu-wrap {
   display: flex;
   justify-content: space-between;
   padding: 0 15px;
}

Мы используем display:flex, чтобы все дочерние элементы занимали свободное пространство, доступное горизонтально. Свойству justify-content установлено значение space-between, чтобы расположить эти элементы как можно дальше друг от друга.

Стилизуем каждый из этих дочерних элементов один за другим.

.logo-img {
   height: 50px;
}
.menu-icon {
   font-size: 2.4em;
   color: #ffffff;
   line-height: 50px;
}

В результате мы получили правильно позиционированные логотип и иконку нужного размера. Теперь нужно на мобильных устройствах абсолютно позиционировать все пункты меню ниже панели. Сначала добавьте следующий код:

nav {
   position: absolute;
   background-color: #3D4852;
   top:70px;
   left:0;
   width: 100%;
}

Теперь добавьте стили списка и ссылок:

nav ul {
   list-style-type: none;
}
nav ul li {
   padding: 0 15px;
}
nav ul li a {
   display: inline-block;
   padding: 12px;
   /* Добавьте ниже свои пользовательские стили, чтобы изменить отображение ссылок */
   color: #DAE1E7;
   text-decoration: none;
   letter-spacing: 0.05em;
}

Также добавьте для ссылок стили при наведении и фокуса:

nav ul li a:hover, nav ul li a:focus {
   color: #eb6f4a;
}

Теперь в браузере отображается следующее:

Меню должно быть сначала скрыто и отображаться при нажатии на иконку. Для этого добавьте к элементу nav ul дополнительные стили max-height, overflow, а также transition:

nav ul li a:hover, nav ul li a:focus {
   color: #eb6f4a;
}

Этот код скроет все меню, потому что для свойства max-height задано значение 0, а для свойства overflow:hidden.

Мы не используем для скрытия меню display:none, потому что нам нужен эффект анимации скольжения меню вниз. Он может быть достигнут только с помощью свойства max-height.

Нам нужно переключить отображение меню, используя только CSS. Лучший способ сделать это – использовать скрытый чекбокса.

Мы используем иконку гамбургера в качестве метки для этого чекбокса. После нажатия метки чекбокс будет выбран. Поэтому мы можем использовать селектор псевдокласса :checked, чтобы отобразить меню!

В файле index.html добавьте элемент checkbox перед элементом nav:

<input type="checkbox">

В этом коде for=”checkbox” обеспечивает, чтобы чекбокс был установлен / снят при каждом нажатии на эту метку.

Сначала нужно скрыть чекбокс. Для этого в файл styles.css добавьте следующий код:

#checkbox {
   display: none;
}

Это сердце кода:

#checkbox:checked ~ nav ul {
   max-height: 200px;
   padding: 15px 0;
   transition: all 0.5s;
}

Символ ~ является общим селектором следующего смежного элемента, который отделяет два селектора (#checkbox:checked и nav ul).

А также соответствует второму элементу, только если он следует за первым. Когда чекбокс установлен, меню сдвигается вниз, потому что значение свойства max-height изменяется от 0 до большого числа.

Иконка гамбургера не должна отображаться на больших экранах, на которых достаточно места для вывода ссылок.

Поэтому добавим несколько медиазапросов для размеров экрана планшета и больше, чтобы отобразить непосредственно ссылки вместо иконки меню. В файл styles.css добавьте приведенный ниже медиа-запрос.

@media (min-width: 768px) {
}

В нем сначала спрячьте иконку меню.

@media (min-width: 768px) {
  .menu-icon {
     display: none;
  }
}

Обязательно увеличьте размер окна браузера до ширины, превышающей 768 пикселей, чтобы увидеть следующие изменения.

Теперь добавьте стили, чтобы позиционировать элемент nav относительно и изменить цвет его фона. Затем добавьте display:inline-flex для nav ul li, чтобы разместить ссылки рядом друг с другом.

@media (min-width: 768px) {
  nav {
    position: relative;
    top:-10px;
    background-color: transparent;
  }
  nav ul {
    max-height: 70px;
    padding: 15px 0;
    text-align: right;
  }
  nav ul li {
    display: inline-flex;
    padding-left: 20px;
  }
}

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

СКАЧАТЬ ИСХОДНЫЙ КОД

Пожалуйста, опубликуйте свои отзывы по текущей теме статьи. За комментарии, подписки, отклики, лайки, дизлайки низкий вам поклон!

Вадим Дворниковавтор-переводчик статьи «How To Create a Responsive Dropdown Navigation Using Only CSS»

Как создать всплывающее меню с помощью CSS

В этом руководстве вы узнаете, как создать всплывающее меню с помощью CSS.

  1. Начните со следующего HTML-документа, содержащего неупорядоченный список:
    

<голова>
<мета-кодировка="UTF-8">
CSS-меню

<тело>
  2. Создайте файл для внешней таблицы стилей и создайте ссылку на него из HTML, используя следующий тег:
    <ссылка href="menu.css" rel="таблица стилей">
  3. Внутри таблицы стилей используйте следующий CSS для создания основного вертикального меню:
    #главное меню {
поле: 10 пикселей;
ширина: 120 пикселей;
семейство шрифтов: "Требюше MS";
}
#mainMenu li {
дисплей:блок;
граница: 1px сплошная #000;
верхняя граница: 0px;
}
#mainMenu li:first-child {
верхняя граница: 1px сплошная #000;
}
#mainMenu {
дисплей:блок;
отступ: 3px;
текстовое оформление: нет;
цвет:#009;
}
#mainMenu а: наведите {
цвет фона:#009;
цвет:#fff;
}
  4. Откройте HTML-страницу в браузере. Этот код отображает следующее: Изменив CSS, мы можем переместить подменю вправо и скрыть их. пока пользователь не наведет курсор на один из пунктов родительского меню. Вот шаги:
  5. Удалить поля и отступы по умолчанию из списка и элементов списка: 
    ул, ли {
маржа: 0;
заполнение: 0;
}
  6. Установить относительное положение пунктов главного меню. Как с выпадающим списком меню, нам нужно будет расположить подменю, используя абсолютное позиционирование:
    #mainMenu li {
должность: родственница;
/*другие объявления опущены*/
}
  7. Абсолютное расположение подменю и скрытие подменю.
    #mainMenu ли уль ли {
размер шрифта: меньше;
}
  8. Отображать подменю, когда пользователь наводит курсор на основной параметр. 
    #mainMenu li:hover ul {
дисплей:блок;
}
  9. Готовый CSS должен выглядеть следующим образом:
    ул, ли {
маржа: 0;
заполнение: 0;
}
#главное меню {
поле: 10 пикселей;
ширина: 120 пикселей;
семейство шрифтов: "Требюше MS";
}
#mainMenu li {
должность: родственница;
дисплей:блок;
граница: 1px сплошная #000;
верхняя граница: 0px;
}
#mainMenu li:first-child {
верхняя граница: 1px сплошная #000;
}
#mainMenu {
дисплей:блок;
отступ: 3px;
текстовое оформление: нет;
цвет:#009;
}
#mainMenu а: наведите {
цвет фона:#009;
цвет:#fff;
}
#mainMenu ли ул {
положение: абсолютное;
ширина: 150 пикселей;
слева: 118 пикселей;
верх: 5 пикселей;
дисплей:нет;
}
#mainMenu ли уль ли {
размер шрифта: меньше;
}
#mainMenu li:hover ul {
дисплей:блок;
}
  10. Откройте HTML-страницу в браузере. Этот код отображает следующее:

CSS всплывающее меню слева | CSSTerm.com

Вы находитесь здесь: Главная » CSS-меню » Вертикальное меню CSS » Всплывающее меню CSS слева 

Простое вертикальное всплывающее меню CSS слева, совместимое со всеми основными браузерами, без изображений или JavaScript.

Как использовать:

  • Откройте текстовый редактор, такой как Блокнот или любой другой.
  • Скопируйте HTML-код и вставьте в текстовый редактор.
  • Сохранить файл как anyname.html или anyname.htm
  • Создать новый документ.
  • Скопируйте и вставьте код CSS в текстовый редактор.
  • Сохранить файл как menu.css

Код HTML: 

 
 org/1999/xhtml">

<голова>


Всплывающее меню CSS слева

<тело>

<дел>
<ул>
   
  • Ссылка 1
    • 
   
  • Ссылка 2
      <ул>
         
  • Товар 1
            <ул>
               
  • Дополнительный продукт
    • 
               
  • Дополнительный продукт
    • 
            
         
         
  • Товар 2
            <ул>
               
  • Дополнительный продукт
    • 
               
  • Дополнительный продукт
    • 
            
         
      
   
   
  • Ссылка 3
    • 
   
  • Ссылка 4
    •

    Код CSS: 

     /* CSSTerm.