| |
|
|
| | Я взял пример из книги "PHP 5 На примерах" в котором было рассмотрено построение двухуровневой системы меню. Я его немного изменил и получилось следующее:
<table border ="0" cellspacing="0" cellpadding="0" width = "100%"><tr valign = top align=center>
<td width = "90px" class = "menu_1">
<div class = rootmenu>
<a href = "#"<b>Страница 1</b></a></div>
</td>
<td width = "90px" class = "menu_1">
<div class = rootmenu>
<a href = "#"<b>Страница 2</b></a></div>
</td>
<td width = "90px" class = "menu_1">
<div class = rootmenu>
<a href = "#"<b>Страница 3</b></a></div>
</td>
<td width = "110px" class = "menu_1">
<div class = rootmenu>
<a href = "#" onmouseover = "showmenu('m1')"
onmouseout = "hidemenu()"><b>Страница 4</b></a></div>
<div id = "m1" class = "submenu" onmouseover = "showmenu('m1')"
onmouseout = "hidemenu()">
<a href = "#">Страница 1 подменю</a><br>
<a href = "#">Страница 2 подменю</a><br>
<a href = "#">Страница 3 подменю</a></td>
</div>
</td>
<td width = "120px"class = "menu_1">
<div class = rootmenu>
<a href = "#" onmouseover = "showmenu ('m2')"
onmouseout = "hidemenu()"><b>Страница 5</b></a></div>
<div id = "m2" class = "submenu" onmouseover = "showmenu ('m2')"
onmouseout = "hidemenu ()">
<a href = "#">Страница 4 подменю</a><br>
<a href = "#">Страница 5 подменю</a><br>
<a href = "#">Страница 6 подменю</a></td>
</div>
</td>
<td width = "80px" class = "menu_1">
<div class = rootmenu>
<a href = "#"><b>Страница 6</b></a></div>
</td>
<td width = "120px"class = "menu_1">
<div class = rootmenu>
<a href = "#" onmouseover = "showmenu ('m3')"
onmouseout = "hidemenu()"><b>Страница 7</b></a></div>
<div id = "m3" class = "submenu" onmouseover = "showmenu ('m3')"
onmouseout = "hidemenu ()">
<a href = "#">Страница 7 подменю</a><br>
<a href = "#">Страница 8 подменю</a><br>
<a href = "#">Страница 9 подменю</a></td>
</div>
</td>
<td width = "80px" class = "menu_1">
<div class = rootmenu>
<a href = "#"><b>Страница 8</b></a></div>
</td>
</tr></table>
|
Код на Java Scriptе:
<!--
var oldsubmenu;
var timeOnMenu;
function showmenu (obj)
{
if (timeOnMenu) {
clearTimeout (timeOnMenu);
}
if (oldsubmenu) hide (oldsubmenu);
show (obj);
oldsubmenu = obj;
}
function hidemenu()
{
if (oldsubmenu) timeOnMenu = setTimeout ("hide (oldsubmenu)", 500)
}
function getObject (obj)
{
var theObj
if (document.layers) {
if (typeof obj == "string") return document.layers [obj]
else return obj
}
if (document.all) {
if (typeof obj == "string")
{
if (document.all (obj) != null) return document.all (obj).style;
else return null;
}
else return obj.style
}
if (document.getElementById)
{
if (typeof obj == "string")
return document.getElementById (obj).style
else return obj.style
}
return null
}
function show (obj) {
var theObj = getObject (obj);
if (typeof theObj.visibility != "undefined")
theObj.visibility = "visible"
if (typeof theObj.display != "undefined") theObj.display = "block"
}
function hide (obj)
{
var theObj = getObject (obj)
if (typeof theObj.visibility != "undefuned")
theObj.visibility = "hidden"
if (typeof theObj.display != "undefined") theObj.display = "none"
}
//-->
|
Стиль, применяемый к меню:
a:link {text-decoration: none; color: #A4A428}
a:visited {text-decoration: none; color: #A4A428}
a:hover {text-decoration: none; color: #6F9324}
a:active {text-decoration: none; color: #A4A428}
#menu {position: absolute; top: 64px; left: 0px}
.rootmenu {border-style: solid; border-width: 0px; padding: 2px}
.submenu {display: none; padding: 0px 0px 0px 5px; background-color: #DDDD9B; border-style: solid; border-width: 1px;}
.rootmenu2 {border-style: solid; border-width: 0px; padding: 2px;}
.submenu2 {display: none; position: absolute; bottom: 75px; left: 0px; padding: 0px 10px 0px 10px; background-color: #DDDD9B;
border-style: solid; border-width: 1px;}
.menu_1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #A4A428;
font-style: normal;
font-weight: bold;
}
.menu_2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #A4A428;
background-color: #CCCC66;
text-align: center;
font-weight: bold;
}
|
Помогите мне реализовать трёхуровневую систему меню. То есть, чтобы при наведении курсора на пункт подменю для него выпадал ещё один (третий) блок дополнительных меню. | |
| |
|
|
| |
|
|
| |
для: Footer
(25.01.2008 в 14:48)
| | | Люди, хелп! Вообще можно как-то изменить этот код, чтобы получилось то, что надо? Нужен ваш опытный совет. | |
| |
|
|
| |
|
|
| |
для: Footer
(25.01.2008 в 18:34)
| | | Подозреваю, что это невозможно с таким подходом. Я тоже сейчас вот мучаюсь с многоуровневым меню. Тот подход, что ты описал предполагает только один уровень. По кроайней мере я так и не смог добавить еще один хотя бы. Я не профи, но кажись это факт. Многоуровневые меню делаются на дивах, с использованием нескольких сотен строк кода. | |
| |
|
|
| |
|
|
| |
для: AmBuddy
(25.01.2008 в 18:42)
| | | Просто я где-то видел примеры сайтов, где были использованы многоуровневые меню. Может, кто-нибудь подскажет что-то наподобие примера, где реализована подобная система меню. | |
| |
|
|
| |
|
|
| |
для: Footer
(25.01.2008 в 19:04)
| | | дарю. четыре уровня. больше нет смысла делать - задолбаешься кликать... | |
| |
|
|
| |
|
|
| |
для: elenaki
(25.01.2008 в 19:09)
| | | Не очень понял что там и как. Я не очень разбираюсь в JavaScriptе. Получается, мне нужно три уровня. Как тогда сделать для трёх уровней? | |
| |
|
|
| |
|
|
| |
для: Footer
(25.01.2008 в 19:20)
| | | Содержимое этой таблицы поместите между <HEAD> и </HEAD>
<style>
<!--
#foldheader{cursor:hand ; font-weight:bold ;
list-style-image:url(fold.gif)}
#foldinglist{list-style-image:url(list.gif)}
//-->
</style>
<script language="JavaScript1.2">
<!--
/**
* Based on Folding Menu Tree
* Dynamic Drive (www.dynamicdrive.com)
* For full source code, installation instructions,
* 100's more DHTML scripts, and Terms Of
* Use, visit dynamicdrive.com
*
* Updated to support arbitrarily nested lists
* by Mark Quinn (mark@robocast.com) November 2nd 1998
*/
var head="display:''"
img1=new Image()
img1.src="fold.gif"
img2=new Image()
img2.src="open.gif"
function change(){
if(!document.all)
return
if (event.srcElement.id=="foldheader") {
var srcIndex = event.srcElement.sourceIndex
var nested = document.all[srcIndex+1]
if (nested.style.display=="none") {
nested.style.display=''
event.srcElement.style.listStyleImage="url(open.gif)"
}
else {
nested.style.display="none"
event.srcElement.style.listStyleImage="url(fold.gif)"
}
}
}
document.onclick=change
//-->
</script>
|
Содержимое этой таблицы поместите между <BODY> и </BODY>
<ul>
<li id="foldheader">Новости</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.cnn.com">CNN</a></li>
<li><a href= "http://www.abcnews.com">ABC News</a></li>
<li><a href= "http://www.vancouversun.com">Vancouver Sun</a></li>
</ul>
<li id="foldheader">Игры</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href= "http://www.gamespot.com">GameSpot</a></li>
<li><a href= "http://www.happypuppy.com">Happy Puppy</a></li>
<li><a href= "http://www.gamecenter.com">Game Center</a></li>
</ul>
<li id="foldheader">Софт</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href="http://www.download.com">outer 1</a></li>
<li><a href="http://www.hotfiles.com">outer 2</a></li>
<li id="foldheader">JavaScript & DHTML</li>
<ul id="foldinglist" style="display:none" style=&{head};>
<li><a href= "http://www.dynamicdrive.com">Dynamicdrive </a> </li>
<li><a href="http://javashelp.cjb.net">JS Help</a></li>
</ul>
<li><a href="http://www.windows95.com">outer 3</a></li>
<li><a href="http://www.shareware.com">outer 4</a></li>
</ul>
</ul>
<script language="JavaScript1.2">
<!--
/**
* Get cookie routine by Shelley Powers
* (shelley.powers@ne-dev.com)
*/
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
// if cookie exists
if (offset != -1) {
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1) end = document.cookie.length;
returnvalue= unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
if (get_cookie(window.location.pathname) != ''){
var openresults= get_cookie(window.location.pathname).split(" ")
for (i=0 ; i < openresults.length ; i++){
foldinglist[openresults[i]].style.display=''
document.all[foldinglist[openresults[i]].sourceIndex -
1].style.listStyleImage="url(open.gif)"
}
}
if (document.all){
var nodelength=foldinglist.length-1
var nodes=new Array(nodelength)
var openones=''
}
function check(){
for (i=0 ; i <= nodelength ; i++){
if (foldinglist[i].style.display=='')
openones=openones + " " + i
}
document.cookie=window.location.pathname+"= "+openones
}
if (document.all)
document.body.onunload=check
//-->
</script>
|
-------------------------------------------------------------------------------- | |
| |
|
|
| |
|
|
| |
для: elenaki
(25.01.2008 в 19:35)
| | | Спасибо, всё работает. Но ещё такой вопрос: там чтобы открылось подменю, нужно щёлкнуть на пункт меню, а можно как-то сделать, чтобы просто при наведении на пункт меню выпадало подменю, то есть без щёлчка? | |
| |
|
|
| |
|
|
| |
для: elenaki
(25.01.2008 в 19:35)
| | | . | |
| |
|
|
| |
|
|
| |
для: Footer
(26.01.2008 в 07:24)
| | | document.onclick=change
наверно, надо сделать тут onmouseover...
не думаю, что будет хорошо. будет сильно дергаться. навести мыша можно случайно, в то время как щелканье обычно прицельно производится. | |
| |
|
|
| |
|
|
| |
для: elenaki
(26.01.2008 в 18:28)
| | | Я сейчас зашёл на http://www.milonic.com/ Там сразу на этой странице есть горизонтальное меню трёхуровневое. Мне вот такое нужно. Но не получается понять как оно построено. Помогите, плиз, кодом JavaScripta, который там работает. | |
| |
|
|
| |
|
|
| |
для: Footer
(28.01.2008 в 14:24)
| | | Так всё таки, как вытащить из этого сайта меню? Хелп! | |
| |
|
|
| |
|
|
| |
для: Footer
(29.01.2008 в 12:52)
| | | пойти по ссылке download и скачать | |
| |
|
|
| |
|
|
| |
для: elenaki
(29.01.2008 в 13:38)
| | | Скачал меню. Настроил. Но вылезает текст при наведении на пункты меню о том, что нужно разеригстрировать этот продукт. Ребят, а как его убрать самому, чтобы не платить за программу? Прилагаю два файла, которые должны быть на сайте. Помогите, пожалуйста, убрать их рекламу. | |
| |
|
|
| |
|
|
| |
для: Footer
(28.01.2008 в 14:24)
| | | Короче есть вот заготовка, только не совсем отлаженая, и демо вариант. С этим принципом меню любой вложенности делать можно.
table.child {background: #FFFFFF; position: absolute; text-align: center; visibility: hidden}
table.parent { position: absolute; text-align: center}
td {background: #c0c0c0; font-size: small;}
/* End of style section. Generated by AceHTML at 29.05.2007 10:35:11 */
-->
</style>
</head>
<body style="font-size: xx-large">
<div style="position: absolute; left: 200px">
<script>
var menu=Array("О нас","Новейшие достижения","Ссылки","Реклама","Мои фотки")
var menu1=new Array();
menu1[0]=Array("Кто мы","Как нас зовут","Сколько нам лет");
menu1[1]=Array("Спортивные достижения","Производственные достижения","Научные достижения");
menu1[2]=Array("Левые ссылки","Хорошие ссылки");
menu1[3]=Array("Наша реклама","Чужая реклама","Реклама с дружественных ресурсов");
var h=30; //Высота строки
var wg=200; // Ширина главного меню
var wl=300; //Ширина локального меню
var bc="#000000"; //Цвет границы рамки
var b=0; //Толщина рамки
var cc=2; //Толщина границы между ячейками
var cd=2; //Толщина границы между рамкой и текстом
var d=document;
function in1(id)
{var elem=document.getElementById(id);
elem.style.visibility='visible';
}
function out1(id)
{var elem=document.getElementById(id);
elem.style.visibility='hidden';
}
function in2(th)
{th.style.backgroundColor="#d3d3d3";
th.style.cursor="hand";
}
function out2(th)
{th.style.backgroundColor="#c0c0c0";
}
function h1(i)
{if(menu1[i])return(h*menu1[i].length)
else return(h);
}
//Глобальное меню
d.write("<table class='parent' width='"+wg+"' height='"+(h*menu.length)+"'border='"+b+"' bordercolor='"+bc+"' cellspacing='"+cc+"' cellpadding='"+cd+"' style='position: absolute'>");
for(i=0;i<menu.length;i++)
{d.write(" <tr>");
d.write(" <td onmouseover=in1('child"+i+"',this),in2(this) onmouseout=out1('child"+i+"',this),out2(this)>"+menu[i]+"</td>");
d.write(" </tr>");
}
d.write("</table>");
//Локальные меню
for(i=0;i<=menu.length;i++)
{d.write(" <table class='child' ID='child"+i+"' onmouseover=in1('child"+i+"') onmouseout=out1('child"+i+"') width='"+wl+"' height='"+h1(i)+"' border='"+b+"' bordercolor='"+bc+"' cellpadding='"+cd+"' cellspacing='"+cc+"' style='visibility: hidden; left:"+(wg-3)+"; top:"+(h*i)+";'");
for(a=0;a<menu1[i].length;a++)
{ d.write("<tr>");
d.write(" <td onmouseover=in2(this) onmouseout=out2(this)>"+menu1[i][a]+"</td>");
d.write(" </tr>");
}
d.write("</table>");
}
</script>
</div>
|
| |
| |
|
|
