Помоги организовать выпадающее меню

_L_e_x_y_ · December 12, 2009

Здравствуйте!

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

Раздел 1

Подраздел 1.1

Подраздел 1.2

....

Раздел 2

Подраздел 2.1

....

Все подразделы необходимо скрывать, а сами разделы дожны изменять свое положение на странице в зависимости от скрытых/открытых подразделов, в этом и проблема.

Использую HTML, возможно применение Java Script.

Заранее спасибо.

psywalker · December 12, 2009

Здравствуйте!
Необходимо организовать меню электронного справочника, которое имело бы вид:
Раздел 1
Подраздел 1.1
Подраздел 1.2
....
Раздел 2
Подраздел 2.1
....
Все подразделы необходимо скрывать, а сами разделы дожны изменять свое положение на странице в зависимости от скрытых/открытых подразделов, в этом и проблема.
Использую HTML, возможно применение Java Script.
Заранее спасибо.

Рули в эту сторону http://www.evotech.net/blog/2009/05/css-co...-counter-reset/

_L_e_x_y_ · December 12, 2009

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

psywalker · December 12, 2009

А с русским как? :rolleyes:

http://www.htmlbook.ru/css/counter-reset.html

_L_e_x_y_ · December 12, 2009

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

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

ЯЗЫК ПРОГРАММИРОВАНИЯ PERL

<!--

function show_d(d)

{if (d.style.visibility=="hidden")

{d.style.visibility='visible'} else

{d.style.visibility='hidden'}

}

//-->

</SCRIPT>

</head>

</h1>

<a href="java script:void(0)" onClick="show_d(div1) ">Язык программирования PERL</a><br>

<a href="Pages/1/1.html"> 1 Язык программирования PERL </a><br>

<a href="Pages/1/1.1.html"> 1.1 PERL как язык программирования </a><br>

<a href="Pages/1/1.2.html"> 1.2 История PERL </a><br>

<a href="Pages/1/1.3.html"> 1.3 PERL - интерпретируемый язык программирования</a><br>

<a href="Pages/1/1.4.html"> 1.4 Сравнение PERL и языков программирования С/С++ </a><br>

<a href="Pages/1/1.5.html" > 1.5 Богатство возможностей языка PERL </a>

</div>

<a href="java script:void(0)" onClick="show_d(div2) ">Использование PERL</a><br>

<a href="Pages/2/2.html"> 2 Использование PERL </a><br>

<a href="Pages/2/2.1.html"> 2.1 Использование PERL как фильтра данных </a><br>

<a href="Pages/2/2.2.html"> 2.2 Использование языка PERL как шлюза безопасноти </a><br>

<a href="Pages/2/2.3.html"> 2.3 Frontend-программы для связи с базой данных </a><br>

<a href="Pages/2/2.4.html"> 2.4 Использование языка perl для написания cgicкриптов. </a>

</div>

<a href="java script:void(0)" onClick="show_d(div3) ">Использование PERL</a><br>

.....

</div>

</body>

</html>

все бы хорошо было, если бы разделы 2 и 3 поднимались и опускались, а не находились на ограмном расстоянии друг от друга.

Edited December 12, 2009 by _L_e_x_y_

psywalker · December 12, 2009

1) Код на будущее заключайте в спец.теги

2) Меню надо делать на списках и выпадающее вполне можно сделать без JS, на CSS

_L_e_x_y_ · December 12, 2009

Спасибо за помощь. Будет время - поищу. А пока организую как стандартное меню сайтов, это проще, наверное.

psywalker · December 12, 2009

Спасибо за помощь. Будет время - поищу. А пока организую как стандартное меню сайтов, это проще, наверное.

В любом случае надо делать на списках

Int · December 12, 2009

Вот прям надо? Вроде никто этого не регламентировал. Ты ещё скажи, что сексом надо только в одной позе заниматься.

psywalker · December 12, 2009

Вот прям надо? Вроде никто этого не регламентировал. Ты ещё скажи, что сексом надо только в одной позе заниматься.

А причём тут секс, девушка хочет сделать себе меню, мало того делает его не правильно, я разве что-то ей не то посоветовал?

Justnewone · December 12, 2009

Вот прям надо? Вроде никто этого не регламентировал. Ты ещё скажи, что сексом надо только в одной позе заниматься.

Не то что надо, но w3 рекомендует для меню взамен деприкейтед тега menu использовать список. Как-то так.

psywalker · December 12, 2009

Не то что надо, но w3 рекомендует для меню взамен деприкейтед тега menu использовать список. Как-то так.

