Раскрывающиеся списки

butakow · 28.02.2012, 18:26

Подскажите как создать на своем сайте ссылку при нажатии на которую раскрывается список еще ссылок (или просто текст?), а при повторном нажатии закрывается?

errante · 29.02.2012, 18:14

CSS + Java
Можно поискать в инете меню аккордион

butakow · 05.03.2012, 17:03

Нашел вот такой
То что надо, но как сделать не в два, а в три "этажа"? открыл-открыл-ссылка

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>hover</title>
<style type="text/css">
UL {
width: 180px; /* Ширина меню */
list-style: none; /* Для списка убираем маркеры */
margin: 0; /* Нет отступов вокруг */
padding: 0; /* Убираем поля вокруг текста */
font-family: Arial, sans-serif; /* Рубленый шрифт для текста меню */
font-size: 10pt; /* Размер названий в пункте меню */
}
UL LI {
position: relative; /* Подпункты позиционируются относительно */
}
LI UL {
position: absolute; /* Подменю позиционируются абсолютно */
display: none; /* Скрываем подменю */
top: 0; /* По высоте положение подменю исходное */
left: 179px; /* Сдвигаем подменю вправо */
z-index: 1; /* Основное меню находится ниже подменю */
}
LI A {
display: block; /* Ссылка как блочный элемент */
width: 100%; /* Ссылка на всю ширину пункта */
padding: 5px; /* Поля вокруг надписи */
text-decoration: none; /* Подчеркивание у ссылок убираем */
color: #666; /* Цвет текста */
border: 1px solid #ccc; /* Рамка вокруг пунктов меню */
background-color: #f0f0f0; /* Цвет фона */
border-bottom: none; /* Границу снизу не проводим */
}
LI A:hover {
color: #ffe; /* Цвет текста активного пункта */
background-color: #5488af; /* Цвет фона активного пункта */
}
LI:hover UL, LI.over UL {
display: block; /* При выделении пункта курсором мыши отображается подменю */
}
.brd {
border-bottom: 1px solid #ccc; /* Линия снизу */
}
</style>
</head>
<body>

<ul id="menu">
<li><a href="russian.html">Русская кухня</a>
<ul>
<li><a href="linkr1.html">Бефстроганов</a></li>
<li><a href="linkr2.html">Гусь с яблоками</a></li>
<li><a href="linkr3.html">Крупеник новгородский</a></li>
<li><a href="linkr4.html" class="brd">Раки по-русски</a></li>
</ul>
</li>
<li><a href="ukrainian.html">Украинская кухня</a>
<ul>
<li><a href="linku1.html">Вареники</a></li>
<li><a href="linku2.html">Жаркое по-харьковски</a></li>
<li><a href="linku3.html">Капустняк черниговский</a></li>
<li><a href="linku4.html" class="brd">Потапцы с помидорами</a></li>
</ul>
</li>
<li><a href="caucasus.html">Кавказская кухня</a>
<ul>
<li><a href="linkc1.html">Суп-харчо</a></li>
<li><a href="linkc2.html">Лилибдж</a></li>
<li><a href="linkc3.html">Чихиртма</a></li>
<li><a href="linkc4.html" class="brd">Шашлык</a></li>
</ul>
</li>
<li><a href="asia.html" class="brd">Кухня Средней Азии</a></li>
</ul>

</body>
</html>

*regist* · 08.04.2012, 13:21

Цитата:

Сообщение от butakow


	То что надо, но как сделать не в два, а в три "этажа"?

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

yosht · 22.11.2012, 14:03

это просто работа с CSS3 + HTML

Код HTML:

<div>Dropdown

    <ul>
        <li><a href="http://URL1.com">Link 1</a></li>
        <li><a href="http://URL2.com">Link 2</a></li>
    </ul>

</div>

div ul { display: none; }
div:hover ul { display: block; }

chk · 08.12.2012, 15:30

вот неплохой туториал
http://javascript.ru/ui/tree

GAlex · 10.03.2013, 11:00

Возьми пример менюшки и чуть подправь под себя

N.I.K · 02.10.2013, 21:12

Спасибо, а если нужно добавить анимацию при открытии меню?

yosht · 14.10.2013, 13:17

Вы можете добавить анимации с jQuery.

$('#dropdown-ul').fadeIn();

aminoser · 08.03.2014, 16:12

а лучше $('#dropdown-ul').slideToggle();

tugo · 07.03.2015, 15:43

Эта штука называется accordion
В гугле куча примеров, в частности вот
А стилизировать уже можно что угодно

webmit · 05.09.2016, 09:07

Нужно чтобы список в списке был
<ul>
<li>
<a href="">
<ul>
<li><a href=""></a></li>
</ul>
</a>
</li>
</ul>

28.02.2012, 18:26	#1
butakow Неактивный пользователь Пол: Регистрация: 19.02.2012 Сообщений: 6 Репутация: 0	Раскрывающиеся списки Подскажите как создать на своем сайте ссылку при нажатии на которую раскрывается список еще ссылок (или просто текст?), а при повторном нажатии закрывается?

29.02.2012, 18:14	#2
errante Постоялец Пол: Регистрация: 25.03.2005 Сообщений: 789 Репутация: 788	Re: Раскрывающиеся списки CSS + Java Можно поискать в инете меню аккордион

