Как сделать выпадающее меню css: Горизонтальное выпадающее меню

Xahed Kamal    

Похожие вопросы:

CSS — одноуровневое выпадающее меню

Я разрабатываю темы WordPress, и единственная проблема, с которой я сталкиваюсь, — это выпадающие меню. стилизация этих селекторов ul и li с display и … свойствами. Даже читая учебники и…

CSS выпадающее меню отстает в Firefox

Я сделал чистое выпадающее меню CSS для своего клиента. Выпадающее меню использует фоновое изображение позади пунктов главного меню. В Firefox 3 и 4 меню CSS не имеет заметного запаздывания, когда…

Выпадающее Меню CSS?

Недавно я установил выпадающее меню в строке главного меню и кое-что заметил. Заголовок h2 прямо под ним перемещается по странице, когда я активирую выпадающее меню. Это похоже на то, как выпадающее…

CSS Выпадающее Меню

Я пытаюсь сделать простое выпадающее меню CSS, чтобы при наведении курсора мыши на ссылку появлялось подменю. Мне удалось добиться этого, когда вы наводите курсор мыши на li, но не можете понять,…

Нужно выпадающее меню

Мне нужно выпадающее меню. Есть так много там, есть ли выпадающее меню jquery, которое довольно просто с общей конфигурацией CSS?

Выпадающее меню над кадрами?

У меня есть 2 iframe на моей странице. Одна-это панель меню (frame1), другая-панель содержимого. Высота рамки меню равна 100, и, оставшись для фрейма содержимого, я не могу изменить высоту фрейма1…

Переставить CSS выпадающее меню

Я следую учебнику, чтобы сделать выпадающее меню css . Но мне было интересно, есть ли способ сделать это так, чтобы он появлялся с левой стороны, одна кнопка поверх другой, а не сверху, где кнопки…

Выпадающее меню CSS выпуск

Я создал выпадающее меню для своего сайта WordPress. В этом jsfiddle вы можете найти код HTML и CSS: http://jsfiddle.net/N5h5c / see jsfiddle У меня там проблема CSS. Я создал выпадающее меню, но…

CSS выпадающее меню

Как следует из названия, я делаю выпадающее меню CSS. Моя первая проблема заключалась в том, что, когда я зависал, выпадающее меню закрывало значок гамбургера. Поэтому я добавил margin-top , который…

CSS прокрутка меню-выпадающее меню не прокручивается должным образом

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

CSS: Выпадающее меню с задержкой

Обычное выпадающие css-меню сделанное с помощью переключения display:none;/display:block; повешенного на hover обладает двумя раздражающими недостатками:

— подменю показывается мгновенно, как только курсор мыши попал в область родительского пункта
— подменю мгновенно пропадает, как только курсор вышел за пределы подменю

Пример такого меню:

<ul>
    <li>
        <a href="#">item</a>
        <ul>
            <li>subitem 1</li>
            <li>subitem 2</li>
        </ul>
   </li>
</ul>

<style>
.menu {
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu .menu-item {
    float: left;
    margin: 0 1px 0 0;
    padding: 0;
    background: #E1E1E1;
}
.menu .menu-item a {
    display: block;
    padding: 5px 10px;
}
.menu .submenu {
    display: none; /* По умолчанию скрываем подменю */
    position: absolute;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #E1E1E1;
}
.menu .menu-item:hover .submenu {
    display: block; /* Показываем подменю при ховере */
}
.menu .submenu-item {
    margin: 0;
    padding: 5px 10px;
}
</style>

Демо

Чтобы создать небольшую задержку перед показом и скрытием подменю раньше приходилось использовать javascript, но теперь наткнулся на css вариант.

Весь фокус в свойстве transition, а точнее его подсвойстве transition-delay, которое позволяет добавить задержку перед показом анимации:

.menu .submenu {
    opacity: 0; /* По умолчанию скрываем подменю */
    visibility: hidden;
    transition-property: opacity, visibility; /* Важно чтобы transition применялось к обоим свойствам */
    transition-duration: 0.2s; /* Добавляем анимацию 0.3 сек. */
    transition-delay: 0.15s; /* Добавляем задержку в 0.15 сек. */
}
.menu .menu-item:hover .submenu {
    opacity: 1; /* Показываем подменю при ховере */
    visibility: visible;
}

Демо

Поскольку анимацию нельзя вешать на display, то для скрытия подменю приходится использовать связку opacity:0; visibility:hidden;.

сделать выпадающее меню на CSS и HTML.

Задача

Создать выпадающее меню инструментами CSS и HTML.

Решение

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

<!DOCTYPE html>
<html>
<head>
	<title>Выпадающее меню</title>
<style>
        ul.menu{
            padding: 3px;       /* убираем отступы */
            margin-top: 50px;   /* для красоты отодвигаю вниз */
            text-align: center; /* выравниваю элементы спаска по центру */
        }
        ul.menu > li{
            list-style: none;	    /* убираем маркеры списка */
            display: inline-block;	/* разещаем списки горизонтально */
            background-color: #D87171;
            padding: 5px 15px;
        }
        /* устанавливаем стиль ссылок в меню */
        ul.menu > li > a{
            color: #FFFFFF;
            text-decoration: none;
        }
        /* устанавливаем стиль ссылок при наведении курсора */
        ul.menu > li > a:hover{
            text-decoration: underline;
        }
</style>
</head>
<body>
<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">Контакты</a></li>
	<li><a href="#">Услуги</a></li>
</ul>

</body>
</html>

У нас получился список такого вида:

Рисунок 1. Подготовительные работы.

Обратите внимание: стиль ссылки меняется при наведении на неё курсора. Это реализовывается с помощью псевдокласса :hover. Этот псевдокласс задаёт стиль элемента при наведении на него курсора, при этом кнопка мыши не нажата. Если есть нажатие кнопки — это уже другой псевдокласс.

Теперь перейдём к решению нашей задачи. Сделаем выпадающее меню для пункта «Услуги», добавим выпадающие разделы: «Купить», «Продать», «Обменять». Эти пункты — это отдельный список, который вложен в тег <li>

Создадим этот список и добавим стили, описывающие его внешний вид.

<!DOCTYPE html>
<html>
<head>
	<title>Выпадающее меню</title>
<style>
    ul.menu{
        padding: 3px;       /* убираем отступы */
        margin-top: 50px;   /* для красоты отодвигаю вниз */
        text-align: center; /* выравниваю элементы спаска по центру */
    }
    ul.menu > li{
        list-style: none;	    /* убираем маркеры списка */
        display: inline-block;	/* разещаем списки горизонтально */
        background-color: #D87171;
        padding: 5px 15px;
    }
    /* устанавливаем стиль ссылок в меню */
        ul.menu > li > a{
        color: #FFFFFF;
        text-decoration: none;
    }
    /* устанавливаем стиль ссылок при наведении курсора */
    ul.menu > li > a:hover{
        text-decoration: underline;
    }
    /* устанавливаем стиль для внутреннего меню */
    .menuInner{
        list-style: none;
        padding: 4px;
        border: 1px solid #000000;
        border-radius: 5px;
        background-color: #FFFFFF;
        text-align: left;
    }
</style>
</head>
<body>
<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">Контакты</a></li>
	<li><a href="#">Услуги</a>
		<ul>
			<li>Купить</li>
			<li>Продать</li>
			<li>Обменять</li>
		</ul>
	</li>
</ul>

</body>
</html>

Теперь у нас получился такой список:

Рисунок 2. Подготовительные работы.

Безусловно, это не то, что нам нужно. По умолчанию этот список должен быть скрыт и становиться видимым только при наведении мыши. Скрыть элемент можно при помощи правила правила {display: none}. А при наведении курсора его нужно активировать сделав снова видимым правила {display: inline-block}.

<!DOCTYPE html>
<html>
<head>
	<title>Выпадающее меню</title>
<style>
    ul.menu{
        padding: 3px;
        margin-top: 50px;
        text-align: center;
    }
    ul.menu > li{
        list-style: none;
        display: inline-block;
        background-color: #D87171;
        padding: 5px 15px;
    }
    /* устанавливаем стиль ссылок в меню */
        ul.menu > li > a{
        color: #FFFFFF;
        text-decoration: none;
    }
    /* устанавливаем стиль ссылок при наведении курсора */
    ul.menu > li > a:hover{
        text-decoration: underline;
    }
    /* устанавливаем стиль для внутреннего меню */
    .menuInner{
        display: none; /* делаем невидимым */
        list-style: none;
        padding: 4px;
        border: 1px solid #000000;
        border-radius: 5px;
        background-color: #FFFFFF;
        text-align: left;
    }
    /* делаем видимым при наведении курсора на блок li */
    .menu > li:hover > .menuInner{
        display: block;
    }
</style>
</head>
<body>
<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">Контакты</a></li>
	<li><a href="#">Услуги</a>
		<ul>
			<li>Купить</li>
			<li>Продать</li>
			<li>Обменять</li>
		</ul>
	</li>
</ul>

</body>
</html>

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

Чтобы элемент отображался не влияя на отображение других элементов, его нужно спозиционировать со значением absolute.

<!DOCTYPE html>
<html>
<head>
	<title>Выпадающее меню</title>
<style>
    ul.menu{
        padding: 3px;
        margin-top: 50px;
        text-align: center;
    }
    ul.menu > li{
        position: relative;         /* добавляем позиционирование */
        list-style: none;
        display: inline-block;
        background-color: #D87171;
        padding: 5px 15px;
        height: 20px;               /* добавляем высоту */
    }
    /* устанавливаем стиль ссылок в меню */
        ul.menu > li > a{
        color: #FFFFFF;
        text-decoration: none;
    }
    /* устанавливаем стиль ссылок при наведении курсора */
    ul.menu > li > a:hover{
        text-decoration: underline;
    }
    /* устанавливаем стиль для внутреннего меню */
    .menuInner{
        display: none; /* делаем невидимым */
        list-style: none;
        padding: 4px;
        border: 1px solid #000000;
        border-radius: 5px;
        background-color: #FFFFFF;
        text-align: left;
    }
    .menu > li:hover > .menuInner{
        display: block;
        position: absolute;
        top: 30px;
        left: 0;
    }
</style>
</head>
<body>
<ul>
	<li><a href="#">Главная</a></li>
	<li><a href="#">Контакты</a></li>
	<li><a href="#">Услуги</a>
		<ul>
			<li>Купить</li>
			<li>Продать</li>
			<li>Обменять</li>
		</ul>
	</li>
</ul>

</body>
</html>

Что мы тут сделали:

1. Добавили в родительский элемент <li> правило позиционирования {position: relative;}. Это сделано для того, чтобы отчёт координат абсолютного позиционирования вложенного списка начался с верхнего левого угла этого блока, а не угла экрана.
2. Добавили в родительский элемент <li> правило {height: 20px;}. Задали ему высоту, чтобы удобней было позиционировать выпадающий список.
3. Установили абсолютное позиционирование {position: absolute;} выпадающему списку и установили координаты: top и left.

Теперь выпадающее меню работает корректно.

Рисунок 3. Окончательный вариант.

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

Учебная задача решена. Пока.

Выпадающее меню на HTML и CSS

Выпадающее меню можно сделать на CSS не используя скрипты и модули. Просто дописываем несколько строк в CSS файл и готово. Несмотря на простоту меню будет достаточно универсальным. Стили подходить под произвольное количество уровней вложенности. Хоть два хоть десять уровней. Код при этом остаётся тем же. В статье описаны три вида меню, но если вы только начинаете разбираться в вёрстке советую читать сначала. Так будет проще понять.

1. Вертикальное выпадающее меню
2. Горизонтальное выпадающее меню с одним уровнем вложенности
3. Горизонтальное меню с несколькими уровнями вложенности

Сначала сделаем HTML разметку для меню. Принято делать меню списком. Это не стандарт просто так сложилось.

<ul>
  <li><a href="#">пункт 1</a>
    <ul>
      <li><a href="#">пункт 1.1</a></li>
      <li><a href="#">пункт 1.2</a></li>
    </ul>
  </li>
  <li><a href="#">пункт 2</a>
    <ul>
      <li><a href="#">пункт 2.1 многа букаф</a></li>
      <li><a href="#">пункт 2.2</a>
        <ul>
          <li><a href="#">пункт 2.2.1</a></li>
          <li><a href="#">пункт 2.2.2</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">пункт 3</a></li>
  <li><a href="#">пункт 4</a></li>
  <li><a href="#">пункт 5</a></li>
</ul>

HTML файл мы больше трогать не будем. Все дальнейшие изменения производятся только за счёт CSS. Первое что нам нужно сделать — скрыть вложенные пункты.

ul.nav li ul {display: none;}

Ещё нужно убрать маркеры но это дело вкуса.

ul.nav li {list-style: none;}

Чтобы вложенные пункты появлялись при наведении на родительский пункт используем псевдокласс :hover, при этом нужно сделать так что бы появлялись только пункты первого уровня вложенности. Для этого используем знак >

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

В этой строчке заключается вся магия нашего выпадающего меню, поэтому разберём её подробнее. Благодаря псевдоклассу :hover, при наведении курсора на пункт меню, он же элемент списка li, для первого вложенного списка ul значение display станет block. Так открывается первый уровень вложенности. Если на этом уровне есть пункты содержащие подпункты, то при наведении на них также откроется только один вложенный уровень.

С основной механикой разобрались. Осталось переопределить место где будут появляться вложенные пункты. Для этого воспользуемся свойством position: absolute. При таком позиционировании отсчёт координат ведётся от края окна браузера если только для родительского элемента не задано свойство position с значением fixed, relative или absolute. В этом случае отсчёт ведётся от края родительского элемента.

Используя свойство position мы переместим вложенные пункты в право на расстояние равное ширине меню. В рассматриваемом способе есть одно ограничение. При позиционировании нам придётся жёстко задать ширину. С другой стороны вертикальное меню размещается в сайдбаре ширина которого заранее определена, поэтому привязка к ширине не должна вызвать проблем.

/* Вертикальное выпадающее меню*/
body{
  background: #DCDCDC;
}
/*блок меню*/
ul{
  margin: 0;
  padding: 0;
}
ul.nav li {
  background: #B3B3FF;
  border: 1px solid #FFFFFF;
  list-style: none;
  width: 150px;         /*ширина блока меню*/
}
ul.nav li a {
  text-decoration: none;
  display: block;
  padding: 5px 5px 5px 15px;
}
ul.nav li ul {
  display: none;	/*скрываем вложенные пункты*/
}

/*Выпадающее меню*/

ul.nav li:hover {
  /* позиционирование вложенных элементов
   * будет расчитыватьться относительно
   * родительского элемента
   */
  position: relative;
  background: yellow;
}
ul.nav li:hover > ul {
  display: block;
}
ul.nav li:hover ul{
  position: absolute;
  top: 0;       /*Задаём координаты для вложенных пунктов*/
  left: 150px; /*меню раскрывается вправо*/
}

Вот что должно получиться в результате. демка

Для горизонтального меню мы будем так же применять позиционирование но есть несколько нюансов. Что бы сделать меню горизонтальным используем свойство float. Меню будет раскрываться вниз значит при позиционировании нужно учитывать высоту. Для начала сделаем меню с одним уровнем вложенности. Вложенное меню также будет горизонтальным. Для этого вложенное меню позиционируем относительно списка а не родительского пункта и задаём для него ширину.

/*Горизонтальное выпадающее меню с одним уровнем вложенности*/

body{
  background: #DCDCDC;
}

/* Блок меню*/

ul{
  margin: 0;
  padding: 0;
}
ul.nav li {
  background: #B3B3FF;
  border-right: 1px solid #FFFFFF;
  float: left; /*делаем меню горизонтальным*/
  height: 30px;
  list-style: none;
}
ul.nav li a {
  text-decoration: none;
  display: block;
  padding: 5px 5px 5px 15px;
}
ul.nav li ul {
  display: none;	/*скрываем вложенные пункты*/
}
ul.nav li:hover {
  background: yellow;
}
/*Выпадающее меню*/
ul.nav {
  position: relative;
  background: #B3B3FF;
  height: 30px;
  width: 600px;
}
ul.nav li:hover > ul {
  background: #D0E0FF;
  border-top: 1px solid white;
  display: block;
  width: 600px;
  position: absolute;
  top: 30px;
  left: 0;
}

Вот что получиться в итоге демка.

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

/*Горизонтальное выпадающее меню a*/

body{
  background: #DCDCDC;
}

/* Блок меню*/
ul{
  margin: 0;
  padding: 0;
}
ul.nav li {
  background: #B3B3FF;
  border-right: 1px solid #FFFFFF;
  float: left; /*делаем меню горизонтальным*/
  height: 30px;
  list-style: none;
}
ul.nav li a {
  text-decoration: none;
  display: block;
  padding: 5px 5px 5px 15px;
}
ul.nav li ul {
  display: none;	/*скрываем вложенные пункты*/
}
ul.nav { /*задаём высоту и ширину меню*/
  background: #B3B3FF;
  height: 30px;
  width: 600px;
}

/*Выпадающее меню*/

ul.nav li:hover {
  background: yellow;
  position: relative;
}
ul.nav li:hover > ul {
  border-top: 1px solid white;
  display: block;
  position: absolute;
  top: 30px; /*первый уровень меню раскрывается вниз*/
  left: 0;
}
/*Второй и последующие уровни вложенности*/
ul.nav li ul li{
  border-bottom: 1px solid white;
  height: auto;
  width: 150px;
}
ul.nav li:hover ul li ul{
  position: absolute;
  top: 0;
  left: 150px; /*второй и последующие уровни расскрываются вправо*/
}

Вот так будет выглядеть наше многоуровневое меню демка.

Видеоурок 1. Выпадающее меню для сайта с помощь html и css на WordPress

Не так давно, на одном из рабочих сайтов, мне нужно было сделать выпадающее меню. Ну дело вроде пустяковое, думал по быстрому сделаю и получу оплату, но не тут то было =) Сначала я решил взять код html и css из каких ни будь подобных уроков и все скопировать, то есть сделать по шаблону. Но после того, как я обнаружил что на многих блогах код дают не правильный — не рабочий, я решил все сделать сам… И все оказалось достаточно просто и быстро. Покажу вам html и css код выпадающего меню — рабочий 🙂 Также рекомендую узнать, как сделать выпадающее меню на WordPress сайте.

html код выпадающего меню — скилет

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

<ul>
        <li><a href="/">Подменю 1</a>
            <ul>
                <li><a href="/" >Пункт подменю 1</a></li>
                <li><a href="/">Пункт подменю 2</a></li>
                <li><a href="/">Пункт подменю 3</a></li>
            </ul>
        </li>

<li><a href="/">Подменю 2</a>
                <ul>
                    <li><a href="/">Пункт подменю 1</a></li>
                    <li><a href="/">Пункт подменю 2</a></li>
                    <li><a href="/">Пункт подменю 3</a></li>
                </ul>
            </li>
</ul>

CSS код горизонтального выпадающего меню

Вот такое меню можно сделать моим способом…

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

#mymenu {
    float: left;
    width: 100%;
    margin: 20px 10px;
    list-style: none;
}

#mymenu li {
    float: left;
    width: auto;
    padding: 0 10px;
    font-size: 18px;
}

#mymenu li ul {
    display: none;
    width: 200px;
}

#mymenu li:hover ul {
    display: block;
    position: absolute;
    list-style: none;
    margin: 0;
    padding: 0;
}

#mymenu li ul li {
    float: left;
    width: 200px;
    padding: 5px 0;
    font-size: 14px;
}

 CSS код вертикального выпадающего меню

