Здравствуйте уважаемые начинающие веб-мастера.
В этой статье мы научимся делать горизонтальное и вертикально выпадающее меню, при помощи свойств CSS.
Причём выпадать меню будет в любом нужном Вам направлении.
Эффект раскрытия меню реализован при помощи псевдокласса :hover, а эффект фона — градиентом radial-gradient.
Для создания рамок, основных, и появляющихся при наведении курсора, применены свойства border-radius и box-shadow.
Прочитать о них можно в статье Как делается тень, или найти более подробный теоретический материал в интернете.
А в этой статье я представляю готовый код, который можно скопировать, вставить в редактор Notepad++, и потратив вечерок, сделать под свой вкус, согласно комментариям в коде.
Можно сделать меню более аскетичным, убрав все излишества типа box-shadow и radial-gradient.
А можно сделать ещё круче, применив фоновые изображения и красивые маркеры. В общем полёт для творчества.
А сейчас — горизонтальное выпадающее меню.
Вид в спокойном состоянии:
Вид при наведении курсора на пункты меню:
При нажатии:
Код меню:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
.meny{ /*Общий блок*/
background: #fdeaa8; /*Фон общего блока*/
padding: 2px; /*Отступ от пунктов меню*/
border-radius: 5px; /*Закруглённые углы*/
box-shadow: 0px 0px 0px 2px #0ea8f4; /*Рамка общего блока*/
width: 785px; /*Ширина*/
height: 35px; /*Высота*/
}
.html, .css, .php, .js{ /*Пункты меню - размещение*/
float: left; /*Размещаем горизонтально*/
margin: 3px 3px 3px 3px; /*Отступ между пунктами*/
width: 190px; /*Ширина пунктов*/
}
ul { /*Пункты подменю*/
width: 190px; /*Ширина пунктов подменю*/
list-style: none; /*Убираем маркеры*/
padding: 0; /*Поля вокруг текста*/
margin: 0 0 0 0; /*Отступы вокруг подменю*/
font-family: Arial, sans-serif; /*Шрифт текста в меню*/
font-size: 16px; /*Размер текста в меню*/
text-align: center; /*Текст по центру*/
}
li ul { /*Размещаем подменю*/
position: absolute; /*Подменю позиционируются абсолютно*/
display: none; /*Скрываем подменю*/
margin-left: 0px; /*Сдвиг подменю вправо или влево*/
margin-top: 0px; /*Сдвиг подменю вверх или вниз*/
}
li a { /*Ссылка в подменю*/
display: block; /*Ссылка*/
padding: 5px; /*Поля вокруг текста*/
text-decoration: none; /*Убираем подчеркивание*/
color: #666; /*Цвет текста*/
border-radius: 5px; /*Закруглённые углы пунктов меню*/
box-shadow: 0px 0px 0px 2px #0ea8f4; /*Рамка пунктов меню*/
background: #7df9ff; /*Фон для старых браузеров*/
background: -moz-radial-gradient(center, ellipse cover, #7df9ff 50%, #FBFFFF); /*Переходящий фон (градиент) пунктов меню*/
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(50%,#7df9ff), color-stop(100%,#FBFFFF));
background: -webkit-radial-gradient(center, ellipse cover, #7df9ff 50%, #FBFFFF);
background: -o-radial-gradient(center, ellipse cover, #7df9ff 50%, #FBFFFF);
background: -ms-radial-gradient(center, ellipse cover, #7df9ff 50%, #FBFFFF);
}
li a:hover { /*Ссылки подменю при наведении курсора*/
color: #ffe; /*Цвет текста при наведении*/
box-shadow: 0px 0px 5px 2px #0ea8f4; /*Рамка при наведении*/
background: #009494; /*Фон при наведении*/
background: -moz-radial-gradient(center, ellipse cover, #009494, #FBFFFF); /*Градиент при наведении*/
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#009494), color-stop(100%,#FBFFFF));
background: -webkit-radial-gradient(center, ellipse cover, #009494, #FBFFFF);
background: -o-radial-gradient(center, ellipse cover, #009494, #FBFFFF);
background: -ms-radial-gradient(center, ellipse cover, #009494, #FBFFFF);
}
li a:active{ /*При нажатии */
color: #ef7a04;
box-shadow: 0px 0px 15px 5px #0ea8f4;
}
li:hover ul { /*Подменю при наведении курсора*/
display: block; /*Подменю отображается при наведении курсора*/
}
</style>
</head>
<body>
<ul class="meny">
<li class="html"><a href="http://address post">Курс HTML</a>
<ul>
<li><a href="http://address post">Урок 1</a></li>
<li><a href="http://address post">Урок 2</a></li>
<li><a href="http://address post">Урок 3</a></li>
<li><a href="http://address post">Урок 4</a></li>
</ul>
</li>
<li class="css"><a href="http://address post">Курс CSS</a>
<ul>
<li><a href="http://address post">Урок 1</a></li>
<li><a href="http://address post">Урок 2</a></li>
<li><a href="http://address post">Урок 3</a></li>
<li><a href="http://address post">Урок 4</a></li>
</ul>
</li>
<li class="php"><a href="http://address post">Курс PHP</a>
<ul>
<li><a href="http://address post">Урок 1</a></li>
<li><a href="http://address post">Урок 2</a></li>
<li><a href="http://address post">Урок 3</a></li>
<li><a href="http://address post">Урок 4</a></li>
</ul>
</li>
<li class="js"><a href="http://address post">Курс Java Script</a>
<ul>
<li><a href="http://address post">Урок 1</a></li>
<li><a href="http://address post">Урок 2</a></li>
<li><a href="http://address post">Урок 3</a></li>
<li><a href="http://address post">Урок 4</a></li>
</ul>
</li>
</ul>
</body>
</html>
Вертикальное меню. Вид в спокойном состоянии:
Вид при наведения курсора на пункты меню:
При нажатии:
Код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
.meny{ /*Общий блок*/
background: #fdeaa8; /*Фон общего блока*/
padding: 5px; /*Отступ от пунктов меню*/
border-radius: 5px; /*Закруглённые углы*/
box-shadow: 0px 0px 0px 2px #0ea8f4; /*Рамка общего блока*/
}
ul { /*Пункты меню*/
width: 190px; /*Ширина пунктов подменю*/
list-style: none; /*Убираем маркеры*/
padding: 0; /*Поля вокруг текста*/
margin: 0 0 0 0; /*Отступы вокруг подменю*/
font-family: Arial, sans-serif; /*Шрифт текста в меню*/
font-size: 16px; /*Размер текста в меню*/
text-align: center; /*Текст по центру*/
}
li ul { /*Размещаем подменю*/
position: absolute; /*Подменю позиционируются абсолютно*/
display: none; /*Скрываем подменю*/
margin-left: 190px; /*Сдвиг подменю вправо или влево*/
margin-top: -30px; /*Сдвиг подменю вверх или вниз*/
}
li a { /*Ссылка в подменю*/
display: block; /*Ссылка*/
padding: 5px; /*Поля вокруг текста*/
margin-bottom: 5px;
text-decoration: none; /*Убираем подчеркивание*/
color: #666; /*Цвет текста*/
border-radius: 5px; /*Закруглённые углы пунктов меню*/
box-shadow: 0px 0px 0px 2px #0ea8f4; /*Рамка пунктов меню*/
background: #7df9ff; /*Фон для старых браузеров*/
background: -moz-radial-gradient(center, ellipse cover, #7df9ff 50%, #FBFFFF); /*Переходящий фон (градиент) пунктов меню*/
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(50%,#7df9ff), color-stop(100%,#FBFFFF));
background: -webkit-radial-gradient(center, ellipse cover, #7df9ff 50%, #FBFFFF);
background: -o-radial-gradient(center, ellipse cover, #7df9ff 50%, #FBFFFF);
background: -ms-radial-gradient(center, ellipse cover, #7df9ff 50%, #FBFFFF);
}
li a:hover { /*Ссылки подменю при наведении курсора*/
color: #ffe; /*Цвет текста при наведении*/
box-shadow: 0px 0px 5px 2px #0ea8f4; /*Рамка при наведении*/
background: #009494; /*Фон при наведении*/
background: -moz-radial-gradient(center, ellipse cover, #009494, #FBFFFF); /*Градиент при наведении*/
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#009494), color-stop(100%,#FBFFFF));
background: -webkit-radial-gradient(center, ellipse cover, #009494, #FBFFFF);
background: -o-radial-gradient(center, ellipse cover, #009494, #FBFFFF);
background: -ms-radial-gradient(center, ellipse cover, #009494, #FBFFFF);
}
li a:active{ /*При нажатии */
color: #ef7a04;
box-shadow: 0px 0px 15px 5px #0ea8f4;
}
li:hover ul { /*Подменю при наведении курсора*/
display: block; /*Подменю отображается при наведении курсора*/
}
</style>
</head>
<body>
<ul class="meny">
<li class="html"><a href="http://address post">Курс HTML</a>
<ul>
<li><a href="http://address post">Урок 1</a></li>
<li><a href="http://address post">Урок 2</a></li>
<li><a href="http://address post">Урок 3</a></li>
<li><a href="http://address post">Урок 4</a></li>
</ul>
</li>
<li class="css"><a href="http://address post">Курс CSS</a>
<ul>
<li><a href="http://address post">Урок 1</a></li>
<li><a href="http://address post">Урок 2</a></li>
<li><a href="http://address post">Урок 3</a></li>
<li><a href="http://address post">Урок 4</a></li>
</ul>
</li>
<li class="php"><a href="http://address post">Курс PHP</a>
<ul>
<li><a href="http://address post">Урок 1</a></li>
<li><a href="http://address post">Урок 2</a></li>
<li><a href="http://address post">Урок 3</a></li>
<li><a href="http://address post">Урок 4</a></li>
</ul>
</li>
<li class="js"><a href="http://address post">Курс Java Script</a>
<ul>
<li><a href="http://address post">Урок 1</a></li>
<li><a href="http://address post">Урок 2</a></li>
<li><a href="http://address post">Урок 3</a></li>
<li><a href="http://address post">Урок 4</a></li>
</ul>
</li>
</ul>
</body>
</html>
Если нужно чтобы подменю выпадали в другую стороны, нужно в селекторе li ul, в свойстве margin-left, поставить минус в значении.
Теперь остаётся вставить адреса постов в ссылки, и можно пользоваться.
Желаю творческих успехов.
Перемена
Жена говорит мужу:
— У меня наш сосед просит за деньги… дать ему с условием.
Муж:
— Не, ну ты посмотри, во козел, а что за условие?
Жена:
— Я захожу, раздеваюсь догола, он бросает 10.000 рублей на пол. Я нагибаюсь, подымаю их… успел-не успел… одеваюсь и ухожу.
Муж:
— Ну, за такие бабки и условие плевое, сходи… Час нет, два, три… Заходит вся взъерошенная, с тяжелой сумкой…
— Во гад-то сосед! Десять тысяч медяками высыпал!
Что такое псевдокласс (pseudo-class) CSS < < < В раздел > > > Градиент CSS. Плавный переход от одного цвета к другому
Меню для адаптивных версий сайта;
Красивое меню CSS;
Горизонтальное выпадающее меню в WordPress
Создание вертикального меню в WordPress
Меню многоуровневое горизонтальное и вертикальное;
Буду пробовать у себя на сайте и конечно пополню отзыв.
Все же если это меню будет работать на мобиле, то уже ховер не поможет, а только нажатие. как делать чтобы меню открывалось при нажатии на три полоски, а также подменю открывались при нажатии на пункты меню и сдвигали все меню, оставаясь только сами, а вверху появлялась кнопка возврата в меню из подменю?
Я не совсем понял вопрос, но посмотрите вот такой вариант: https://starper55plys.ru/css/menyu-mnogourovnevoe-gorizontalnoe-i-vertikalnoe-css/.
Он очень похож на тот, что использован на сайте Амстердам On Air
Здравствуйте, Меня зовут Дмитрий
И у меня вопрос с меню, а как же сделать ссылку из меню с текстом, но так что бы текст появлялся не в отдельной странице, а на этой же странице в отдельном блоке. Правильно ли я понимаю что нужно использовать li и ul
Как пример сайт Амстердам On Air
Можно. Задай им в стилях z-index побольше, и будут сверху. Вот в этой статье https://starper55plys.ru/css/otdelnye-bloki/ есть про то, как блоки друг над другом делать.
Спасибо за статью, хожу на курсы, поэтому новичок, дали задание написать простенький сайт на php используя html и css. Меню сделал сам, потом наткнулся на статью данную, сделал на пункт один подменю, столкнулся с такой проблемой: если пунктов в подменю много, то они прячутся под контент или сайдбар, можно их как-нибудь заставить быть всегда сверху?
Свойство padding. Чтобы не писать огромный ответ, введите это слово в поиск и зайдите на htmlbook.ru. Там всё подробненько о том, что где и как можно увеличить.
Подскажите, пожалуйста, как УВЕЛИЧИТЬ ВЫСОТУ пунктов меню?
Большое вам спасибо!!!
Форма комментариев вордпресовская, я её не делал. Сайт-то на WordPress. А код меню скинул на почту.
Здравствуйте! А можно и мне выслать код вашего меню? Интересует непосредственно код меню мобильной версии. И еще такой вопрос. Можете подсказать как реализовать систему комментариев, такую же как у вас?
Доброго времени суток Владимир. Чё не подсказать. можно. Только пару моментов проясним. Во-первых, попробуй этот сайт на маленьком экране открыть. Или на мобиле, или на компе сожми, чтоб примерно пикселей 400-500 было. При такой ширине слева вверху под шапкой появляются три чёрточки. При наведении на них курсора появляется моё горизонтальное меню, но уже в вертикальном виде. Примерно такой вариант устроит?
Правда у меня там с рекламой накладка — недоработка, но суть понятна. Никак руки не дойдут доделать, да и посещений с мобил всего 3% от общего.
И второе. Я не стал кроить шаблон, так как пока слабоват в php, поэтому сделал отдельное меню. То есть по факту меню два. Одно видно от 300 до 640 рх, (то что я сделал), а второе от 640рх (родное меню шаблона). Такой вариант устроит?
И третье. Я могу скинуть тебе код, и подскажу куда в шаблоне его пристроить, но насколько ты силён в html и css? Сможешь ли ты доработать его под свой шаблон?
Если я не совсем верно понял суть вопроса — уточни.
Дружище, если не сложно, подскажи по меню на сайте. Работаю на движке wordpress. Там меню уже заложено. Все работает норм. Но мне нужно доработать его под мобильные устройства. На компе оно открывается при наведении, а на мобильнике нужно, чтобы открывалось при нажатии. Ну типа какой — нибудь плюсик сбоку приписать. Не поможешь с вопросом?
Огромное спасибо! Я так долго искала статью(код) , где всё разложено по полочкам. Понятно что за что отвечает. Я не профессионал, но мне доверили вести школьный сайт. Этот материал просто находка!!!
Пожалуйста. Если что — спрашивайте.
Спасибо, дружище! Хороший сайт!
Подскажите, на каком движке у Вас сайт. Если на WordPress, то функция многоуровневого меню заложена в нём по умолчанию. Если нужен именно код, то ближе к вечеру.
Здравствуйте!
Пока не нашла решения
меню первого уровня: главная, предметы, галерея
при наведении на «предметы» открываются предметы: математика, химия, языки
(это сделано)
при наведении на «языки» должно открываться «английский», «немецкий», «русский»
(не открывается — открывается все при наведении на «предметы», а именно
открывается : математика, химия, языки, английский, немецкий, русский
ps пробовала найти сайты, где многоуровневая вложенность меню, но не нашла — везде только первый уровень вложенности
Спасибо и с уважением …
А вы разбейте групповой селектор, тот что «пункты меню — размещение», на 4 отдельных селектора, и каждому пункту задайте ширину (width), такую, какую хотите. Правда придётся подкорректировать общую ширину блока meny, в селекторе .meny
Подскажите пожалуйста, а как в горизонтальном меню сделать пункты разной ширины?
Отрабатывал вывод категорий на странице среди текста при помощи функции wp_list_categories а нашел функцию wp_dropdown_categories.Меняя атрибуты возможны различные тонкие настройки.Здесь вывожу дочерние категории родительской рубрики 6 -child_of=6. Но вот как выводить код phpсреди текста ….( вдруг есть информация подскажи) Использовал плагин ,но в режиме визуального редактора слетает код. Искал как создать шорткод для функции wp_list_categories .Но не нашел. Пока для меня оптимальное решение — нашел плагин виджитирования страницы ( великолепный плагин) и в зону виджета вставляю виджет php и вставляю код. Работает отлично и в любом месте. Вообще то интересно использование код php ,вывожу в сайдбаре изображение или текста при условии такой то страницы или рубрики.
<h3><?php _e(‘Электрооборудование’); ? > </h3>
<form action=»<?php bloginfo(‘url’); ? >/» method=»get»>
< div style=»width;80%;»>
<?php
$select = wp_dropdown_categories(‘show_option_none=Выбор категории&show_count=1&orderby=name&echo=0&child_of=6′);
$select = preg_replace(«#<select([^>]*)>#», «>select$1 onchange=’return this.form.submit()’>», $select);
echo $select;
? >
<noscript><div><input type=»submit» value=»View» /></div></noscript>
< /div></form>
Раз есть другие списки, то в html, или им, или спискам меню нужно задать класс (class), и в css создавать уже не селектор списка, а селектор этого класса, тогда он не будет ни на что влиять, кроме того элемента, которому задан. Если Вы не знаете как это делается, то вот тут у меня есть пример применения классов, в главе «Жирный и курсивный шрифт». Только у меня класс задан через <span>, а Вам нужно будет задать его прямо тегам <ul> и <li>
Здравствуйте!
Искал простое меню для технического сайта (html css). Ваше мне понравилось (самое первое), упростил, установил. Но тут возникла проблема. Дело в том, что ul { } и li ul { } в файле css влияет и на другие списки в сайте. Как решить такую проблему?
Спасибо за статью!
Вам нужно познакомиться с фреймворк Bootstrap. С его помощью можно сделать несколько столбиков в Вашем меню. Причём оно будет нормально работать на мобилах, и различных браузерах. Можно конечно и простым html + css, но это гигантский код, и как будет на мобилах — не знаю.
Оочень помогла статья, очень все понятно и доходчиво, кучу сайтов перерыла чтобы найти, то что бы все понятно было. Меню теперь есть, вертикальное, выпадающее, НО теперь мне нужно чтобы оно было в 2 и более столбцов, т.к. пунктов много и в длину в 1 столбец это не удобно получается. Что можно предпринять чтобы исправить ситуацию?)
В селекторе ul есть свойство width, изменяйте цифры в его значении.
Здравствуйте! Подскаждите как изменить ширину выпадающего меню?
А посмотрите ещё вот тут. Можно сделать плавное появление субменю, как с javascript.
Спасибо большое! Очень помогло Ваше меню. Пыталась сделать самостоятельно с помощью javascript. Ничего не вышло. Наткнулась на Ваш сайт… Вот это совсем другое дело 🙂 Все легко и все получилось!
HTML можно увидеть если щёлкнуть правой клавишей по странице сайта, и выбрать «Просмотреть код страницы».
Насчёт реализовать. Если у вас WordPress, то наберите в поиске topmenu-separator, именно этот класс задан меню в вашем примере, и ищите «Разделители (сепараторы) в меню WopdPress», если другая CMS, то соответственно по названию.
Материал этот есть. Если не ошибаюсь, то такое меню в WP реализуется в консоли, затем небольшая вставка в файле style.css, и ещё небольшая вставка в файле PHP шаблона.
Ага, вот здесь посмотрите.
Здравствуйте. В вашей статье все описано хорошо, но вот проблема возникает если в подменю много пунктов и лента получается длинной. На сайте http://tfilm.tv/ очень хорошо реализована эта проблема путем смещения в право из нескольких колонок (при наведении курсора на пункт фильмы). Подскажите код HTML и CSS чтоб реализовать такое меню.
Ого, это уже не основы. Если не ошибаюсь у Вас Друпал, я же использую только WordPress.
Но инструменты links-block, block-holder и portlet-content — очень интересные, и я с ними обязательно разберусь, и напишу, как лучше. Правда это потребует времени.
Так что или подождите, или обратитесь на форум.
Подскажите пожалуйста как правильно сделать?
Сейчас у меня в navigation.php :
name); ?>
keywords; ?>
name), $keyword->getUrl($category)); ?>
И в css:
#main .links-block .block-holder, #main .portlet-content {padding:17px 9px 7px 8px;}
#main .links-block h3, .portlet-title{
background:url(../images/bg-heading-2.gif) repeat-x 0 0;
color:#fff;
height:19px;
line-height:1;
font-size:19px;
padding:6px 3px;
}
#main .links-block ul, .portlet-content ul{
margin:0;
padding:0 0 9px;
list-style:none;
}
#main .portlet-content meny{
margin:0;
padding:0 0 9px;
list-style:none;
}
#main .links-block li, .portlet-content li ul { /*Размещаем подменю*/
position: absolute; /*Подменю позиционируются абсолютно*/
display: none; /*Скрываем подменю*/
margin-left: -190px; /*Сдвиг подменю вправо или влево*/
margin-top: -30px; /*Сдвиг подменю вверх или вниз*/
}
#main .links-block li, .portlet-content li a{
padding:0 0 1px 17px;
background:url(../images/bullet.gif) no-repeat 0 6px;
display: block; /*Ссылка*/
margin-bottom: 5px;
text-decoration: none; /*Убираем подчеркивание*/
color: #666; /*Цвет текста*/
border-radius: 5px; /*Закруглённые углы пунктов меню*/
box-shadow: 0px 0px 0px 2px #0ea8f4; /*Рамка пунктов меню*/
background: #7df9ff; /*Фон для старых браузеров*/
background: -moz-radial-gradient(center, ellipse cover, #7df9ff 50%, #FBFFFF); /*Переходящий фон (градиент) пунктов меню*/
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(50%,#7df9ff), color-stop(100%,#FBFFFF));
background: -webkit-radial-gradient(center, ellipse cover, #7df9ff 50%, #FBFFFF);
background: -o-radial-gradient(center, ellipse cover, #7df9ff 50%, #FBFFFF);
background: -ms-radial-gradient(center, ellipse cover, #7df9ff 50%, #FBFFFF);
}
#main .links-block li, .portlet-content li a:hover { /*Ссылки подменю при наведении курсора*/
color: #ffe; /*Цвет текста при наведении*/
box-shadow: 0px 0px 5px 2px #0ea8f4; /*Рамка при наведении*/
background: #009494; /*Фон при наведении*/
background: -moz-radial-gradient(center, ellipse cover, #009494, #FBFFFF); /*Градиент при наведении*/
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#009494), color-stop(100%,#FBFFFF));
background: -webkit-radial-gradient(center, ellipse cover, #009494, #FBFFFF);
background: -o-radial-gradient(center, ellipse cover, #009494, #FBFFFF);
background: -ms-radial-gradient(center, ellipse cover, #009494, #FBFFFF);
}
#main .links-block li, .portlet-content li a:active{ /*При нажатии */
color: #ef7a04;
box-shadow: 0px 0px 15px 5px #0ea8f4;
}
#main .links-block li, .portlet-content li:hover ul { /*Подменю при наведении курсора*/
display: block; /*Подменю отображается при наведении курсора*/
}
Спасибо.
Ну что-же, действительно » СТАРПЁР» в хорошем смысле слова!!!! Очень много полезностей!!! 5 баллов и Б Л А Г О Д А Р Ю !!!!!!!!!!!!!!!
Интересная статья, и много мелочей, которые пригодятся веб мастерам.