Как можно реализовать раскрывающееся меню (CSS+HTML)

MDM · September 22, 2008

Например, я хочу написать о ручке.

Ручка состоит из...

Стержень, корпус, колпачок, и т. д., и т. п.

Чтобы пользователь видел только "Ручка состоит из...", а описание появлялось при нажатии на этот заголовок.

Реализация посредством CSS и HTML, без каких-либо там JavaScripts, DHTML и т. д.

ZoNT · September 22, 2008

Например, я хочу написать о ручке.
Ручка состоит из...
Стержень, корпус, колпачок, и т. д., и т. п.
Чтобы пользователь видел только "Ручка состоит из...", а описание появлялось при нажатии на этот заголовок.
Реализация посредством CSS и HTML, без каких-либо там JavaScripts, DHTML и т. д.

"При нажатии" - значит надо обрабатывать событие "нажатие", значит нужен javascript. Только css и html не получится.

MDM · September 22, 2008

"При нажатии" - значит надо обрабатывать событие "нажатие", значит нужен javascript. Только css и html не получится.

На сколько я помню в CSS есть возможность скрывать блок (hiden)...

Тогда, подскажите хороший пример... не смог найти интернете...

homm · September 22, 2008

На сколько я помню в CSS есть возможность скрывать блок (hiden)...

Правильно понимаешь, display: none. Но реагировать на событие «нажатие» возможности нет.

Dimitry Wolotko · September 22, 2008

Можно на наведение.

MDM · September 23, 2008

Можно на наведение.

Помогите реализовать.

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

Vlad · September 23, 2008

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

<!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>Untitled Document</title>
<style type="text/css">
#menu {
padding-left: 20px;
}

#menu A {
padding: 2px 10px 1px;
border: 1px solid black;
margin-right: 5px;
background: #f0f0f0;
text-decoration: none;

}

#submenu {
background: #fc0;
border-top: 1px solid black;
padding: 5px;
height: 30px;
}

.submenutext {
display: none; /* Прячем подменю */
1height: 30px;
}

#submenu A {
color: #333; /* Цвет ссылок в подменю */
}

#menu .tabactive {

background: #fc0; /* Цвет фона активной вкладки */
border-bottom: 1px solid #fc0; /* Линия под вкладками */
color: maroon; /* Цвет текста в активной вкладке */
}

</style>

<script type="text/javascript">

var prevmenu, prevtab

function subMenu(obj, menu) {

if (document.getElementById) {
if (prevmenu) document.getElementById(prevmenu).style.display = "none"
document.getElementById(menu).style.display = "block"
if (prevtab) { prevtab.className = "" }
obj.className = "tabactive"
prevmenu = menu
prevtab = obj
}
}

</script>
</head>
<body>
<div id=menu>
<a href=russian.html onMouseOver="subMenu(this,'sm1')">Русская кухня</a>
<a href=ukrainian.html onMouseOver="subMenu(this,'sm2')">Украинская кухня</a>
<a href=caucasus.html onMouseOver="subMenu(this,'sm3')">Кавказская кухня</a>
<a href=asia.html onMouseOver="subMenu(this,'sm4')">Кухня Средней Азии</a>
</div>
<div id=submenu>
<div id=sm1 class=submenutext>
<a href=linkr1.html>Бефстроганов</a> |
<a href=linkr2.html>Гусь с яблоками</a> |
<a href=linkr3.html>Крупеник новгородский</a> |
<a href=linkr4.html>Раки по-русски</a>
</div>
<div id=sm2 class=submenutext>
<a href=linku1.html>Вареники</a> |
<a href=linku2.html>Жаркое по-харьковски</a> |
<a href=linku3.html>Капустняк черниговский</a> |
<a href=linku4.html>Потапцы с помидорами</a>
</div>
<div id=sm3 class=submenutext>
<a href=linkc1.html>Суп-харчо</a> |
<a href=linkc2.html>Лилибдж</a> |
<a href=linkc3.html>Чихиртма</a> |
<a href=linkc4.html>Шашлык</a>
</div>
<div id=sm4 class=submenutext> </div>
</div>
...
</body>
</html>

Ogalig · September 24, 2008

В ксс есть такое. :active Только это событие срабатывает для тега <a> .

sum41 · September 24, 2008

вот тут есть код прикольного меню http://www.htmlbook.ru/css/hover.html

Sign In

Как можно реализовать раскрывающееся меню (CSS+HTML)

Question

MDM

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

ZoNT

Link to comment

Share on other sites

MDM

Link to comment

Share on other sites

homm

Link to comment

Share on other sites

Dimitry Wolotko

Link to comment

Share on other sites

MDM

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Ogalig

Link to comment

Share on other sites

sum41

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information