А вот и вертикальное выпадающее меню для вашего сайта

#mymenu {
	float: left;
	width: 150px;
	height: auto;
	margin: 20px 10px;
	list-style: none;
}

#mymenu li {
	display: block !important;
	width: auto;
	padding: 0 10px;
	font-size: 18px;
}

#mymenu li ul {
	display: none;
	width: 200px;
}

#mymenu li:hover ul {
	display: block;
	list-style: none;
	margin: 0 0 0 0px;
	padding: 0;
}

#mymenu li ul li {
	float: left;
	width: 200px;
	padding: 5px 0;
	font-size: 14px;
}

В данном случае меню выпадает вертикально вниз. Но если в CSS стилях заменить вот этот код, подменю выпадает вправо:

#mymenu li:hover ul {
	display: block;
	list-style: none;
	margin: 0 0 0px 100px;
	position: absolute;
	padding: 0;
}

Выпадающее меню для сайта

Выпадающее меню будет полезным для сайта, где планируется меню с большим количеством внутренних пунктов. Преимущества выпадающего меню — это экономия места, удобство использования и простота изготовления 😉 В данном примере меню я не использовал ничего, кроме HTML и CSS, что дает определенные плюсы. Это меню можно сделать многоуровневым — хотя, возможно будет не аккуратно смотреться, но бывают случаи, что это просто необходимо.

