ТвойWeb :: Версия для печати :: Помогите модернизировать скрипт меню

1. KreZ - 16 Июня, 2006 - 02:06:05 - перейти к сообщению

Я нашарил в интернете скрипт вертикального выпадающего меню и сейчас оно стоит у меня ( http://evanescence-ua.com ). Но я хочу сменить дизайн и поставить на свой сайт горизонтальное выпадающее меню (что бы главные ссылки были в строку, а не в столбик). Я поискал по интернету, но так и не смог найти нормального меню, которое бы работало в Opera, IE и Mozilla так же хорошо и стабильно как то, что стоит сейчас. Может кто-нибудь знает как можно переделать существующее меню из вертикального в горизонтальное или у кого-то есть хорошая менюшка?

То есть кратко вопрос можно сформулировать так: кто-нибудь знает как поставить "Ссылку1" и "Ссылку2" в ряд и что-бы остальные ссылки выпадали под них?

Вот коды файлов меню
Файл menu.js

CODE:

// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

Файл menu.html

CODE:

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script type="text/javascript" src="menu.js"></script>
<style type="text/css">
/* Начинается меню*/
ul {
margin: 0;
padding: 0;
list-style: none;
width: 170px; /* Width of Menu Items */
border-bottom: 1px solid #030165;
}

ul li {
position: relative;
text-align : left;
}

li ul {
position: absolute;
left: 169px;
/* Set 1px less than menu width */
top: 2;
display: none;
text-align : left;
}

ul li a {
display: block;
text-decoration: none;
color: #333333;
background: #CCCCCC; /* IE6 Bug */
padding: 4px;
border: 1px solid #000000;
border-bottom: 0;
}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

ul li a:hover {
color: #FFFFFF;
background: #CCCCCC;
POSITION: relative;
TOP: 0px;
LEFT: 0px;
} /* Hover Styles */

li ul li a menu { padding: 2px 5px; } /* Sub Menu Styles */

li:hover ul, li.over ul { display: block; } /* The magic */
/* Заканчивается меню*/
</style>
</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<ul id="nav">
<li><a href="#" >Ссылка1</a>
<ul>
<li><a href="#" >Ссылка11</a></li>
<li><a href="#" >Ссылка12</a></li>
<li><a href="#" >Ссылка12</a></li>
</ul>
</li>
<li><a href="#" >Ссылка2</a>
<ul>
<li><a href="#" >Ссылка21</a></li>
<li><a href="#" >Ссылка22</a></li>
<li><a href="#" >Ссылка23</a></li>
</ul>
</li>
</ul>

</body>
</html>

2. kr12 - 16 Июня, 2006 - 20:26:20 - перейти к сообщению

CODE:

<head>
<script>
startList=function(){
if(document.all&&document.getElementById){
navRoot = document.getElementById("nav");
for(var i=0;i<navRoot.childNodes.length;i++){
node = navRoot.childNodes[i].childNodes[0];
if(node.nodeName=="LI") {
node.onmouseover=function(){this.className+=" over"}
node.onmouseout=function(){this.className=this.className.replace(" over", "")}
}
}
}
}
window.onload=startList;
</script>
<style>
ul{
margin: 0;padding: 0;list-style: none;
width: 170px; /* Width of Menu Items */
border-bottom: 1px solid #030165;
}
ul li{position: relative;text-align : left;}
li ul{
position: absolute;
left: 0px;
top: 28px;
/* Set 1px less than menu width */
display: none;text-align : left;
}
ul li a{
display: block;text-decoration: none;
color: #333333;
background: #CCCCCC; /* IE6 Bug */
padding: 4px;
border: 1px solid #000000;border-bottom: 0;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul li a:hover {
color: #FFFFFF;
background: #CCCCCC;
POSITION: relative;
TOP: 0px;
LEFT: 0px;
} /* Hover Styles */
li ul li a menu { padding: 2px 5px; } /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; } /* The magic */
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<ul>
<table><tr id="nav"><td>
<li><a href="#" >Ссылка1</a>
<ul>
<li><a href="#" >Ссылка11</a></li>
<li><a href="#" >Ссылка12</a></li>
<li><a href="#" >Ссылка12</a></li>
</ul>
</li>
</td><td>
<li><a href="#" >Ссылка2</a>
<ul>
<li><a href="#" >Ссылка21</a></li>
<li><a href="#" >Ссылка22</a></li>
<li><a href="#" >Ссылка23</a></li>
</ul>
</li>
</td></tr></table>
</ul>
</body>
</html>

3. kr12 - 16 Июня, 2006 - 20:30:58 - перейти к сообщению

Вiсьма цiкавий баг однака Улыбка

Я даж исправлять не стану.

4. KreZ - 17 Июня, 2006 - 02:09:27 - перейти к сообщению

Спасибо. Буду работать в этом направлении. Как доведу до ума, напишу.

5. KreZ - 18 Июня, 2006 - 10:16:51 - перейти к сообщению

