Css выпадающий список — Stack Overflow на русском
Вопрос задан
Изменён 7 лет 8 месяцев назад
Просмотрен 4k раз
надо с помощью только css сделать выпадающий список каждый пункт меню в себе имеет еще несколько (первый например 2 , а второй 3) как сделать так , чтобы высота пункта при наведении увеличивалась в 2 или в 3 раза в зависимости от пункта. Только средствами css это возможно??
3
Если я правильно понял Вас, то это поможет:
HTML
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Frontend Development</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a>
<ul>
<li><a href="#">Resets</a></li>
<li><a href="#">Grids</a></li>
<li><a href="#">Frameworks</a></li>
</ul>
</li>
<li><a href="#">JavaScript</a>
<ul>
<li><a href="#">Ajax</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Backend Dev</a>
<ul>
<li><a href="#">Ruby</a>
<ul>
<li><a href="#">Ruby on Rails</a></li>
<li><a href="#">Sinatra</a></li>
</ul>
</li>
<li><a href="#">PHP</a>
<ul>
<li><a href="#">WordPress</a></li>
<li><a href="#">Symfony</a></li>
</ul>
</li>
</ul>
</li>
<li><p>From Russia with <span</span></p></li>
</ul>
SCSS
ul {
list-style: none;
padding: 0;
margin: 0;
background: #1bc2a2;
li {
display: block;
position: relative;
float: left;
background: #1bc2a2;
ul {
display: none;
li { border-top: 0; }
}
a {
display: block;
padding: 1em;
text-decoration: none;
white-space: nowrap;
color: white;
&:hover { background: #2c3e50; }
}
p {
color: white;
padding-left: 1em;
& span {
color: red;
}
}
}
}
li:hover {
> ul {
display: block;
position: absolute;
}
li {
float: none;
& a:hover { background: #2c3e50; }
}
a { background: #1bc2a2; }
}
ul ul ul {
left: 100%;
top: 0;
}
// Clearfix
ul {
&:before, &:after {
content: " ";
display: table;
}
&:after { clear: both; }
}
Поиграться на CodePen можно здесь.
1
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Вертикальное выпадающее меню на CSS
Сегодня я приведу пример создания вертикального выпадающего меню оформленного с помощью CSS.
Для начала нужно построить структуру нашего меню. Она будет состоять из ненумерованного базового списка включающего в себя списки-подменю.
index.html
<title>Вертикальное выпадающее меню на CSS</title> <script type="text/javascript" src="cssmenu.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <ul> <li><a href="#">Главная страница</a></li> <li><a href="#">Создание сайтов</a> <ul> <li><a href="#">Дизайн сайтов</a></li> <li><a href="#">Вёрстка сайтов</a></li> <li><a href="#">Оптимизация сайтов</a></li> </ul> </li> <li><a href="#">Продвижение сайтов</a> <ul> <li><a href="#">SEO продвижение</a></li> <li><a href="#">SMO продвижение</a></li> </ul> </li> <li><a href="#">SEO биржи</a></li> <li><a href="#">SEO софт</a></li> </ul> |
style.
css
<div>
/* Убираем отступы и маркеры в ненумерованном списке, задаём ширину и стили оформления */
ul {
padding: 0;
margin: 0;
list-style: none;
width: 140px;
list-style: none;
border-bottom: 1px solid #C1D8E6;
font-size: 11px;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
/* Задаём относительное позиционирование выпадающего списка */
ul li {
position: relative;
}
/* Задаём абсолютное позиционирование выпадающего списка, сдвиг влево на 139 px, чтобы выпадающее меню перекрывало главное и не создавалась двойная граница, по умолчанию выпадающий список будет скрыт */
li ul {
position: absolute;
left: 139px;
top: 0;
display: none;
}
/* Задаём стили для ссылок */
ul li a {
display: block;
text-decoration: none;
color: #003399;
background: #EAF4FF;
background-image: url('images/bullet-arrow.gif') ;
background-repeat: no-repeat;
background-position: 1px 9px;
padding: 5 5 5 10;
border: 1px solid #ccc;
border-bottom: 0;
}
/* Указываем браузеру, что подменю будет появляться, когда курсор находится над элементом списка. |
JavaScript нужен, чтобы заставить выпадающее меню работать в Internet Explorer. В остальных браузерах должно работать без него.
Вот так работает наше меню — Вертикальное выпадающее меню на CSS
Твитнуть
Метки: вертикальное выпадающее меню, выпадающее меню на CSS, примеры css меню
Как настроить выпадающий список с помощью CSS
Знакомо ли вам чувство, которое вы испытываете, когда тратите несколько часов на то, чтобы все выглядело идеально, только для того, чтобы быть побежденным браузером! Позволь мне объяснить.
Итак, мой день начался с тестирования страницы, которую я создавал для веб-сайта клиента. И что это, когда я заметил проблему. В то время как это конкретное *раздражение* осталось бы незамеченным неопытным глазом, мои очки дизайнера пользовательского интерфейса сразу же заметили это.
Проблема заключалась в том, что в разных браузерах поле выбора отображалось по-разному. Я знаю, что это не недавняя проблема. Дело в том, что каждый браузер отображает поле по-своему. Firefox — худший (в данном случае)… худший! И эта непоследовательность была темным пятном на моем творчестве.
Итак, прервём драму 😀 . Следующее, что я сделал, очевидно, попытался решить эту проблему. Погуглив об этом. Я не был готов так легко победить. На некоторых форумах предлагалось использовать свойства -moz-appearance или -webkit-appearance , но я не смог найти действительно работающее решение.
Теперь я знал, что мне нужен CSS, который я должен правильно использовать для решения этой проблемы.
Но это было не очень очевидно, пока один из моих экспериментов не натолкнул меня на мысль.
Поскольку проблема заключалась в основном в кнопке раскрывающегося списка, простой вариант состоял в том, чтобы скрыть ее во всех браузерах и заменить ее своим собственным изображением, чтобы элемент выбора выглядел одинаково во всех браузерах. Я объясню это вам шаг за шагом.
1. Поместите раскрывающийся список в контейнер
Для начала нам нужна определенная область для поля выбора. Эта область должна быть отмечена контейнером div, а поле выбора размещено внутри другого div.
<дел>
<дел>
<выбрать имя="search_categories">
Внутренний div содержит раскрывающийся список. Прежде чем продолжить, добавим базовый CSS:
Скрыть кнопку раскрывающегося списка 
search_categories .select{
ширина: 120%;
background:url('arrow.png') без повтора;
фоновое положение: 80% центр;
}
.search_categories .выбрать выбрать{
фон: прозрачный;
высота строки: 1;
граница: 0;
заполнение: 0;
радиус границы: 0;
ширина: 120%;
положение: родственник;
z-индекс: 10;
размер шрифта: 1em;
}
Это означает, что если вы продолжите покупать продукт, используя такую ссылку, мы получим небольшую комиссию (без каких-либо дополнительных затрат для вас). Это помогает нам поддерживать блог и создавать бесплатный контент. Мы рекомендуем только те продукты, с которыми работаем или любим. Спасибо за Вашу поддержку!