05.03.2012, 17:03	#3
butakow Неактивный пользователь Пол: Регистрация: 19.02.2012 Сообщений: 6 Репутация: 0	Re: Раскрывающиеся списки Нашел вот такой То что надо, но как сделать не в два, а в три "этажа"? открыл-открыл-ссылка <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>hover</title> <style type="text/css"> UL { width: 180px; /* Ширина меню / list-style: none; / Для списка убираем маркеры / margin: 0; / Нет отступов вокруг / padding: 0; / Убираем поля вокруг текста / font-family: Arial, sans-serif; / Рубленый шрифт для текста меню / font-size: 10pt; / Размер названий в пункте меню / } UL LI { position: relative; / Подпункты позиционируются относительно / } LI UL { position: absolute; / Подменю позиционируются абсолютно / display: none; / Скрываем подменю / top: 0; / По высоте положение подменю исходное / left: 179px; / Сдвигаем подменю вправо / z-index: 1; / Основное меню находится ниже подменю / } LI A { display: block; / Ссылка как блочный элемент / width: 100%; / Ссылка на всю ширину пункта / padding: 5px; / Поля вокруг надписи / text-decoration: none; / Подчеркивание у ссылок убираем / color: #666; / Цвет текста / border: 1px solid #ccc; / Рамка вокруг пунктов меню / background-color: #f0f0f0; / Цвет фона / border-bottom: none; / Границу снизу не проводим / } LI A:hover { color: #ffe; / Цвет текста активного пункта / background-color: #5488af; / Цвет фона активного пункта / } LI:hover UL, LI.over UL { display: block; / При выделении пункта курсором мыши отображается подменю / } .brd { border-bottom: 1px solid #ccc; / Линия снизу */ } </style> </head> <body> <ul id="menu"> <li><a href="russian.html">Русская кухня</a> <ul> <li><a href="linkr1.html">Бефстроганов</a></li> <li><a href="linkr2.html">Гусь с яблоками</a></li> <li><a href="linkr3.html">Крупеник новгородский</a></li> <li><a href="linkr4.html" class="brd">Раки по-русски</a></li> </ul> </li> <li><a href="ukrainian.html">Украинская кухня</a> <ul> <li><a href="linku1.html">Вареники</a></li> <li><a href="linku2.html">Жаркое по-харьковски</a></li> <li><a href="linku3.html">Капустняк черниговский</a></li> <li><a href="linku4.html" class="brd">Потапцы с помидорами</a></li> </ul> </li> <li><a href="caucasus.html">Кавказская кухня</a> <ul> <li><a href="linkc1.html">Суп-харчо</a></li> <li><a href="linkc2.html">Лилибдж</a></li> <li><a href="linkc3.html">Чихиртма</a></li> <li><a href="linkc4.html" class="brd">Шашлык</a></li> </ul> </li> <li><a href="asia.html" class="brd">Кухня Средней Азии</a></li> </ul> </body> </html>

10.03.2013, 11:00	#7
GAlex Новичок Пол: Регистрация: 17.02.2006 Сообщений: 20 Репутация: -1	Re: Раскрывающиеся списки Возьми пример менюшки и чуть подправь под себя

02.10.2013, 21:12	#8
N.I.K Новичок Пол: Регистрация: 19.05.2007 Сообщений: 15 Репутация: 2	Re: Раскрывающиеся списки Спасибо, а если нужно добавить анимацию при открытии меню?

22.11.2012, 14:03	#5
yosht Новичок Пол: Регистрация: 16.04.2009 Сообщений: 13 Репутация: 2	Re: Раскрывающиеся списки это просто работа с CSS3 + HTML Код HTML: <div>Dropdown <ul> <li><a href="http://URL1.com">Link 1</a></li> <li><a href="http://URL2.com">Link 2</a></li> </ul> </div> div ul { display: none; } div:hover ul { display: block; }

08.12.2012, 15:30	#6
chk Неактивный пользователь Пол: Регистрация: 08.12.2012 Сообщений: 20 Репутация: 0	Re: Раскрывающиеся списки вот неплохой туториал http://javascript.ru/ui/tree

14.10.2013, 13:17	#9
yosht Новичок Пол: Регистрация: 16.04.2009 Сообщений: 13 Репутация: 2	Re: Раскрывающиеся списки Вы можете добавить анимации с jQuery. $('#dropdown-ul').fadeIn();

08.03.2014, 16:12	#10
aminoser Неактивный пользователь Пол: Регистрация: 14.02.2014 Сообщений: 2 Репутация: 0	Re: Раскрывающиеся списки а лучше $('#dropdown-ul').slideToggle();

07.03.2015, 15:43	#11
tugo Пользователь Пол: Регистрация: 18.10.2012 Сообщений: 40 Репутация: 24	Re: Раскрывающиеся списки Эта штука называется accordion В гугле куча примеров, в частности вот А стилизировать уже можно что угодно

05.09.2016, 09:07	#12
webmit Неактивный пользователь Пол: Регистрация: 05.09.2016 Сообщений: 8 Репутация: 0	Re: Раскрывающиеся списки Нужно чтобы список в списке был <ul> <li> <a href=""> <ul> <li><a href=""></a></li> </ul> </a> </li> </ul>

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
AJAX выпадающие списки	Ruslan201	AJAX	0	05.08.2010 10:35
Выпадающие списки ComboBox	Toxa07	Delphi	3	11.05.2009 22:35
Как сделать зависимые выпадающие списки?	Vladimir979	Delphi	3	23.04.2009 12:11
дележ опытом: серые списки в Exim	Piligr1m	UNIX, Linux, MacOs для PC и другие ОС	2	19.10.2008 21:35
Как узнать кто добавил меня в приватные списки	isotope	ICQ, QIP, Miranda, R&Q и другие...	2	06.12.2007 17:54