Горизонтальное css3 меню: Меню для сайта html и css горизонтальное — 11 вариантов меню

alexxlab

css — Как расположить горизонтально меню?

Задать вопрос

Вопрос задан

Изменён 1 месяц назад

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

Подскажите, как правильно расположить горизонтально меню в шапке, чтобы до разрешения 1024px пункты меню были в одну строку?

T.е. чтобы пункт меню и текст не переносились на новую строку при уменьшении разрешения экрана.

Для ссылок ещё нужен hover, чтобы при наведении ссылка выделялась другим цветом.

Т.е. при данном количестве пунктов меню должно быть прижато слева и справа к краям родителя. А если пунктов меньше, пусть будет прижато влево.

Т. е. нужен адаптив

header {
  background: red;
}

.wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  margin: 0 auto;
  max-width: 1440px;
  width: 95%;
  padding-left: 15px;
  padding-right: 15px;
}

aside {
  width: 19.91%;
  flex-basis: 19.91%;
  max-width: 281px;
  outline: 1px solid #fff;
  color: #fff;
}

.links {
  width: 80.09%;
  flex-basis: 80.09%;
  padding: 10px 0 10px 20px;
}

.links-ul {
  display: inline-flex;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  outline: 1px solid #fff;
}

li {
  display: inline-block;
}

a {
  font-size: 12px;
  padding: 18px 18px;
  font-weight: 600;
  color: #fff;
  line-height: 1.2;
  text-decoration: none;
  display: inline-block;
  text-transform: uppercase;
  transition: .
  2s;
}

a:hover,
a.active {
  background: #bd3534;
}

@media (min-width: 1440px) {
  a {
    font-size: 14px;
    padding: 18px 20px;
  }
}
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<header>
  <div>
    <aside>
      aside
    </aside>
    <nav>
      <ul>
        <li><a href="about.html">О нас</a></li>
        <li><a href="actions.html">Акции и скидки</a></li>
        <li><a href="delivery.html">Доставка и оплата</a></li>
        <li><a href="answers.html">Вопросы и ответы</a></li>
        <li><a href="reviews.html">Отзывы</a></li>
        <li><a href="news.html">Новости</a></li>
        <li><a href="seasons.
 
 html">Сезонный повод</a></li>
        <li><a href="contacts.html">Контакты</a></li>
      </ul>
    </nav>
  </div>
</header>

3 

 .links ul{
        display: inline-flex;
        justify-content: flex-start;
        margin: 0;
        padding: 0;
        outline: 1px solid #fff;
    }

3 

@media only screen  and (max-width : 1024px) {
    .links-ul>li{ width: 180px;
                 font-family: Arial;
                 padding: 0px;
                 text-align: center;}
}

5

Чтобы текст шёл в одну строку, добавьте: white-space: nowrap; в li или a. Например:

li {
    white-space: nowrap;
}

Может прозвучать тупо, но как по мне, вам нужно просто увеличить ширину элементов меню, затем уменьшить padding

7

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

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

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

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

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

Почта

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

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

Почта

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

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

Подборка горизонтальных меню на jQuery

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

Выбор редакции: Mega Menu Reloaded

Mega Menu Reloaded предлагает множество опций для создания комплексных современных меню навигации. Плагин работает без использования Javascript, и даже при отключении поддержки этой технологии меню будет отлично смотреться практически в любом браузере. За сравнительно небольшие вы получите функциональное меню навигации без необходимости связываться с написанием кода:

Полноценное решение для создания отличных меню навигации

jQuery-плагин, который позволяет создавать красивое горизонтальное меню для сайта с неограниченным количеством подменю. Кроме самой библиотеки jQuery вам также потребуется использовать jQuery UI. Но при этом плагин поддерживает все эффекты, доступные в этой библиотеке (например, fadeIn илиslideDown). Разметка меню опрятная, так как здесь используются вложенные списки.

2. Ascensor

jQuery-плагин для создания меню со специальной системой размещения контента на странице.

3. jQuery Dropdown Login Form

Простая и миниатюрная выпадающая форма авторизации на jQuery, которую просто установить на страницу.

4. HorizontalNav

HorizontalNav представляет собой jQuery-плагин для создания горизонтального резинового меню для сайта, которое растягивается на всю ширину экрана или контейнера. Если вам приходилось создавать подобный эффект, то вы наверняка знаете, насколько это трудно. Плагин значительно облегчает эту задачу, даже если вы используете адаптивный дизайн.

5. jQuery Navigation Plugin

Простой плагин навигации с двумя возможными эффектами: ‘fade’ и ‘slide’.