Немного посидев над скриптом я (с некоторой помощью) довел его до ума.
Вобщем, выкладываю полный список всего, что надо для работы в Opera, IE6 и Mozilla.
Юзайте наздоровье.

Файл menu.html

CODE:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
<script language=Javascript type=text/javascript src="menu.js"></script>
</head>

<body>
<table width=600 border=0 cellspacing=0 cellpadding=0 align=center>
<tr valign="top" class=menu>
<td id="nav0" class=menu><div><a href="#">Ссылка1</a>
<ul class=menu>
<li class=menu><a href="#">Ссылка11</a></li>
<li class=menu><a href="#">Ссылка12</a></li>
</ul>
</div> </td>

<td id="nav1" class=menu><div><a href="#" title="Новости">Ссылка2</a>
<ul class=menu>
<li class=menu><a href="#">Ссылка21</a></li>
<li class=menu><a href="#">Ссылка22</a></li>
</ul>
</div> </td>

<td id="nav2" class=menu><div><a href="#">Ссылка3</a>
<ul class=menu>
<li class=menu><a href="#">Ссылка31</a></li>
<li class=menu><a href="#">Ссылка32</a></li>
<li class=menu><a href="#">Ссылка33</a></li>
</ul>
</div> </td>
</tr></table>

<script language="JavaScript1.2" type="text/javascript">

</script>

</body>
</html>

Файл menu.js

CODE:

// JavaScript Document

//startList = function() {
function startList() {
if (document.all&&document.getElementById) {
for(j=0; j<6; j++)
{
navRoot = document.getElementById("nav"+j);
if(navRoot)
{
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if ((node.nodeName=="LI")||(node.nodeName=="DIV")) {
node.onmouseover=function() {
this.className+=" over";
}

node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}

}
}
}// for
} // if
}
}
//window.onload=startList;

Файл style.css

CODE:

table{font-family:Verdana,Arial,Helvetica,sans-serif;font-size:12px;color:#000000}
ul.menu{margin:0;padding:0;list-style:none;width:100%;/* Width of Menu Items */ display:inline-block}
td.menu{margin:0;padding:0;width:10%/* Width of Menu Items */}
div{position:relative;margin:0;padding:0;display:block;font-size:11px}
td.menu div a{text-align:center}
li.menu ul.menu{position:absolute;left:0px;/* Set 1px less than menu width */ top:0px;display:none}
div ul.menu{position:absolute;top:21px;display:none}
/* Styles for Main Menu Items */
ul.menu li.menu a{display:block;text-decoration:none;color:#003562;background:#fff;/* IE6 Bug */ padding:1px;border:1px solid #ccc}
td div a{display:block;text-decoration:none;color:#003562;background:#fff;/*IE6 Bug */ padding:3px;border:1px solid #006d93;border-left:0}
/* Styles for Sub Menu Items */
div ul.menu li.menu a{font-size:10px;display:block;text-decoration:none;color:#003562;background:#fff;/* IE6 Bug */ padding:3px;border:1px solid #006d93;border-top:0}
/* Fix IE. Hide from IE Mac \*/
* html ul.menu li.menu{float:left;height:1%}
* html ul.menu li.menu a{height:1%}
/* End */
/* Hover Styles */
td.menu div a:hover{color:#f7931e;background:#006d93;font-weight:bold}
ul.menu li.menu a:hover{color:#f7931e;background:#006d93}
li.menu ul.menu li.menu a{padding:2px 1px/* Sub Menu Styles */}
li.menu:hover ul.menu,li.menu.over ul.menu{display:block/* The magic */}
div:hover ul.menu,div.over ul.menu{display:block/* The magic */}
td#nav0{border-left:1px solid #006d93}
ul,li{font-family:Verdana,Arial,Helvetica,sans-serif;line-height:150%}
ul.recommend{margin-top:0px}

6. KreZ - 20 Июня, 2006 - 14:51:52 - перейти к сообщению

Еще один трабл: я хочу вставить вместо текстовых ссылок картинки, но как только удаляю графику меню начинает глючить (на выпадающие ссылки нельзя нажать - они изчезают). Может кто знает как удалить рамку без последствий?

7. KreZ - 21 Июня, 2006 - 06:23:14 - перейти к сообщению

Может хоть подскажите как безболезненно удалить рамку вокруг ссылок?

8. Дмитрий Б. - 21 Июня, 2006 - 08:18:50 - перейти к сообщению

KreZ
Разбирасться в таких больших кодах, тем более - чужих, - дело неблагодарное. Скорее всего, надо править какой-то из 3-х border'ов в css-файле...

9. kr12 - 21 Июня, 2006 - 09:26:56 - перейти к сообщению

Цитата:

в таких больших кодах

10. KreZ - 21 Июня, 2006 - 09:31:34 - перейти к сообщению

Дмитрий Б. пишет:

в таких больших кодах

Это ты еще больших кодов не видел Улыбка

Дмитрий Б. пишет:

Скорее всего, надо править какой-то из 3-х border'ов в css-файле...

Именно. Но когда я ставлю их толщину 0 или как-то изменяю, меню начинает глючить.