А Int наверное плохо знаком с этим делом. Ну ничего страшного, всё впереди ещё я полагаю. :rolleyes:

Clayton · December 12, 2009

Вот прям надо? Вроде никто этого не регламентировал. Ты ещё скажи, что сексом надо только в одной позе заниматься.

Выпадающее меню — только на списках, не иначе. Вы конечно можете сделать без них — будет интересно посмотреть)

psywalker

Раз уж зашла такая тема интересная, сам сейчас реализовал такое меню, с подвязкой JS, для эффектов плавного открытия — задержки там и всего-такого.

Однако при подключении эффектов JQUery, наткнулся на массу трудностей, из за чего его пришлось кардинально переверстывать, все дисплей-ноны на -999em и еще кучу непонятных вещей, в которые не еще не вкурил.

Собсна сабж такой — какие варианты верстки есть кроме скрытия элементов висибилити и дисплеем, интересуем именно инфа по -999em, как так он волшебно на JS влияет?

Edited December 12, 2009 by Clayton

Int · December 13, 2009

Я у неё не нашёл тэга menu o_O Только div

А ещё <h1> в <head>

Edited December 13, 2009 by Int

yufka · December 13, 2009

А такое меню сойдет?

<html>
	<head>
		<title>Меню</title>
		<script language="JavaScript">
function clickHandler() 
{ var targetId, srcElement, 
targetElement; srcElement = window.event.srcElement; 
if (srcElement.className == "Outline") { 
targetId = srcElement.id + "details"; 
targetElement = document.all(targetId); 
if (targetElement.style.display == "none") { 
targetElement.style.display = ""; 
} else { 
targetElement.style.display = "none"; 
} }} document.onclick = clickHandler;
</script>
	</head>
	<body bgcolor=black text=white leftmargin=30% vlink=red link=blue>
<BR>
<a id="Out0" class="Outline" style="cursor: hand; color: white; font-weight: bold; font-size: 15pt">
Раздел 1</a>
<div id=Out0details style="display:None; position:relative; left:9;">
<a href="" target="_self" style="font-family: Courier; font-size: 13pt; text-decoration: none">
Подраздел 1.1</a><br>
<a href="" target="_self" style="font-family: Courier; font-size: 13pt; text-decoration: none">
Подраздел 1.2</a><br>
<a href="" target="_self" style="font-size: 13pt; font-family: Courier; text-decoration: none">
Подраздел 1.3</a><br>
</div>
<BR>
<a id="Out1" class="Outline" style="cursor: hand; color: white; font-weight: bold; font-size: 15pt">
Раздел 2</a>
<div id=Out1details style="display:None; position:relative; left:9;">
<a href="" target="_self" style="font-family: Courier; font-size: 13pt; text-decoration: none">
Подраздел 2.1</a><br>
<a href="" target="_self" style="font-family: Courier; font-size: 13pt; text-decoration: none">
Подраздел 2.2</a><br>
<a href="" target="_self" style="font-size: 13pt; font-family: Courier; text-decoration: none">
Подраздел 2.3</a><br>
</div><BR>
<a id="Out3" class="Outline" style="cursor: hand; color: white; font-weight: bold; font-size: 15pt">
Раздел 3</a>
<div id=Out3details style="display:None; position:relative; left:9;">
<a href="" target="_self" style="font-family: Courier; font-size: 13pt; text-decoration: none">
Подраздел 3.1</a><br>
<a href="" target="_self" style="font-family: Courier; font-size: 13pt; text-decoration: none">
Подраздел 3.2</a><br>
<a href="" target="_self" style="font-size: 13pt; font-family: Courier; text-decoration: none">
Подраздел 3.3</a><br>
</div><BR>
	</body>
</html>

Или совершенно другого формата нужно?

Edited December 18, 2009 by Dimitry Wolotko

psywalker · December 13, 2009

yufka

Код вставляем в спец.теги на будущее!

yufka · December 13, 2009

Ещё 1 пример выпадающего меню...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Меню</title>
		<script language="JavaScript">
function clickHandler() 
{ var targetId, srcElement, 
targetElement; srcElement = window.event.srcElement; 
if (srcElement.className == "Outline") { 
targetId = srcElement.id + "details"; 
targetElement = document.all(targetId); 
if (targetElement.style.display == "none") { 
targetElement.style.display = ""; 
} else { 
targetElement.style.display = "none"; 
} }} document.onclick = clickHandler;
</script>
	</head>
	<body bgcolor=black text=white leftmargin=30% vlink=red link=blue>
<BR>
<table border=0 width=40% height=5>
	<tr>
	<td>
	<a id="Out0" class="Outline" style="cursor: hand; color: white; font-weight: bold; font-size: 15pt">
Раздел 1</a>
<div id=Out0details style="display:None; position:relative; left:9;">
<a id="Out1" class="Outline" style="cursor: hand; color: blue; font-size: 14pt; text-decoration: none;">
Подраздел 1.1</a>
<div id=Out1details style="display:None; position:relative; left:9;">
<a href="" target="_self" style="font-family: Courier; font-size: 13pt; text-decoration: none">
Подраздел 1.1.1</a><br>
<a id="Out2" class="Outline" style="cursor: hand; color: blue; font-size: 14pt; text-decoration: none;">
Подраздел 1.2</a>
<div id=Out2details style="display:None; position:relative; left:9;">
<a href="" target="_self" style="font-family: Courier; font-size: 13pt; text-decoration: none">
Подраздел 1.2.1</a></div></td></tr>
</table>
<table border=0 width=40% height=5>
<tr>
<td>
	<a id="Out3" class="Outline" style="cursor: hand; color: white; font-weight: bold; font-size: 15pt">
Раздел 2</a>
<div id=Out3details style="display:None; position:relative; left:9;">
<a id="Out4" class="Outline" style="cursor: hand; color: blue; font-size: 14pt; text-decoration: none;">
Подраздел 2.1</a>
<div id=Out4details style="display:None; position:relative; left:9;">
<a href="" target="_self" style="font-family: Courier; font-size: 13pt; text-decoration: none">
Подраздел 2.1.1</a><br>
<a id="Out5" class="Outline" style="cursor: hand; color: blue; font-size: 14pt; text-decoration: none;">
Подраздел 2.2</a>
<div id=Out5details style="display:None; position:relative; left:9;">
<a href="" target="_self" style="font-family: Courier; font-size: 13pt; text-decoration: none">
Подраздел 2.2.1</a></div></td>
</tr>
</table>
<table border=0 width=40% height=5>
<tr>
<td>
	<a id="Out6" class="Outline" style="cursor: hand; color: white; font-weight: bold; font-size: 15pt">
Раздел 3</a>
<div id=Out6details style="display:None; position:relative; left:9;">
<a id="Out7" class="Outline" style="cursor: hand; color: blue; font-size: 14pt; text-decoration: none;">
Подраздел 3.1</a>
<div id=Out7details style="display:None; position:relative; left:9;">
<a href="" target="_self" style="font-family: Courier; font-size: 13pt; text-decoration: none">
Подраздел 3.1.1</a><br>
<a id="Out8" class="Outline" style="cursor: hand; color: blue; font-size: 14pt; text-decoration: none;">
Подраздел 3.2</a>
<div id=Out8details style="display:None; position:relative; left:9;">
<a href="" target="_self" style="font-family: Courier; font-size: 13pt; text-decoration: none">
Подраздел 3.2.1</a></div></td>
	</tr>
</table>
</body>
</html>

Clayton · December 13, 2009

Ещё 1 пример выпадающего меню...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Меню</title>
		<script language="JavaScript">
function clickHandler() 
{ var targetId, srcElement, 
targetElement; srcElement = window.event.srcElement; 
if (srcElement.className == "Outline") { 
targetId = srcElement.id + "details"; 
targetElement = document.all(targetId); 
if (targetElement.style.display == "none") { 
targetElement.style.display = ""; 
} else { 
targetElement.style.display = "none"; 
} }} document.onclick = clickHandler;
</script>
	</head>
	<body bgcolor=black text=white leftmargin=30% vlink=red link=blue>
<BR>
<table border=0 width=40% height=5>
	<tr>
	<td>
	<a id="Out0" class="Outline" style="cursor: hand; color: white; font-weight: bold; font-size: 15pt">
Раздел 1</a>
<div id=Out0details style="display:None; position:relative; left:9;">
<a id="Out1" class="Outline" style="cursor: hand; color: blue; font-size: 14pt; text-decoration: none;">
Подраздел 1.1</a>
<div id=Out1details style="display:None; position:relative; left:9;">
<a href="" target="_self" style="font-family: Courier; font-size: 13pt; text-decoration: none">
Подраздел 1.1.1</a><br>
<a id="Out2" class="Outline" style="cursor: hand; color: blue; font-size: 14pt; text-decoration: none;">
Подраздел 1.2</a>
<div id=Out2details style="display:None; position:relative; left:9;">
<a href="" target="_self" style="font-family: Courier; font-size: 13pt; text-decoration: none">
Подраздел 1.2.1</a></div></td></tr>
</table>
<table border=0 width=40% height=5>
<tr>
<td>
	<a id="Out3" class="Outline" style="cursor: hand; color: white; font-weight: bold; font-size: 15pt">
