Jump to content
  • 0

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

_L_e_x_y_

Asked by _L_e_x_y_,

 Share

Question

_L_e_x_y_ Explorer

_L_e_x_y_

Posted
Posted

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

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

Раздел 1

Подраздел 1.1

Подраздел 1.2

....

Раздел 2

Подраздел 2.1

....

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

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

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

Link to comment
Share on other sites

31 answers to this question

Recommended Posts

  • 0
psywalker Explorer

psywalker

Posted
Posted
  _L_e_x_y_ said:
Здравствуйте!

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

Раздел 1

Подраздел 1.1

Подраздел 1.2

....

Раздел 2

Подраздел 2.1

....

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

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

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

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

Link to comment
Share on other sites
  • 0
_L_e_x_y_ Explorer

_L_e_x_y_

Posted
  • Author
Posted (edited)

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

Код

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

<html>

<head>

<h1 align="center">

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

<script LANGUAGE="JavaScript">

<!--

function show_d(d)

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

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

{d.style.visibility='hidden'}

}

//-->

</SCRIPT>

</head>

</h1>

<body style="margin-left:140px">

<div style="margin-left:40px">

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

<div style="margin-left:40px;visibility:hidden" id="div1">

<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>

<div style="margin-left:40px;visibility:hidden " id="div2">

<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 style="margin-left:40px;visibility:hidden " id="div3">

.....

</div>

</div>

</body>

</html>

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

Edited by _L_e_x_y_
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

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

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

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

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

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

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

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

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

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

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

Link to comment
Share on other sites
  • 0
Clayton Explorer

Clayton

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

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

psywalker

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

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

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

Edited by Clayton
Link to comment
Share on other sites
  • 0
yufka Explorer

yufka

Posted
Posted (edited)

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

<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 by Dimitry Wolotko
Link to comment
Share on other sites
  • 0
yufka Explorer

yufka

Posted
Posted

Ещё 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>

Link to comment
Share on other sites
  • 0
Clayton Explorer

Clayton

Posted
Posted
  yufka said:
Ещё 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>

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

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

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

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

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

И вот почему:

  Quote
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.

Link to comment
Share on other sites
  • 0
Antoxa Explorer

Antoxa

Posted
Posted

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

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

Link to comment
Share on other sites
  • 0
hAhol Explorer

hAhol

Posted
Posted

[offtopic]

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

[/offtopic]

Link to comment
Share on other sites
  • 0
hf3 Explorer

hf3

Posted
Posted

тоже самое.

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept