Как сделать всплывающее меню html: Горизонтальное выпадающее меню – Выпадающее меню на чистом CSS / HTML

Как сделать плавное выпадающее меню на CSS • ЭРА ТЕХНОЛОГИЙ

Приветствую! Если ты начинающий верстальщик, то рано или поздно ты столкнешься с тем, что захочешь как-то оживить свои страницы, сделать их хоть немного интерактивными. Как нельзя лучше тут тебя смогут выручить CSS анимации. Но нужно знать, где и как их применять.

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

Верстаем меню HTML + CSS

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

Что мы имеем? Самый обыкновенные ненумерованный список с идентификатором «top_menu» и со ссылками, обернутыми в элементы этого самого списка. Все банально и просто. При наведении пункты меню меняют цвет… это все вы уже знаете и понимаете, как это сделать (я надеюсь).

Добавляем меню второго уровня

Чтобы сделать многоуровневое меню, нам нужно добавить второй ненумерованный список внутрь первого. Думаю, это вы проходили где-то на начальных уроках. А также то, что его вставить нужно не просто внутри нашего списка, а именно внутри элемента списка, то есть тега «

li», сразу после закрывающего тега «a».

Позиционируем вложенные списки абсолютно по отношению к «li», в которые они вложены. А все «li» верхнего уровня позиционируем относительно (relative). Чтобы выпадающее меню находилось СРАЗУ же после нашего меню верхнего уровня, ему (выпадающему – “inner_menu”) нужно задать

position: absolute;
top: 100%;

То есть отступ от верхней границы родителя будет равен высоте родителя. Очень логично, по-моему.

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

Как видите, наше выпадающее меню пока выглядит не выпадающим, а выпавшим и висящим. Но ничего, это мы скоро исправим.

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

Нет ничего проще! Чтобы наш вложенный список сделать выпадающим меню, его нужно просто скрыть! А потом открывать только тогда, когда курсор мыши будет проноситься над пунктом меню верхнего уровня, который содержит в себе выпадающее меню. Звучит, может быть, немного сложно, но на самом деле это решается буквально несколькими строчками кода.

Выпадающему меню добавляем:

display: none;

А чтобы его отобразить, нужно прописать:

#top_menu > li:hover > ul {
   display: block;
}

Что нам говорит это целое скопище селекторов? Читаем с конца. Мы задаем стили (видмости) для списка второго уровня, который лежит внутри элемента списка первого уровня, но стили эти сработают только в том случае, если мы наведем мышкой (ховер) на элемент «li» в который вложен наш список второго уровня.

Надеюсь, я выразился понятно. Если нет, попробуйте прочитать несколько раз. А еще лучше просто понимать это, глядя на код. Смотрим, что у нас получилось:

Да, мы вроде бы добились того, чего хотели – мы сделали выпадающее меню, самое настоящее выпадающее меню, мать его! Но ему чего-то не хватает. А знаете чего? Плавности! Ведь все выглядит так, как будто меню не выпадает, а просто появляется. Причем очень резко, моментально даже, я бы сказал.

Ну что же, давайте еще немного поколдуем над ним.

Плавное выпадающее меню – это просто

Итак, давайте сделаем плавное выпадающее меню на чистом CSS. Зачем это делать? Потому что люди любят, когда все плавненько и мягонько… и это выглядит красиво. Будет плюс к юзабилити вашего сайта. Погнали!

Запомните, вы можете анимировать только точные математические величины, например 50px и 300px, 0 и 100%, 0,5 и 1,0 и так далее. В нашем случае мы не сможем анимировать два состояния нашего выпадающего меню (display:none; и display:block;).

Но мы можем заменить их на прозрачность – opacity:0 и opacity:1. И задать время в течение которого наше меню будет проявляться из прозрачного состояния. Да, это действительно сработает, однако это не совсем тот эффект, который вы возможно ожидали. Поэтому давайте сделаем немного сложнее. Но это того стоит, поверьте.

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

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

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

Еще проще можно было бы сделать с применением jQuery, но мы же оговорили сначала, что будем сегодня работать с чистым CSS. А еще красивее можно было сделать, добавив к анимациям кривые Безье, однако эта тема немного выходит за рамки сегодняшней. Но мы к ней обязательно вернемся позже.

Вывод:

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

Кстати это был мой первый урок по CSS. Опишите, как вам? Понятно все объяснил или нужно еще подробнее разжевывать? И стоит ли вообще продолжать писать статьи на тему лайфхаков в CSS?

Спасибо за внимание и до скорых встреч!

Плавно открывающееся меню с помощью 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 и 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. Окончательный вариант.

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

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

Выпадающее меню на CSS3 » Скрипты для сайтов

Горизонтальное меню с выпадющими подпунктами с использованием css3.

HTML

<nav>
    <ul>
        <li><a href="">Главная</a></li>
        <li><a href="">Подменю</a>
            <i></i>
            <ul>
                <li><a href="">Пункт 1 подменю</a></li>
                <li><a href="">Пункт 2 подменю</a></li>
                <li><a href="">Пункт 3 подменю</a></li>
                <li><a href="">Пункт 4 подменю</a></li>
            </ul>
        </li>
        <li><a href="">Контакты</a></li>
    </ul>
</nav>

CSS

body {
    padding: 100px!important;
    font: 300 16px tahoma;
}
/* mark with differing style */
.mark {
    font-weight: 400;
}
/* nav */
.nav {
    list-style: none;
}
.nav li {
    float: left;
    position: relative;
    background: #34495e;
}
/* круглые края */
.nav > li:first-of-type {
    border-radius: 5px 0 0 5px;
}
.nav > li:last-of-type {
    border-radius: 0 5px 5px 0;
}
/* блоки ссылок */
.nav li a {
    display: block;
    text-decoration: none;
    color: #fff;
    padding: 12px;
    border-radius: 5px;
}
/* выпадающее меню */
.sub-nav {
    position: absolute;
    border-top: 15px solid transparent;
    left: -9999px;
    list-style:none;
    padding:0;
}
/* make submenu reappear */
.nav li:hover .sub-nav {
    left: 0;
}
/* triangle */
.triangle {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #34495e;
    position: absolute;
    margin-top: 5px;
    left: -9999px;
}
/* reappear */
.nav li:hover .triangle {
    left: 15px;
}
/* prevent multi line links */
.sub-nav li {
    white-space: nowrap;
}
/* закругленные края */
.sub-nav > li:first-of-type {
    border-radius: 5px 5px 0 0;
}
.sub-nav > li:last-of-type {
    border-radius: 0 0 5px 5px;
}
/* верхний уровень при наведении */
.nav > li:hover > a {
    background: #2C3E50;
    transition: background ease .5s;
}
/* ссылки подменю */
.sub-nav a {
    font-size: 90%;
    margin: 3px;
    transition: background ease .3s;
}
.sub-nav a:hover {
    background: #E74C3C;
}

Отправить ответ

avatar
  Подписаться  
Уведомление о