6. Automatic Ajax jQuery Navigation

Задача jQuery-плагина Ajax-Navigation заключается в автоматической трансформации обычных ссылок вAjax-запросы для мобильных браузеров и отключении отображения адресной строки при нажатии по ссылкам. Это позволяет улучшить опыт взаимодействия с пользователем. Также плагин предлагает функцииonLoad и onUnload для каждой страницы, за счет чего можно добиться привлекательных эффектов при их открытии.

7. Kwicks Extended Navigation

Kwicks для jQuery начинал свою историю как часть популярного набора эффектов Mootools, но перерос в отдельный универсальный виджет.

8. CasperJS

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

9. Bootstrap Image Gallery

Расширение для модального окна из набора инструментов Bootstrap от Twitter, которое позволяет использовать для навигации мышь и клавиатуру. А также включать эффекты перехода, активировать полноэкранный режим, а также запускать слайд-шоу.

10. Flipboard Layout

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

11. TinyNav

Миниатюрный jQuery-плагин, который позволяет конвертировать элементы <ul> и <ol> в выпадающие списки для маленьких экранов. Он также автоматически выделяет текущую страницу и добавляетselected=”selected” для выделенного элемента.

12. stack.js

Библиотека для презентаций с интуитивной навигацией на базе скроллинга.

13. flexnav

Предоставляет возможность для реализации горизонтального меню с подменю для сайта без привязки к конкретным устройствам.

14. jQuery Keyboard Navigation Plugin

Плагин создает меню, с помощью которого можно переходить по элементам на странице, используя стрелки на клавиатуре.

15. Menutron

jQuery-плагин для создания адаптивных навигационных меню.

16. jlnav

Представляет собой jQuery-плагин, который позволяет создавать оригинальное горизонтальное меню для сайта на CSS из вложенных неупорядоченных списков.

17. Simple Responsive jQuery Navigation

Миниатюрный и простой в использовании фреймворк и jQuery-плагин для создания адаптивных (многоуровневых) навигационных меню.

18. Scrollpath

Плагин для установки пользователем направления прокрутки. Здесь для прорисовки линий и арок используется синтаксис на основе canvas.

19. filtrify

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

20. Curtain.js

Способен превратить ваш сайт в анимированное произведение искусства.

21. PageSlide

jQuery-плагин, который позволяет прокручивать веб-страницу, чтобы открыть дополнительную секцию управления.

22. Smooth Div Scroll

Простой jQuery-плагин, который позволяет прокручивать контент влево или вправо.

23. HTML5/CSS3 Gray Navigation Menu

Простенькое горизонтальное меню для сайта на HTML5 и CSS3.

24. Responsive CSS Navigation Menu

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

25. Pro CSS Menu

Универсальное CSS-меню, которое можно сразу использовать в собственных дизайнах. Оно представлено в нескольких цветовых схемах, а также предлагает возможность настройки при помощи CSS.

26. Bold CSS3 Navigation (платно – $4)

Современное горизонтальное резиновое меню для сайта с красивыми шрифтами и продуманной цветовой комбинацией. Оно доступно в двух версиях (горизонтальной и вертикальной) и 8 цветовых схемах. Благодаря семантической разметке меню очень просто пользоваться.

27. Modern Vertical Menu (платно – $2)

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

28. Modern Menu (платно – $2)

Разработан с учетом модных тенденций, гибкости и простоты в использовании. Плагин идеально подойдет для создания быстрого и динамичного меню для сайта.

29. Metro (платно – $3)

Горизонтальное меню для сайта представлено в нескольких “блочных” вариантах. Плагин предлагает 5 версий анимации изображений, а также несколько других привлекательных эффектов.

30. jQuery jPList Plugin (

платно – $5)

jPList представляет собой гибкий jQuery-плагин для сортировки, пагинации и фильтрации любых HTML-структур (div-элементов, UL/LI, таблиц и т. д.).

Перевод статьи “Horizontal Menu Collection: 35 Cool jQuery UI Bars”

Источник: http://www.internet-technologies.ru/articles/article_2952.html

