Многоуровневое css меню горизонтальное – Горизонтальное выпадающее многоуровневое меню

Содержание

Горизонтальное многоуровневое меню на основе только CSS

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

Ниже структура меню генерируется динамически

<div>
<ul >
  <li><a href="/en/">Home</a></li>
  <li><a href="/en/">Menu 1</a></li>
  <li><a href="/en/menu2/">Menu 2</a></li>
  <li><a href="/en/menu3/">Menu 3</a></li>
  <li><a href="/en/menu4/">Menu 4</a></li>
  <li><a href="/en/menu5">Menu 5</a>
    <ul>
      <li><a href="">Menu 5.1</a></li>
<li><a href="">Menu 5.2</a></li>
<li><a href="">Menu 5.3</a></li>
    </ul>
  </li>
  <li><a href="/en/menu6/">Menu 6</a></li>
</ul>
</div>

Многоуровневая работа с JS https://codepen.io/anon/pen/RMrqmQ

Мне нужен указатель на хороший пример, я посмотрел, например, но все они имеют класс, определенный для UL & li, в то время как мое динамическое меню ul..li чисто, так что пользователь может настроить его в соответствии с его требованиями

ОБНОВИТЬ

Работает на codepen, похоже, хорошо работает https://codepen.io/anon/pen/bvEzwe

.nav ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 0;
  margin: 0;
}

.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  text-align: left;
}

.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  padding-left: 15px;
  border-bottom: 1px solid #888;
  transition: .3s background-color;
}

.nav a:hover {
  background-color: #005f5f;
}

.nav a.active {
  background-color: #aaa;
  color: #444;
  cursor: default;
}

/* Sub Menus */
.nav li li {
  font-size: .8em;
}


@media screen and (min-width: 650px) {
  .nav li {
    width: 130px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
    display: inline-block;
    margin-right: -4px;
  }

  .nav a {
    border-bottom: none;
  }

  .nav > ul > li {
    text-align: center;
  }

  .nav > ul > li > a {
    padding-left: 0;
  }

  /* Sub Menus */
  .nav li ul {
    position: absolute;
    display: none;
    width: inherit;
  }

  .nav li:hover ul {
    display: block;
  }

  .nav li ul li {
    display: block;
  }
}

geekquestion.com

Многоуровневое вертикальное меню

<div>

    <ul>

        <li>

            <a href="#">Пункт меню 1</a>

            <input type="checkbox" checked="checked" />

            <label for="1"></label>

            <ul>

                <li>

                    <a href="#">Пункт меню 1.1</a>

                    <input type="checkbox" checked="checked"/>

                    <label for="1.1"></label>

                    <ul>

                        <li>

                            <a href="#">Пункт меню 1.1.1</a>

                        </li>

                        <li>

                            <a href="#">Пункт меню 1.1.2</a>

                        </li>

                        <li>

                            <a href="#">Пункт меню 1.1.3</a>

                        </li>

                    </ul>

                </li>

                <li>

                    <a href="#">Пункт меню 1.2</a>

                </li>

                <li>

                    <a href="#">Пункт меню 1.3</a>

                </li>

            </ul>

        </li>    

        <li>

            <a href="#">Пункт меню 2</a>

            <input type="checkbox" />

            <label for="2"></label>

            <ul>

                <li>

                    <a href="#">Пункт меню 2.1</a>

                </li>

                <li>

                    <a href="#">Пункт меню 2.2</a>

                </li>

                <li>

                    <a href="#">Пункт меню 2.3</a>

                </li>

                <li>

                    <a href="#">Пункт меню 2.4</a>

                </li>

            </ul>

        </li>

        <li>

            <a href="#">Пункт меню 3</a>

            <input type="checkbox" />

            <label for="3"></label>

            <ul>

                <li>

                    <a href="#">Пункт меню 3.1</a>

                </li>

                <li>

                    <a href="#">Пункт меню 3.2</a>

                </li>

            </ul>

        </li>

        <li>

            <a href="#">Пункт меню 4</a>

            <input type="checkbox" />

            <label for="4"></label>

            <ul>

                <li>

                    <a href="#">Пункт меню 4.1</a>

                </li>

                <li>

                    <a href="#">Пункт меню 4.2</a>

                </li>

                <li>

                    <a href="#">Пункт меню 4.3</a>

                </li>

            </ul>

        </li>

    </ul>