Раздел 2</a>
<div id=Out3details style="display:None; position:relative; left:9;">
<a id="Out4" class="Outline" style="cursor: hand; color: blue; font-size: 14pt; text-decoration: none;">
Подраздел 2.1</a>
<div id=Out4details style="display:None; position:relative; left:9;">
<a href="" target="_self" style="font-family: Courier; font-size: 13pt; text-decoration: none">
Подраздел 2.1.1</a><br>
<a id="Out5" class="Outline" style="cursor: hand; color: blue; font-size: 14pt; text-decoration: none;">
Подраздел 2.2</a>
<div id=Out5details style="display:None; position:relative; left:9;">
<a href="" target="_self" style="font-family: Courier; font-size: 13pt; text-decoration: none">
Подраздел 2.2.1</a></div></td>
</tr>
</table>
<table border=0 width=40% height=5>
<tr>
<td>
	<a id="Out6" class="Outline" style="cursor: hand; color: white; font-weight: bold; font-size: 15pt">
Раздел 3</a>
<div id=Out6details style="display:None; position:relative; left:9;">
<a id="Out7" class="Outline" style="cursor: hand; color: blue; font-size: 14pt; text-decoration: none;">
Подраздел 3.1</a>
<div id=Out7details style="display:None; position:relative; left:9;">
<a href="" target="_self" style="font-family: Courier; font-size: 13pt; text-decoration: none">
Подраздел 3.1.1</a><br>
<a id="Out8" class="Outline" style="cursor: hand; color: blue; font-size: 14pt; text-decoration: none;">
Подраздел 3.2</a>
<div id=Out8details style="display:None; position:relative; left:9;">
<a href="" target="_self" style="font-family: Courier; font-size: 13pt; text-decoration: none">
Подраздел 3.2.1</a></div></td>
	</tr>
</table>
</body>
</html>

Порнография, самая натуральная)

yufka · December 13, 2009

Порнография, самая натуральная)

Согласен :rolleyes: Самый простой метод...

Justnewone · December 14, 2009

Я у неё не нашёл тэга menu o_O Только div

При чем тут ее код? Вопрос Ваш строился так:

Вот прям надо? Вроде никто этого не регламентировал.

И вот почему:

10.4 The DIR and MENU elements
DIR and MENU are deprecated.
See the Transitional DTD for the formal definition.
Attributes defined elsewhere
* id, class (document-wide identifiers)
* lang (language information), dir (text direction)
* title (element title)
* style (inline style information)
* onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)
The DIR element was designed to be used for creating multicolumn directory lists. The MENU element was designed to be used for single column menu lists. Both elements have the same structure as UL, just different rendering. In practice, a user agent will render a DIR or MENU list exactly as a UL list.
We strongly recommend using UL instead of these elements.

Как видите, некое подобие регламента есть, если принять во внимание, что все поделия w3 не имеют статус "спецификация", а лишь только "рекомендация".

А так никто не запрещает, можно div-ами все сбацать, ну или аще свои теги разработать и размещать namespace.

Antoxa · December 17, 2009

Здравствуйте! у меня вопрос: на некоторых форумах, когда большой текст, его помещают в блок который открывается при нажатии на ссылку(типо hide называется или еще как то), как мне добиться такого результата. не могу найти, либо в поиске не правильно задаю.

если можно то код выложите или ссылку на пример.

Antoxa · December 17, 2009

все, уже сам разобрался.

hAhol · December 17, 2009

[offtopic]

А разве обязательно изобретать велосипед? Можно же взять готовые решения и переделать под себя. В интернете масса свободнодоступных менюшек - от просто выпадающих до "аккордеонов" разной ориентации.

[/offtopic]

hf3 · December 17, 2009

А зачем вообще писать сайты… В интернете есть масса готовых готовых CMS …

А Юкоз вообще сила…

hAhol · December 17, 2009

Утрируете, уважаемый

hf3 · December 17, 2009

тоже самое.

Либо взять готовое и пилить под себя, а поскольку знаний маловато обычно для качественного пиления - то вылазят косяки…

Либо писать свое с 0 … Долго (учитывая, что нужно ещё обучиться) , зато в итоге сам полностью знаешь свой код на зубок.

Ну уж во всяком случае не рыскать по гуглу в поисках скрипта , который пишется минут за 5 - 10.

Sign In

Помоги организовать выпадающее меню

Question

Link to comment

Share on other sites

31 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information