Если у вас код откажется работать — пишите в комментарии, подправлю вам лично 🙂

Удачной работы! 😉

Создать выпадающее меню в Joomla при помощи модулей и Bootstrap

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

Как сделать выпадающее навигационное меню стандартными возможностями Joomla

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

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

Чтобы изменить формат меню и сделать его выпадающим, вам необходимо зайти в “Менеджер расширений”. Затем перейдите в модули и найдите в списке стандартное расширение для элемента меню Joomla. Вам необходимо открыть “Основные параметры” модуля, чтобы изменить его тип. Потом перейдите в “Дополнительные параметры”, пока не доберетесь до суффиксов CSS-классов в настройках. Именно от выбранного суффикса зависит то, как будет отображаться модуль в Joomla. Вам необходимо выбрать пункт vmenu (возможно, в названии будут присутствовать и другие буквы). Также не забудьте выбрать “Отображение на всех страницах”, дабы избежать путаницы.

Далее вам предстоит сделать для настроенного выпадающего меню пункты. Это легко осуществить через “Менеджер меню”. Найдите имя необходимого меню и раздел настроек “Пункты меню”. И не забудьте после всего проделанного очистить кэш сайт, иначе посетители долгое время не заметят нововведений!

Есть еще один способ, как без использования Bootstrap и посторонних модулей сделать выпадающее навигационное меню в Joomla 3. Для этого вам необходимо будет лишь создать пункты меню специального типа. Перейдите в настройки определенной менюшки и в окно создания пунктов. Далее напишите имя пункта, а в типе укажите “Статьи” и выберите ссылку на необходимую страницу. Не забудьте указать родительское меню и сохранить изменения.

Указанные способы создания выпадающего меню в Joomla хоть и легко реализуются, но навряд ли удовлетворят запросы всякого вебмастера. Если вы хотите, чтобы ваша менюшка обрела индивидуальность, тогда пропишите модуль через Bootstrap или установите специальное расширение.

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

Учтите, что это не самый легкий путь. Куда проще просто скачать специальный модуль и подкорректировать его CSS файл для обеспечения индивидуального дизайна. Но если легких путей вы не ищите, и хотите попрактиковаться в Bootstrap, тогда коротко разберем этот метод.

Чтобы создать меню в Bootstrap, необходимо использовать элемент navbar – это сокращенно навигационный бар. Вы сможете создать меню любого типа при помощи данного элемента, но нужно будет поработать с прописью его функций. Navbar в Bootstrap можно будет сделать адаптивным, с привязкой к прокрутке (как поисковая строка в Яндексе) и фиксированным. Вам нужно будет заключить navbar в специальный тег <nav>. Чтобы в Bootstrap сделать именно меню навигации, вам нужно будет оформить его в виде списка с тегами <ul><li>. Для формирования выпадающего эффекта укажите для родительского элемента li класс dropdown, а для дочерних – dropdown-menu.

Учитывайте, что вам еще предстоит настроить формат выпадения менюшки. Дело в том, что в Bootstrap по умолчанию пункты меню выпадают только после нажатия, а не при наведении. Так что вам придется изрядно помучиться, чтобы создать именно то, чего вы так хотите! Потому лучше использовать специальный модуль – это проще и быстрее.

Это мощный, высоко настраиваемый модуль для Joomla. Рекомендуется скачивать данное расширение с проверенных источников, так как иногда злоумышленники внедряют в структуру модуля вредоносное ПО для заражения сайтов вирусами. Модуль поддерживает любую ориентацию для меню (горизонтальную и вертикальную). Вам придется разобраться в настройках модуля самостоятельно, так как админка расширения доступна только на трех языках: английский, испанский и словацкий.

Большое преимущество использования именно модуля Ari Ext Menu для формирования выпадающего меню – это совместимость с любым браузером мира, а также автоматическая адаптация менюшки под устройства с маленькими расширениями. Установка расширения ничем не отличается от стандартной. Еще одна особенность модуля – это наличие анимационного эффекта. Он настраивается через пункт настроек Transittion type в админке – есть два вида анимации. Также в админке вы сможете настроить оформление расширения. А если доступных возможностей для вас окажется мало, то можете отредактировать файл menu.min.css, который определяет стиль элемента.