</div>

atuin.ru

Адаптивное горизонтальное многоуровневое меню на CSS3

<div>

<nav>

<ul>

<li>

<a href="">

<i></i>

<strong>Главная</strong>

<small>Описание страницы</small>

</a>

</li>

<li>

<a href="">

<i></i>

<strong>О нас</strong>

<small>Описание страницы</small>

</a>

</li>

<li>

<a href="">

<i></i>

<strong>Возможности</strong>

<small>Описание страницы</small>

</a>

</li>

<li>

<a href="">

<i></i>

<strong>Новости</strong>

<small>Описание страницы</small>

</a>

</li>

<li>

<a href="">

<i></i>

<strong>Блог</strong>

<small>Поболтаем?</small>

</a>

<ul>

<li><a href="#"><i></i>Кто мы?</a></li>

<li>

<a href="#"><i></i>Наша команда</a>

<ul>

<li><a href="#"><i></i>Девка</a></li>

<li>

<a href="#"><i></i>Парень</a>

<ul>

<li><a href="#"><i></i>Обо мне</a></li>

<li><a href="#"><i></i>Достижения</a></li>

</ul>

</li>

<li><a href="#"><i></i>Девка #2</a></li>

</ul>

</li>

<li><a href="#"><i></i>Награды</a></li>

<li><a href="#"><i></i>Сертификаты</a></li>

</ul>

</li>

<li>

<a href="">

<i></i>

<strong>Портфолио</strong>

<small>Описание страницы</small>

</a>

</li>

<li>

<a href="">

<i></i>

<strong>Контакты</strong>

<small>Напишите нам</small>

</a>

</li>

<li>

<a>

<input type="text" value="поиск ...">

<button><i></i></button>

</a>

<a href="">

<i></i>

</a>

</li>

</ul>

</nav>

</div>

imapo.ru

Несколько бесплатных решений навигации и меню с использованием JQuery и CSS3 для Ваших сайтов

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

Здесь в общем представлены выпадающие и многоуровневые меню, в горизонтальном и вертикальном положении. В тоже время почти вся навигация использует скрипты JQuery, которые существенно всё украшает.

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

Маленькая навигация с использованием JQuery

Пример ι Скачать исходники

Горизонтальное и вертикальное меню с интересным эффектом при наведении

Пример ι Скачать исходники

Фиксированное и горизонтальное меню для сайта

Пример ι Скачать исходники

Несколько разноцветных JQuery многоуровневых меню

Пример ι Скачать исходники

Простая навигация с интересным эффектом при наведении

Пример ι Скачать исходники

Выпадающее JQuery меню для сайтов с тёмным дизайном

Пример ι Скачать исходники

Многоуровневая навигация с JQuery и CSS3

Пример ι Скачать исходники

Горизонтальная и выпадающая тёмная навигация

Пример ι Скачать исходники

Красивое многоуровневое и зелёное JQuery меню

Пример ι Скачать исходники

Серое и горизонтальное меню для Вашего ресурса

Пример ι Скачать исходники

Большая навигация с красивым эффектом при наведении

Пример ι Скачать исходники

Классное вертикальное меню с автопрокруткой

Пример ι Скачать исходники

Очень красивая JQuery навигация с изображениями

Пример ι Скачать исходники

Красивое JQuery меню с голубыми оттенками

Пример ι Скачать исходники

Ещё одно меню в голубых тонах

Пример ι Скачать исходники

Классное и большое меню аккордеон

Пример ι Скачать исходники

Красивая навигация с плавным эффектом при наведении

Пример ι Скачать исходники

Разноцветная навигация для весёлых сайтов

Пример ι Скачать исходники

Красивое и тёмное JQuery меню на сайт

Пример ι Скачать исходники

Простое анимационное меню

Пример ι Скачать исходники

beloweb.ru

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

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