Pure CSS Horizontal Menu — GeeksforGeeks

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

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

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

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

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

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

    Горизонтальные меню встречаются почти на каждом сайте. Чистый CSS помогает нам легко реализовать такие меню с помощью класса pure-menu.

    Класс Pure-menu по умолчанию создает вертикальное меню, которое мы можем просто преобразовать в горизонтальное, добавив класс pure-menu-horizontal. Одно из наиболее распространенных применений горизонтального меню — это панели навигации (navbars).

    Для достижения поставленной цели мы будем использовать следующие классы:

    • pure-menu: Это поможет нам создать меню. (создает вертикальное меню по умолчанию)
    • pure-menu-horizontal: Это поможет нам создать горизонтальное меню.
    • pure-menu-list: Это помогает нам указать список, содержащий пункты меню.
    • чистый элемент меню: Это помогает нам указать, что конкретный элемент принадлежит к списку
    • pure-menu-link: Это помогает нам указывать ссылки в пунктах меню
    • pure-menu-heading: Это помогает нам указывать заголовок для нашего меню

    Синтаксис: 

     
    
    <ул>
        
  • . ..
    • 
        
  • 
            <а href="#">
                ...
            
        
    •

    Примечание: Не забудьте добавить чистый CSS CDN, чтобы иметь возможность использовать чистый CSS-фреймворк

    Пример: Предположим, мы хотим создать горизонтальное меню для панели навигации нашего портфолио.

    < html >

       

    < head >

        

         < Ссылка REL = "Стили-лист"

    HREF =

    70 1111,10. ..com/UNPKG..com/UNPKG..com/UNPKM...com/UNPKM..com/UNPKM..com/UNPKG..com/UNPKG..com/UNPKG..com/UNPKG..com/UNPKG..com/UNPKG..com/UNPKG...com/UNPKM./LILD. min.css"

               integrity =

    "sha384-Uu6IeWbM+gzNVXJcM9XV3SohHtmWE+3VGi496jvgX1jyvDTXfdK+rfZc8C1Aehk5"  

               crossorigin =

    "anonymous" >

       

        

         < style >

             .logo {

                 color: #2f8d46 ;

                 вес шрифта: полужирный;

                 размер шрифта: 1,5 бэр;

             }

        

    style >

       

         < title >Menu title >

    головка >

    < Body >

    < NAV 1 < NAV 0071 class = "menu pure-menu pure-menu-horizontal" >

             < a href = "#"  

               

    class = "Logo Pure-Menu-Heading Pure-Menu-Link" >

    MySite

    A > A > A > A > A > A > . 0072

             < ul class = "menu pure-menu-list" >

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

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

                       About

                     a >

                 li >

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

                    < a class = "pure-menu-link"0072 >

                       Projects

                     a >

                 li >

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

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

    Контактный >

    UL >

    Нави0071 >

    body >

       

    html >

    Output:

    Pure CSS Horizontal Menu


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

    html - Горизонтальное меню CSS не является гладким в определенных сценариях макета

    Задавать вопрос

    спросил

    Изменено 1 год, 1 месяц назад

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

    В настоящее время работает над тонкой настройкой горизонтального дерева CSS с вложенными UL. есть некоторые проблемы, когда определенные ли вложены и разница в выравнивании или макете Проблемные области выделены красным цветом

    Макет работает для определенных сценариев, а для некоторых других сценариев выравнивание не является гладким.

     
    
    <голова>
    <мета-кодировка="UTF-8">
    
    Документ
    <стиль>
    тело {
    отступы сверху: 10px;
    }
    .дерево {
    стиль списка: нет;
    }
    .дерево,
    .дерево * {
    маржа: 0;
    }
    .дерево ли {
    дисплей: гибкий;
    flex-направление: строка;
    выравнивание элементов: flex-start;
    положение: родственник;
    заполнение слева: 2vw;
    обивка-дно: 2вх;
    }
    .дерево li::после {
    содержание: '';
    положение: абсолютное;
    слева: 0;
    Топ-5%;
    поле сверху: 2px;
    }
    .дерево li::before {
    содержание: '';
    положение: абсолютное;
    выравнивание элементов: по центру;
    слева: 2px;
    верх: 1%;
    поле слева: -2px;
    поле справа: -20px;
    граница сверху: 5 пикселей сплошного красного цвета;
    ширина: 2вб;
    }
    . tree li:not(:last-of-type)::before {
    содержание: '';
    положение: абсолютное;
    выравнивание элементов: по центру;
    слева: -2px;
    поле слева: -3px;
    верх: 2%;
    верхняя граница: 2px сплошной СИНИЙ;
    ширина: 2вб;
    }
    /* =============================================== ========= */
    .tree li:not(:only-child):not(:last-of-type)::before {
    содержание: '';
    положение: абсолютное;
    слева: 0;
    внизу: 0%;
    поле сверху: 1px;
    нижняя граница: -4px;
    граница слева: 2 пикселя сплошного синего цвета;
    }
    .tree li: not (: only-child): not (: first-of-type): not (: last-of-type):: before {
    содержание: '';
    положение: абсолютное;
    слева: 0;
    внизу: 0%;
    поле сверху: 1px;
    нижняя граница: -4px;
    граница слева: 2 пикселя сплошного красного цвета;
    }
    .tree li:only-child::before {
    содержание: '';
    положение: абсолютное;
    слева: 0;
    внизу: 0%;
    поле сверху: 1px;
    нижняя граница: -6px;
    граница слева: 0px сплошной серый;
    }
    . tree li:only-child::after {
    содержание: '';
    положение: абсолютное;
    слева: 0;
    низ: 2%;
    топ: 14%;
    поле сверху: 10px;
    нижняя граница: 2px;
    граница слева: 0px сплошной серый;
    }
    .tree li:only-last-child::after {
    содержание: '';
    положение: абсолютное;
    слева: 0;
    внизу: -5%;
    сверху: -20%;
    поле сверху: 10px;
    нижняя граница: -24px;
    граница слева: сплошной желтый цвет 10 пикселей;
    }
    .tree li:only-last-child::before {
    содержание: '';
    положение: абсолютное;
    слева: 0;
    внизу: 0%;
    Топ-5%;
    поле сверху: -9пкс;
    нижняя граница: 20px;
    граница слева: 2 пикселя сплошного белого цвета;
    }
    /* =============================================== ========= */
    .tree li:last-of-type::after {
    высота: 50%;
    сверху: 0;
    }
    .tree li:first-of-type::after {
    высота: 50%;
    внизу: 0;
    }
    .tree li: не (: первый тип): не (: последний тип):: после {
    высота: 100%;
    }
    .дерево ул,
    . дерево {
    заполнение слева: 2vw;
    положение: родственник;
    }
    .tree ul: не (: пусто):: до,
    .дерево ол:не(:пусто)::до {
    содержание: '';
    положение: абсолютное;
    слева: 0;
    верх: 2%;
    нижняя граница: -2px;
    граница сверху: 2 пикселя сплошного синего цвета;
    ширина: 2вб;
    }
    .tree span {
    граница: сплошная 1px;
    выравнивание текста: по центру;
    отступы: 0,33 см 0,66 см;
    цвет фона: желтый;
    цвет синий;
    }
    .дерево>ли {
    отступ слева: 0;
    }
    .дерево>ли::до,
    .дерево>ли::после {
    дисплей: нет;
    }
    ол,
    ул {
    сброс счетчика: раздел;
    }
    li span::before {
    счетчик-инкремент: раздел;
    /* содержимое: counters(section, ".") " "; */
    семейство шрифтов: моноширинный;
    }
    тело {
    /* дисплей: гибкий; */
    выравнивание содержимого: по центру;
    выравнивание элементов: по центру;
    высота: 100%;
    }
    
    
    <тело>
    <ул>
    
  • Главная
    
    • 
    
    <ул>
    
  • 
    ЗАДЕРЖКА
    <ул>
    
  • Уровень 1
    <ул>
    
  • Уровень 1. 1
    <ул>
    
  • Уровень 1.2.1
    <ул>
    
  • Уровень 1.2.1.1
    • 
    
  • Уровень 1.2.1.2
    • 
    
    
    
  • Уровень 1.2.2
    • 
    
    
    
  • Уровень 1.2
    <ул>
    
  • Уровень 1.2.1
    <ул>
    
  • Уровень 1.2.1.1
    • 
    
  • Уровень 1.2.1.2
    <ул>
    
  • Уровень 1.2.1.2.1
    • 
    
  • Уровень 1.2.1.2.2
    • 
    
  • Уровень 1.2.1.2.3
    • 
    
    
    
  • Уровень 1.2.1.3
    • 
    
    
    
  • Уровень 1.2.2
    <ул>
    
  • Уровень 1.2.2.1
    • 
    
  • Уровень 1.2.2.2
    • 
    
  • Уровень 1.2.2.3
    •
    • html
    • css
    • дерево
    • меню
    • дисплей

    Похоже, мы получили простое разрешение (исправлено сверху: % в пикселях) и упорядочили на основе цвета, чтобы визуализировать, какие селекторы/атрибуты мы можем попробовать. Решение1

      <голова> <мета-кодировка="UTF-8">Документ <стиль> тело {
отступы сверху: 10px;
}
/* важно для значка/отображения статуса элемента
.tree ul > li: после {
содержание: '';
положение: абсолютное;
слева: 0;
верх: 2%;
нижняя граница: -2px;
граница сверху: 20 пикселей, сплошной зеленый цвет;
ширина: 2вб;
}
*/
.дерево {
стиль списка: нет;
}
.дерево,
.дерево * {
маржа: 0;
}
.дерево ли {
дисплей: гибкий;
flex-направление: строка;
выравнивание элементов: flex-start;
положение: родственник;
заполнение слева: 2vw;
обивка-дно: 2вх;
}
.дерево ul > li::after {
содержание: '';
положение: абсолютное;
слева: 0;
Топ-5%;
поле сверху: 2px;
}
.дерево li::before {
содержание: '';
положение: абсолютное;
выравнивание элементов: по центру;
слева: 2px;
верх: 0px;
поле слева: 0px;
поле сверху: 2px;
поле справа: -30px;
верхняя граница: 2 пикселя, сплошной серый цвет;
ширина: 2вб;
}
. tree li:not(:last-of-type)::before {
содержание: '';
положение: абсолютное;
выравнивание элементов: по центру;
слева: 0px;
поле слева: -4px;
верх: 0px;
верхняя граница: 2 пикселя, сплошной серый цвет;
ширина: 2вб;
}
/* =============================================== ========= */
.tree li:not(:only-child):not(:last-of-type)::before {
содержание: '';
положение: абсолютное;
слева: 4px;
внизу: 0px;
поле сверху: 0px;
нижняя граница: -4px;
граница слева: 2 пикселя сплошного синего цвета;
}
.tree li: not (: only-child): not (: first-of-type): not (: last-of-type):: before {
содержание: '';
положение: абсолютное;
слева: 4px;
внизу: 0px;
верх: 0px;
поле сверху: 1px;
нижняя граница: -4px;
граница слева: 2px сплошной коричневый;
}
.tree li:only-child::before {
содержание: '';
положение: абсолютное;
слева: 0;
внизу: 0%;
поле сверху: 1px;
нижняя граница: -6px;
граница слева: 0px сплошной серый;
}
.tree li:only-child::after {
содержание: '';
положение: абсолютное;
слева: 0;
низ: 2%;
топ: 14%;
поле сверху: 10px;
нижняя граница: 2px;
граница слева: 0px сплошной серый;
}
. tree li:only-last-child::after {
содержание: '';
положение: абсолютное;
слева: 0;
внизу: -5%;
сверху: -20%;
поле сверху: 10px;
нижняя граница: -24px;
граница слева: сплошной желтый цвет 10 пикселей;
}
.tree li:only-last-child::before {
содержание: '';
положение: абсолютное;
слева: 0;
внизу: 0%;
Топ-5%;
поле сверху: -9пкс;
нижняя граница: 20px;
граница слева: 2 пикселя сплошного белого цвета;
}
/* =============================================== ========= */
.tree li:last-of-type::after {
высота: 50%;
сверху: 0;
}
.tree li:first-of-type::after {
высота: 50%;
внизу: 0;
}
.tree li: не (: первый тип): не (: последний тип):: после {
высота: 100%;
}
.дерево ул,
.дерево {
заполнение слева: 2vw;
положение: родственник;
}
.tree ul: не (: пусто):: до,
.дерево ол:не(:пусто)::до {
содержание: '';
положение: абсолютное;
слева: 0;
верх: 0px;
поле сверху: 1px;
нижняя граница: -3px;
граница сверху: 2 пикселя сплошного оранжевого цвета;
ширина: 2вб;
}
.tree span {
граница: сплошная 1px;
выравнивание текста: по центру;
отступы: 0,33 см 0,66 см;
цвет фона: желтый;
цвет синий;
}
. дерево>ли {
отступ слева: 0;
}
.дерево>ли::до,
.дерево>ли::после {
дисплей: нет;
}
ол,
ул {
сброс счетчика: раздел;
}
li span::before {
счетчик-инкремент: раздел;
/* содержимое: counters(section, ".") " "; */
семейство шрифтов: моноширинный;
}
тело {
/* дисплей: гибкий; */
выравнивание содержимого: по центру;
выравнивание элементов: по центру;
высота: 100%;
}   <тело> <ул>
  • Главная <ул>
  • Уровень 1 <ул>
  • Уровень 1.1 <ул>
  • Уровень 1.1.1 <ул>
  • Уровень 1.1.1.1
  • Уровень 1.1.1.2
  • Уровень 1.1.2 <ул>
  • Уровень 1.1.2.1
  • Уровень 1.1.2.2
  • Уровень 1.2
    •  <ул>
  •  ЗАДЕРЖКА <ул>
  • Уровень 1 <ул>
  • Уровень 1.1 <ул>
  • Уровень 1.2.1 <ул>
  • Уровень 1.2.1.1
  • Уровень 1.

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

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