Обычно, описанного выше расширения достаточно, чтобы реализовать любую задумку в меню навигации. Но модуль Jquery Jumpmenu JT также заслуживает место быть в данном обзоре, так как имеет одну отличительную особенность – он занимает минимум места на сайте, потому не сильно нагружает браузеры юзеров и повышает скорость загрузки менюшки. Кроме того, созданная вами навигация так же будет адаптивной, как и с Ari Ext Menu. Установка модуля производится через стандартные возможности Joomla. Скачайте архив расширения и установите его в админке при помощи специального менеджера. Не забудьте определить позицию для модуля.

Плавно открывающееся меню с помощью CSS

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

Первым делом, давайте напишем HTML код нашего меню. Меню будет простейшим. Для примера у него будет 2 пункта у каждого из которых будет выпадающий список с подпунктами.

<nav>
	<ul>
		<li>
		<a href="#">пункт 1</a>
			<ul>
				<li><a href="#">Выпадающий пункт 1</a></li>
				<li><a href="#">Выпадающий пункт 2</a></li>
				<li><a href="#">Выпадающий пункт 3</a></li>
			</ul>
		</li>
		<li>
		<a href="#">пункт 2</a>
			<ul>
				<li><a href="#">Выпадающий пункт 1</a></li>
				<li><a href="#">Выпадающий пункт 2</a></li>
				<li><a href="#">Выпадающий пункт 3</a></li>
			</ul>
		</li>

	</ul>
</nav>

Думаю тут все понятно, самое простое 2-х уровневое меню. Как и говорил, меню имеет два главных пункта, можете добавить сколько угодно, если нужно. Дальше нужно просто добавить стили, которые и сделают всю магию 🙂

#slow_nav > ul{
	width: 500px;
	margin:25px auto 0;
}

#slow_nav > ul > li{
	list-style: none;
	display: inline-block;
	position:relative;
	padding:0;
}

#slow_nav a{text-decoration:none;}

#slow_nav > ul > li > a{
	font-size:18px;
	padding:5px;
	background-color:#333;
	color:#fff;
}

#slow_nav li ul{
	position:absolute;
	list-style:none;
	text-align:center;
	top:15px;
	font-size:15px;
	left:0;
	margin:0;
	padding:0;

/* Данные строки нужны для правильной работы анимации */
	max-height:0px;
	overflow:hidden;
	-webkit-transition:max-height 0.4s linear;
	-moz-transition:max-height 0.4s linear;
	transition:max-height 0.4s linear;
/* конец */
}

#slow_nav li:hover ul{
	max-height:300px;
}

#slow_nav li ul li{
	background-color:#333;
	border-bottom:1px solid #888;
}

#slow_nav li ul li:last-child{
	border-bottom:none;
}

#slow_nav li ul li a{
	padding:5px 12px;
	color:#fff;
	display:block;
}

#slow_nav li ul li:hover{
	background-color:#444;
}

#slow_nav li ul li:first-child{
	margin-top:25px;
	position:relative;
}

#slow_nav li ul li:first-child:before{
	content:'';
	position:absolute;
	width:1px;
	height:1px;
	border:5px solid transparent;
	border-bottom-color:#333;
	left:10px;
	top:-10px;
}

Код CSS не маленький., но по своей сути не сложный. Если Вы владеете навыками верстки, то запросто разберетесь что и как. Я лишь остановлюсь на некоторых моментах, которые являются важными.

Первым делом это сама анимация. Нужный код выделен комментариев в коде — /* Данные строки нужны для правильной работы анимации */. Удалять из нельзя, в противном случаи анимация перестанет работать. В данном отрезке кода, изначально мы задаем высоту в ноль пикселей —

max-height:0px; и прописываем свойство overflow:hidden;, чтобы скрыть наше дочернее меню, то есть выпадающее. Дальше уже прописываем кроссбраузерное свойство transition, которое совершит анимацию.

-webkit-transition:max-height 0.4s linear;
-moz-transition:max-height 0.4s linear;
transition:max-height 0.4s linear;

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

#slow_nav li:hover ul{
	max-height:300px;
}

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

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

Данный способ можно применять не только к самописным меню но и к тем же динамическим меню, которые создаются системами управления сайтом, например WordPress. Для этого нужно немного подправить стили и все. То есть первый HTML код использовать не нужно, только стили. В стилях нужно заменить имя айди #slow_nav на то что будет у Вас, ну и возможно подправить еще что-то по мелочам. Подробно останавливаться не буду. Для каждого случая нужен персональный подход, так что уж извините 🙂 Я дал идею и способ, а Вам решать, применять его или нет.

На этом все, спасибо за внимание. 🙂

Выпадающее меню навигации, доступное только для CSS

Это выпуск №7 в серии, посвященной современным решениям CSS для проблем, которые я решал за последние 14 с лишним лет работы фронтенд-разработчиком .

В этом методе исследуется использование:

• Анимация с переходом CSS и преобразованием
• Использование : фокус в псевдокласс
• CSS-сетка для позиционирования
• техника динамического центрирования
• Рекомендации по доступности раскрывающихся меню

Если вы когда-нибудь вырывались из головы, имея дело с концепцией «намерения наведения», то это обновление для вас!

Прежде чем мы зайдем слишком далеко, хотя наша методика на 100% использует только CSS, необходимо добавить некоторый Javascript для более полного доступа.Также существует полифилл, необходимый для ключевой функции, чтобы эта функция работала — : focus-within — для наиболее надежной поддержки. Но мы все еще значительно улучшились по сравнению с тем временем, когда нам требовались один или несколько подключаемых модулей jQuery для создания визуальных эффектов.

Обновление специальных возможностей — 18.08.20 : Огромное спасибо Майклу Фэйрчайлду из Deque (и создателю превосходного ресурса a11ysupport.io) за тестирование оригинального решения с использованием различных вспомогательных технологий. Метод только с CSS требует некоторого Javascript для полного соответствия WCAG 2.1. В частности, необходимо использовать javascript, чтобы предлагать способ закрытия меню без использования мыши и табуляции (например, клавиша выхода) для соответствия критерию успеха 1.4.13. Майкл указал на эту демонстрацию WAI-ARIA Authoring Practices, которая предоставляет дополнительную информацию о необходимых функциях Javascript. Это настоятельно рекомендуемые дополнения для вашего окончательного производственного решения.

Если вы не использовали Sass, вам может потребоваться пять минут, чтобы понять синтаксис вложенности Sass, чтобы легче всего понять приведенные примеры кода.

Базовая навигация HTML #

Мы будем улучшать это по мере продолжения, но вот наша стартовая структура:

Если на минуту заглянуть в кнопку , это семантический стандарт для ссылок навигации.Эта структура гибкая, чтобы жить где угодно на вашей странице, поэтому она может быть оглавлением на боковой панели так же легко, как и основная навигация.

Прямо за воротами мы реализовали несколько функций специально для обеспечения доступности:

1. aria-label на

2. Использование кнопки в качестве фокусируемого, обнаруживаемого элемента для запуска раскрывающегося раскрывающегося списка
3. aria-controls на .dropdown__title , который ссылается на идентификатор .dropdown__menu , чтобы связать его с меню для вспомогательных технологий
4. aria-extended на кнопке , которую в вашем окончательном решении необходимо переключать через Javascript, как указано в демонстрации, упомянутой в начале этой статьи

Как отметил Майкл, использование кнопки button также позволяет пользователям Dragon Naturally Speaking сказать что-то вроде «нажмите кнопку», чтобы открыть меню.

Наш (в основном) начальный вид по умолчанию выглядит следующим образом:

Начальные стили навигации #

Во-первых, мы дадим несколько стилей контейнера для nav и определим его как контейнер сетки. Затем мы удалим стили списка по умолчанию из nav ul и nav ul li .

  nav {
 background-color: #eee; 
 набивка: 0 1 бэр; 
 дисплей: сетка; 
 мест размещения: центр; 
 ul {
 в виде списка: нет; 
 маржа: 0; 
 отступ: 0; 
 дисплей: сетка; 
 
 li {
 отступ: 0; 
} 
} 
} 
  

Мы потеряли иерархическое определение, но можем начать возвращать его со следующего:

  nav {
> ul {
 grid-auto-flow: столбец; 
 
> li {
 маржа: 0 0.5рем; 
} 
} 
} 
  

Используя селектор дочернего комбинатора > , мы определили, что верхний уровень ul , который является прямым потомком nav , должен переключить его grid-auto-flow на столбец , который эффективно обновляет его до быть вдоль оси x . Затем мы добавляем маржу к элементам верхнего уровня li для большей четкости. Теперь будущие выпадающие элементы появляются под меню «Сладости» и более четко являются его дочерними элементами:

Затем мы сначала добавим немного стиля ко всем ссылкам, а также к .dropdown__title , а затем только ссылки верхнего уровня в дополнение к .dropdown__title . Здесь также мы очищаем собственные стили браузера, унаследованные для элементов button .

  
 .dropdown__title {
 цвет фона: прозрачный; 
 граница: отсутствует; Семейство шрифтов 
: наследование; 
} 
 nav {
> ul {
> li {
 a, 
 .dropdown__title {
 text-decoration: none; 
 выравнивание текста: по центру; Дисплей 
: строчно-блочный; 
 цвет: синий; 
 размер шрифта: 1.125rem; 
} 
 
 
> a, 
 .dropdown__title {
 padding: 1rem 0.5rem; 
} 
} 
} 
} 
  

Базовые стили выпадающего списка #

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

Хотели бы вы, чтобы советы по CSS в вашем почтовом ящике? Присоединяйтесь к моему информационному бюллетеню, чтобы получать обновления статей, советы по CSS и внешние ресурсы!

Сначала мы модернизируем .dropdown__menu и ссылки на него, чтобы помочь более четко определить его, когда мы работаем с позиционированием и анимацией:

 . Dropdown {
 положение: относительное; 
 .dropdown__menu {
 цвет фона: #fff; 
 радиус границы: 4 пикселя; 
 box-shadow: 0 0,15em 0,25em rgba (черный, 0,25); 
 отступ: 0.5em 0; 
 мин-ширина: 15 каналов; 
 
 a {
 цвет: # 444; 
 дисплей: блочный; 
 отступ: 0,5 м; 
} 
} 
} 
  

Одна из очевидных проблем заключается в том, что .dropdown__menu влияет на контейнер nav , что видно по серому фону nav , присутствующему вокруг раскрывающегося списка.

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

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

Мы собираемся применить трюк с центрированием, чтобы выровнять центральное меню с элементом списка:

 .dropdown__menu {
 позиция: абсолютная; 
 
 
 верх: расчет (100% - 0,25 бэр); 
 осталось: 50%; 
 преобразование: translateX (-50%); 
} 
  

Магия этого метода центрирования заключается в том, что меню может иметь любую ширину или даже динамическую ширину, и оно будет центрироваться соответствующим образом.

Стили раскрытия раскрывающегося списка #

Есть два основных триггера, которые мы хотим использовать для открытия меню: : hover и : focus .

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

: фокус в пределах #

В ближайшее время появится псевдокласс : focus-within , и это именно то, что нам нужно, чтобы сделать его раскрывающимся списком только для CSS. Как уже упоминалось во вступлении, для поддержки IE

Из MDN я выделю курсивом, чтобы показать ту часть, от которой мы будем извлекать выгоду:

Псевдокласс : focus-within CSS представляет элемент, который получил фокус или содержит элемент, получивший фокус .Другими словами, он представляет элемент, который сам соответствует псевдоклассу : focus или имеет потомка, которому соответствует : focus .

Скрыть раскрывающийся список по умолчанию #

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

Вашим первым инстинктом может быть display: none , но это не позволяет нам изящно анимировать переход.

Затем вы можете попробовать просто opacity: 0 , который явно скрывает его, но оставляет после себя «призрачные ссылки», потому что элемент все еще имеет вычисленную высоту.

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

  .dropdown__menu {
 преобразование: rotateX (-90deg) translateX (-50%); 
 transform-origin: центр вверху; 
 непрозрачность: 0,3; 
}  

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

И мы обновляем наше свойство transform , чтобы включить rotateX (-90deg) , который поворачивает меню в трехмерном пространстве на 90 градусов «назад».Это эффективно убирает высоту и создаст интересный переход на откосе. Также вы заметите свойство transform-origin , которое мы добавляем для обновления точки, вокруг которой применяется преобразование, по сравнению с горизонтальным и вертикальным центром по умолчанию.

Кроме того, для соответствия критерию успеха 1.3.2 ссылки должны быть скрыты от пользователей программ чтения с экрана до тех пор, пока они не отобразятся визуально. Мы обеспечиваем такое поведение, включив visibility: hidden (еще раз спасибо Майклу за этот совет!).

Прежде чем мы сделаем раскрытие, нам нужно добавить свойство transition . Мы добавляем его к основному правилу .dropdown__menu , чтобы оно применялось как при включении, так и при выключении фокуса / наведения, иначе говоря, «вперед» и «назад».

  .dropdown__menu {
 переход: 280 мсек без задержки; 
}  

Раскрытие раскрывающегося списка #

При всех этих предварительных настройках раскрытие раскрывающегося списка при наведении и фокусировке может быть выполнено так же кратко, как:

 .раскрывающийся список {
 &: hover, 
 &: focus-within {
 .dropdown__menu {
 opacity: 1; 
 преобразование: rotateX (0) translateX (-50%); 
 видимость: видимая; 
} 
} 
} 
  

Сначала мы инвертируем visibilty (иначе другие свойства не работали бы), а затем мы инвертировали rotateX , сбрасывая его на 0, а затем доводим непрозрачность до 1 для полная видимость.

  .dropdown__menu {
 // ... существующие стили 
 переход: 280 мс все 120 мс замедление; 
}  

 .раскрывающийся список {
 .dropdown__title {
 display: inline-flex; 
 align-items: center; 
 
 &: после {
 content: ""; 
 бордюр: 0,35 брем твердый прозрачный; 
 border-top-color: rgba (синий, 0,45); 
 левое поле: 0,25em; 
 преобразование: translateY (0,15em); 
} 
} 
} 
  

  
 Здесь текст 
 Здесь снова немного текста 
  

  p {position: relative; слева: 50 пикселей; верх: 50 пикселей; }  

  

   
 Здесь немного текста 
   
 Здесь снова текст 
  

  div {
положение: относительное; слева: 50 пикселей; верх: 50 пикселей;
   }  

  
 Здесь текст 

    
 Здесь немного текста 
    
 Здесь снова текст 

 Здесь немного текста 
  

  div {
позиция: абсолютная; верх: 0; слева: 10 пикселей;
}  

  div {position: relative;}
div p {позиция: абсолютная; верх: 50 пикселей; }  

  <адрес> <статья>