Многоуровневое вертикальное раскрывающееся меню на РНР и со списками для статических страниц
При создании страниц часто используется многоуровневое раскрывающееся меню (раскладушки). Описание многоуровнего меню я взяла на сайте http://webdesign.site3k.net/?/conjuncture/append/d/menudrop.html. Ниже привожу усовершенствованный скрипт создания вертикального меню- "раскладушки" на РНР с использованием javascript. Тексты меню и подменю находятся в массивах (в массивы можно в цикле занести информацию из таблиц базы данных). На этой же странице приведены скрипты раскрывающегося вертикального меню со списками для статических страниц.
Рассмотрим пример раскладки для первой строчки основного меню (чтобы не загромождать скрипт). Запустите пример. В папку s своего сайта занесите два рисунка - плюса(plus.gif) и минуса (minus.gif). Эти рисунки можно создать в графическом редакторе .
В обозревателе должны появиться 3 строчки со знаком "+".
+ Компьютеры
+ Мебель
+Аксессуары
При нажатии на первую строку появится подменю:
- Компьютеры
Монитор
Клавиатура
Системный блок
+ Мебель
+Аксессуары
При нажатии на минус при слове "Компьютеры" подменю исчезнет.
Текст скрипта многоуровневого вертикального меню с использованием РНР:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Создание многоуровневого меню</title>
<script type="text/javascript">
function JS(menu, ) {
nameDiv=eval("document.getElementById(menu)");
my =eval("document.getElementById( )");
if(nameDiv.style.display=='none')
{
nameDiv.style.display='block';
my .src=' s/minus.gif';
}
else
{
nameDiv.style.display='none';
my .src=' s/plus.gif';
}
}
</SCRIPT>
<? function submenu($kj,$b,$hr) //функция построения подменю
{ for($j=1;$j<=$kj;$j++) { ?> // организация цикла
<p><A HREF="<? echo($hr[$j])?>" > <!-- вызов страниц-->
<? echo($b[$j])?></a></p> <!--вывод названий подменю-->
<? } //конец цикла
}?> <!-- конец функции-->
</head>
<body>
<?
$a[1]="Компьютеры";$a[2]="Мебель";$a[3]="Аксессуары";
$b[1]="Мониторы";$b[2]="Клавиатура";$b[3]="Системный блок"; //подменю для 1-го пункта основного меню
for($i=1;$i<=3;$i++)
{$men[$i]='menu'.(string)$i;$imag[$i]=' '.(string)$i;} // создание menu для функции (javascript:JS)
$hr[1]='str1.php';$hr[2]='str2.php';$hr[3]='str3.php'; // скрипты страниц на рнр
for($i=1;$i<=3;$i++) { // организация цикла для основного меню
?>
<p><A HREF="javascript:JS('<? echo($men[$i])?>','<? echo($imag[$i])?>');" > <!-- функция по включению и выключению блоков-->
<img id=<? echo($imag[$i])?> src="/ s/plus.gif" alt="Раскрыть" width="9" height="9"><!-- указать путь для знака + -->
<? echo($a[$i])?></a></p> <!-- вывод основного меню -->
<span id=" <? echo($men[$i])?>" > <!-- меняется знак + на - при выборе в основном меню -->
<? if ($i==1){ // для первого пункта основного меню
?> <div id="<? echo($men[$i])?>" style="display: none;"> <!-- не видно подменю соответствующего пункта -->
<? $j=3;submenu($j,$b,$hr);?> <!--построение подменю -->
</div> <!-- в блоке div обязательно -->
<?
} // конец для i=1
} //конец по i
</body></html> |
Если у Вас статическая страница, и Вы хотите создать раскрывающеяся меню со списком, то можно использовать скрипт , взятый мною с сайта Ивана Чередниченко и немного подкорректированный . На этом сайте приводятся и более сложные варианты. Можно скачать тексты примеров.
<HTML>
<head>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function doMenu(AIndex) {
if ( AIndex == 1 ) {
if ( chapter1.style.display == 'none' ) {
chapter1.style.display = 'block';
}
else {
chapter1.style.display = 'none';
}
}
if ( AIndex == 2 ) {
if ( chapter2.style.display == 'none' ) {
chapter2.style.display = 'block';
}
else {
chapter2.style.display = 'none';
}
}
}
</SCRIPT>
</head>
<BODY>
<UL>
<LI><A HREF="javascript:doMenu(1);" >Глава 1</A>
<div ID="chapter1"style="display: none;">
<UL>
<LI>Раздел 1.1</LI>
<LI>Раздел 1.2</LI>
<LI>Раздел 1.3</LI>
</UL>
</div>
</LI>
<LI><A HREF="javascript:doMenu(2);">Глава 2</A>
<div ID="chapter2" style="display: none;" >
<UL
<LI>Раздел 2.1</LI>
<LI>Раздел 2.2</LI>
</UL>
</div>
</LI>
</UL>
</BODY> |
В варианте Чередниченко меню выходит раскрытое, я добавила операторы для "сложения" меню. Если Вы используете этот пример на своем сайте, и у Вас возникли проблемы с раскрытием в обозревателе Mozila Firefox, то попробуйте мой вариант:
<HTML>
<head>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function doMenu(menu) {
nameDiv=eval("document.getElementById(menu)");
if (nameDiv.style.display == 'none' ) // если строка меню "сложена"( подменю не видно),
{
nameDiv.style.display = 'block'; // то она раскроется
}
else
{
nameDiv.style.display = 'none';
}
}
</SCRIPT>
</head>
<BODY>
<UL>
<LI><A HREF="javascript:doMenu('menu1');" >Глава 1</A>
<UL ID="menu1" style="display: none;" > // указание, чтобы подменю не было видно
<LI><A HREF="namesite1.html">Раздел 1.1 </A></LI>
<LI><A HREF="namesite2.html">Раздел 1.2 </A></LI>
<LI><A HREF="namesite3.html">Раздел 1.3 </A></LI>
</UL>
</LI>
<LI><A HREF="javascript:doMenu('menu2');">Глава 2</A>
<UL ID="menu2" style="display: none;" >
<LI><A HREF="namesite4.html">Раздел 2.1</A></LI>
<LI><A HREF="namesite5.html">Раздел 2.2</A></LI>
</UL>
</LI>
</UL>
</BODY> |
Этот вариант хорошо работает после вставки в настоящую страницу. При использовании уберите комментарии.