Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. Социальная инженерия и социальные хакеры. Авторы: Кузнецов М.В., Симдянов И.В. PHP. Практика создания Web-сайтов (второе издание). Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель MySQL 5. Авторы: Кузнецов М.В., Симдянов И.В. Объектно-ориентированное программирование на PHP. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум (новые сообщения вниз) Структурный форум

тема: Помогите реализовать трёхуровневое выпадающее меню.

Сообщения:  [1-10]   [11-15] 

 
 автор: вялый   (29.01.2008 в 21:03)   письмо автору
 
   для: 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>

   
 
 автор: Footer   (29.01.2008 в 15:59)   письмо автору
 
   для: elenaki   (29.01.2008 в 13:38)
 

Скачал меню. Настроил. Но вылезает текст при наведении на пункты меню о том, что нужно разеригстрировать этот продукт. Ребят, а как его убрать самому, чтобы не платить за программу? Прилагаю два файла, которые должны быть на сайте. Помогите, пожалуйста, убрать их рекламу.

   
 
 автор: elenaki   (29.01.2008 в 13:38)   письмо автору
 
   для: Footer   (29.01.2008 в 12:52)
 

пойти по ссылке download и скачать

   
 
 автор: Footer   (29.01.2008 в 12:52)   письмо автору
 
   для: Footer   (28.01.2008 в 14:24)
 

Так всё таки, как вытащить из этого сайта меню? Хелп!

   
 
 автор: Footer   (28.01.2008 в 14:24)   письмо автору
 
   для: elenaki   (26.01.2008 в 18:28)
 

Я сейчас зашёл на http://www.milonic.com/ Там сразу на этой странице есть горизонтальное меню трёхуровневое. Мне вот такое нужно. Но не получается понять как оно построено. Помогите, плиз, кодом JavaScripta, который там работает.

   
 
 автор: elenaki   (26.01.2008 в 18:28)   письмо автору
 
   для: Footer   (26.01.2008 в 07:24)
 

document.onclick=change


наверно, надо сделать тут onmouseover...

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

   
 
 автор: Footer   (26.01.2008 в 07:24)   письмо автору
 
   для: elenaki   (25.01.2008 в 19:35)
 

.

   
 
 автор: Footer   (26.01.2008 в 07:22)   письмо автору
 
   для: elenaki   (25.01.2008 в 19:35)
 

Спасибо, всё работает. Но ещё такой вопрос: там чтобы открылось подменю, нужно щёлкнуть на пункт меню, а можно как-то сделать, чтобы просто при наведении на пункт меню выпадало подменю, то есть без щёлчка?

   
 
 автор: elenaki   (25.01.2008 в 19:35)   письмо автору
 
   для: 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 &amp; 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> 
 


--------------------------------------------------------------------------------

   
 
 автор: Footer   (25.01.2008 в 19:20)   письмо автору
 
   для: elenaki   (25.01.2008 в 19:09)
 

Не очень понял что там и как. Я не очень разбираюсь в JavaScriptе. Получается, мне нужно три уровня. Как тогда сделать для трёх уровней?

   

Сообщения:  [1-10]   [11-15] 

Форум разработан IT-студией SoftTime
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования