Css меню для сайта вертикальное: Как сделать вертикальное меню

Leave a Comment / Css / By /

Содержание

Разработка вертикального и горизонтального меню с использованием Pure CSS

Улучшение статьи

Сохранить статью

  • Уровень сложности: Средний
  • Последнее обновление: 22 фев, 2021

  • Читать
  • Обсудить

    • Улучшить статью

    Сохранить статью

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

    1. Для создания вертикального меню:

      1. По умолчанию в Pure CSS меню вертикальные. Его легко настроить из-за минимального стиля по умолчанию и селекторов с низкой специфичностью.
      2. Все компоненты меню должны быть заключены в раздел с именем класса «чистое меню» .
      3.  Добавить класс «чистый-меню-заголовок» в элемент для основного заголовка или названия.
      4.  Затем добавьте все элементы после заголовка внутри элемента
          класса 9.0027 «чистый список-меню» . Каждый элемент должен быть заключен в элемент
        • с классом «Pure-Menu-Item» .
        •  Если вы хотите связать элемент с разделом вашей веб-страницы, вы можете дополнительно заключить его в элемент с классом «pure-menu-link» .

      Пример:

      HTML

      < HTML > < HTML > > < HTML > > < 0003

         

      < head >

         

          

           < link rel = "stylesheet" href =

      "https://unpkg. com/[email protected]/build/pure-min.css"

      СОЕДИНЕНИЕ =

      "SHA384444H-NN44HPEE8.d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w"  

               crossorigin = "anonymous" >

         

          

              

               < meta name = "viewport" content = 

               "width=device-width, initial-scale=1.0" />    

         

      head >

         

      < body >

         

           < div Класс = "Pure-Menu" >

      < span class = "pure-menu-heading" >

                   GEEKFORGEEKS

               span >

         

      < UL Класс = "Чисто-меню-лист" >

      > 9003

                  

                   < li class = "pure-menu-item" >

                       < a href = " #" Класс = " Pure-Menu-Link " >

      Дом

      0064 a >

                   li >

                   < li class = "pure-menu-item" >

      < A HREF = "#" Класс = "Pure-Menu-Link" = "Pure-Menu-Link" = "Pure-Men0064

                           About Us

                       a >

                   li >

                   < li class = "чистый пункт меню" >

                       < a href = "#" class = "pure-menu-link" >

                           Contact

                       a >

      LI >

      < LI Класс = "Pure-MENU-ITEM"0064 >

                       < a href = "#" class = "pure-menu-link" >

                           Privacy Policy

      A >

      LI >

        062                

           

                 ul >

             div >

           

        body >

           

        html >

      900 Вывод:

      03

    2. Для создания горизонтального меню:

      Вы можете изменить вышеуказанное вертикальное меню на горизонтальное, просто добавив имя класса «чистое меню-горизонтальное» в разделе в начале.

      Example:

      HTML

      < html >

         

      < head >

         

          

           < link rel = "stylesheet" href =

      "https:// unpkg.com/[email protected]/build/pure-min.css "

      целостность =

      " SHA384-NN4HPE8LTHYVTFCBI5YAIGW9ISLISLIRISLIRISLISL84-NN4HPE8LTYVTFCBI5YAIGWSLISL84-NN4HPE8LTHIVLIGWSIGISLIAL84-NN4HPE8L-w"  

               crossorigin = "anonymous" >

         

          

              

               < meta name = "viewport" content = 

               "width=device-width, initial-scale=1. 0" />    

         

      head >

         

      < body >

         

           < div class = "Pure-Menu Pure-Menu-Horizontal" >

      <

      <

      <0064 span class = "pure-menu-heading" >

                   GEEKFORGEEKS

               span >

         

      < UL Класс = "Pure-Menu-List" >

      0064

                   < li class = "pure-menu-item" >

                       < a href = "#" Класс = "Pure-Menu-Link" >

      Дом

        063 a >

        LI >

        < LI < LI < LI < LI < < < .                  < a href = "#" class = "pure-menu-link" >

                             About Us

                         a >

                     li >

                     < li class = "чистый пункт меню" >

                         < a href = "#" class = "pure-menu-link" >

                             Contact

                         a >

                     LI >

        < LI Класс = "Pure-Menu-item" = "Pure-Menu-item" . 0063>

        < A HREF = "#" Класс = "Pure-Menu-Link" = "Pure-Menu-Link" = "Pure-Men

        A >

        LI >

        LI >

        0063                

           

                 ul >

             div >

           

        body >

           

        html >

      2

      Вывод: 0002


    Следующий

    Замените live() на on() в jQuery

    Статьи по теме

    47 Меню React JS

    Коллекция бесплатных Меню React JS : вне холста, круг, контекст и другие. Обновление декабрьской коллекции 2020 года. 10 новых предметов.

    1. Меню CSS
    2. Меню начальной загрузки
    3. Меню JavaScript
    4. Меню jQuery
    5. Меню попутного ветра
    О коде

    Сортировка меню

    Простой дизайн меню сортировки с анимацией.

    О коде

    Анимированное меню с React и Gsap

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: gsap.js

    О коде

    Отзывчивое выпадающее меню React Navbar

    О коде

    реагировать-меню-список

    Компонент меню React с функциями фильтра.

    О коде

    Гамбургер-меню в React JS

    О коде

    UI/UX веб-сайта музея (Swiper, React)

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: swiper. js

    О коде

    Анимация пользовательского интерфейса с двойным меню в и для React Native

    Он так прост в использовании. Вам просто нужно передать данные (категории) для обоих столбцов/двойного меню.

    О коде

    реагировать родное меню/меню

    Компоненты Android PopupMenu и iOS14+ UIMenu для реагирования.

    О коде

    Анимированное боковое меню

    Анимированное боковое меню с React.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: нет

    Зависимости: реакция-dom.js

    О коде

    Компонент меню React Accordion

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: реакция-dom.js

    О коде

    Эффекты быстрого меню при наведении изображения

    Набор эффектов наведения на пункты меню с изображениями.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: -

    О коде

    Жидкая накладка

    Наложение меню Morphing.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: react-dom.js, react-use-gesture.js

    О коде

    Необычное анимированное контекстное меню

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: font-awesome.css, react-dom.js

    О коде

    Использовать контекстное меню React

    Хук React для простого создания пользовательских контекстных меню! Хуки заботятся о логике и создании атрибутов a11y, вы заботитесь о пользовательском интерфейсе!

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: -

    О коде

    Простая полностраничная навигация

    Простая полностраничная навигация, созданная с помощью React.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: -

    О коде

    Четырехъядерная полностраничная навигация

    Если навигация является частью страницы и опыта, щелкните один из заголовков, чтобы перейти в один из четырех разделов страницы и выйти из него. Использование React16 и в основном состояние для запуска изменений CSS в базовой сетке CSS Flexbox.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: реакция-dom.js

    С код

    Боковая панель React Pro

    Адаптивная версия шаблона боковой панели HTML pro с выпадающим меню, созданная с помощью React 16.8 и Bootstrap 4.

    О коде

    Многоуровневая боковая панель React

    react-multilevel-sidebar — это компонент боковой панели для веб-сайтов и адаптивного мобильного макета, который предоставляет вам меню вложенных уровней, где вы можете классифицировать свои элементы.

    О коде

    Контекстное меню RCTX

    Плагин контекстного меню для React.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: -

    О коде

    Меню гамбургеров React

    Очень красивое меню, созданное с помощью React.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: react-router.js, gsap.js

    О коде

    Гибкое скользящее меню React

    Библиотека React, которая предоставляет гибкое скользящее меню с простым в использовании API и множеством других замечательных функций. Кроме того, вы можете выбрать, какую анимацию вы хотите использовать для скользящего меню.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: -

    Версия начальной загрузки: -

    О коде

    Стиль Off Canvas

    Styled Off Canvas — это настраиваемое меню вне холста, созданное с помощью React и стилизованных компонентов.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: -

    О коде

    Бургер-меню с React

    Меню Burger с хуками React и стилизованными компонентами.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: react-dom.js, styled-components.js

    О коде

    Перейти с помощью контекстного меню

    Перейти с помощью контекстного меню с React.js

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Отвечает: да

    Зависимости: реакция-dom.js

    О коде

    Поделиться выбранным текстом в Twitter через контекстное меню

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

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: реакция-dom. js, перо.js

    О коде

    Реагировать на сайт Nav

    Красивая панель навигации сайта, которой можно гордиться.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: нет

    Зависимости: -

    О коде

    Меню React Stripe

    Анимированное меню навигации в виде полос.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: react-flip-toolkit.js

    О коде

    Всплывающее меню прямоугольника React

    Библиотека всплывающих меню прямоугольника React.

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: -

    CircleMenu — это простое, элегантное меню пользовательского интерфейса с круговой компоновкой и анимацией в стиле Material Design.

    Эффект пузырькового меню для вашего приложения React Native, очень хорошо работает с react-native-verctor-icons .

    Эффект пульсирующего меню для вашего собственного приложения React.

    О коде

    React Motion с гламуром и гламуром

    Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

    Ответ: да

    Зависимости: react-dom.js, react-motion.js

    Красиво созданные компоненты меню без холста для нативных приложений.

    С легкостью добавьте контекстное меню в свое приложение React.

    Расширяемый компонент всплывающего меню для React Native для Android, iOS.

    Готовый / простой в использовании, настраиваемый, обновляемый, с поддержкой ajax, анимированный компонент меню, разработанный для React.

    Нативное радиальное меню React.

    Выпадающее меню «Путь» воссоздано с помощью React Motion.

    Компонент меню весенней анимации для React.

    Выпадающее меню React.

    Версия миксина React для плагина jQuery-menu-aim от Amazon.

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

    Ваш адрес email не будет опубликован. Обязательные поля помечены *