#top_title {
position: absolute;
top: 170px;
z-index: 2;}
/* <style JavaScript> */
div.vert_menu
{
position: absolute;
visibility: hidden;
display: none;
}
div.horz_menu a { display: block; float: left; }
div.vert_menu a { display: block; float: none; }
div.sample1 div.vert_menu {
border-bottom: 1px solid black;
border-left: 1px solid black;
}
div.sample1 div.horz_menu a,
div.sample1 div.vert_menu a
{
border: 0px; /* solid black; */
padding: 1px 1px 1px 1px;
width: 150px;
background: #37BDFC;
text-decoration: none;
font-weight: bold;
font-family: Verdana;
font-weight: 900;
color: #FFFFFF;
}
div.sample1 div.horz_menu a { margin-right: -1px; }
div.sample1 div.vert_menu a { margin-bottom: -1px; }
div.sample1 div.horz_menu a:hover,
div.sample1 div.vert_menu a:hover { text-decoration: underline; },
div.sample1 div.horz_menu a.active,
div.sample1 div.vert_menu a.active { background: #37BDFC}
"Проблемка" с меню на JavaScript
Здраствуйте - у меня текущая задачка.
Сделал свой сайт : html&css двиг на php всё работает. Но понадабилась мне выпадающая менюшка - я в JavaScript несилён потому покапался в нете и нашёл готовый скрипт - простенький без наворотов. Отредактировал Css под свой дизайн - но вот незадача когда я вставляю скрипт в тело HTML документа (статичный) то у меня меню есть - даже выпадает но вот навести на суб меню я немогу - оно попросту исчезает.
Ниже приведу css , и сам html.
Но я думаю проблема в том как я вставляю этот скрипт в документ - нверняка как -то z-index' проставить надо - это моё предположение так как с JavaScript я так неработал. В цсс задано что центр тела имеет z-index равный 2 а в JavaScript z-index вобще никакой неуказан .
css
Сам HTML
JavaScript
ps / надеюсь на отзывы
Сделал свой сайт : html&css двиг на php всё работает. Но понадабилась мне выпадающая менюшка - я в JavaScript несилён потому покапался в нете и нашёл готовый скрипт - простенький без наворотов. Отредактировал Css под свой дизайн - но вот незадача когда я вставляю скрипт в тело HTML документа (статичный) то у меня меню есть - даже выпадает но вот навести на суб меню я немогу - оно попросту исчезает.
Ниже приведу css , и сам html.
Но я думаю проблема в том как я вставляю этот скрипт в документ - нверняка как -то z-index' проставить надо - это моё предположение так как с JavaScript я так неработал. В цсс задано что центр тела имеет z-index равный 2 а в JavaScript z-index вобще никакой неуказан .
css
Код:
Сам HTML
Код:
<html>
<head>
<title>Script</title>
<link rel="stylesheet" type="text/css" href="css/one.css" >
<link rel="stylesheet" type="text/css" href="menu.css" >
<script type="text/javascript" src="menu.js">
</script>
</head>
<body>
<table class="place4" cellpadding="0" cellspacing="0">
<tr>
<th width="274" align="right" valign="bottom" id="kreis"> </th>
<td align="left" valign="bottom" class="style1" id="vid">
<script type="text/javascript" src="menu.js">
</script>
</head>
<body>
<div class="sample1">
<div class="horz_menu">
<a id="sample1_home"> Linki</a>
<a id="sample1_products" > Linki2>></a>
<a id="sample1_downloads"> Linki3</a>
<a id="sample1_tips"> Linki4</a>
<br>
</div>
<script type="text/javascript">
var submenu_products2 = {" Product 1" : "java script:alert('Product 1');"};
var submenu_products = { " Product 1" : "java script:alert('Product 1');",
" Product 2" : "http://www.inbox.ru",
" Product 3" : "java script:alert('Product 3');",
" Product 4" : submenu_products2};
var menu = { "sample1_products" : submenu_products };
dhtmlmenu_build(menu);
</script>
</div>
</script>
</div>
</td>
<td width="274" align="left" valign="top" id="lab"><hr>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="place">
<tr>
<th scope="col"><div align="left"><img src="img/left.gif" width="225" height="55" alt="bilde"></div></th>
<th scope="col"><div align="right"><img src="img/right.gif" width="225" height="55" alt="bilde"></div></th>
</tr>
</table>
<table width="100%" id="top_title">
<tr>
<th width="17%" valign="top" scope="col">
<br>$side_0
<table cellspacing="0" class="place2" id="fon5">
<tr>
<th scope="col">$side_3</th>
</tr>
<tr>
<th scope="col" id="fon6">$side_4</th>
</tr>
<tr>
<th scope="col" id="fon6"> </th>
</tr>
</table>
</th>
<th width="63%" valign="top" scope="col"><br>$side_1</th>
<th width="20%" valign="top" scope="col"><br>$side_2</th>
</tr>
<head>
<title>Script</title>
<link rel="stylesheet" type="text/css" href="css/one.css" >
<link rel="stylesheet" type="text/css" href="menu.css" >
<script type="text/javascript" src="menu.js">
</script>
</head>
<body>
<table class="place4" cellpadding="0" cellspacing="0">
<tr>
<th width="274" align="right" valign="bottom" id="kreis"> </th>
<td align="left" valign="bottom" class="style1" id="vid">
<script type="text/javascript" src="menu.js">
</script>
</head>
<body>
<div class="sample1">
<div class="horz_menu">
<a id="sample1_home"> Linki</a>
<a id="sample1_products" > Linki2>></a>
<a id="sample1_downloads"> Linki3</a>
<a id="sample1_tips"> Linki4</a>
<br>
</div>
<script type="text/javascript">
var submenu_products2 = {" Product 1" : "java script:alert('Product 1');"};
var submenu_products = { " Product 1" : "java script:alert('Product 1');",
" Product 2" : "http://www.inbox.ru",
" Product 3" : "java script:alert('Product 3');",
" Product 4" : submenu_products2};
var menu = { "sample1_products" : submenu_products };
dhtmlmenu_build(menu);
</script>
</div>
</script>
</div>
</td>
<td width="274" align="left" valign="top" id="lab"><hr>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="place">
<tr>
<th scope="col"><div align="left"><img src="img/left.gif" width="225" height="55" alt="bilde"></div></th>
<th scope="col"><div align="right"><img src="img/right.gif" width="225" height="55" alt="bilde"></div></th>
</tr>
</table>
<table width="100%" id="top_title">
<tr>
<th width="17%" valign="top" scope="col">
<br>$side_0
<table cellspacing="0" class="place2" id="fon5">
<tr>
<th scope="col">$side_3</th>
</tr>
<tr>
<th scope="col" id="fon6">$side_4</th>
</tr>
<tr>
<th scope="col" id="fon6"> </th>
</tr>
</table>
</th>
<th width="63%" valign="top" scope="col"><br>$side_1</th>
<th width="20%" valign="top" scope="col"><br>$side_2</th>
</tr>
JavaScript
Код:
// <script>
function at_display(x)
{
var win = window.open();
for (var i in x) win.document.write(i+' = '+x+'<br>');
}
// ----- DropDown Control ------------------------------------------------------
var at_timeout = 50;
// ----- Show Aux -----
function at_show_aux(parent, child)
{
var p = document.getElementById(parent);
var c = document.getElementById(child);
p.className = "active";
if (c.offsetWidth <= 0)
{
c.style.position = "absolute";
c.style.visibility = "visible";
c.style.display = "block";
}
var direction = undefined;
if (p.parentNode && p.parentNode["at_position"] == "x")
direction = p.parentNode["at_direction"];
var top = (c["at_position"] == "y") ? p.offsetHeight+2 : 0;
var left1 = (c["at_position"] == "x") ? p.offsetWidth +2 : 0;
var left2 = (c["at_position"] == "x") ? -c.offsetWidth -2 : 0;
var left3 = (c["at_position"] == "x") ? p.offsetWidth +2 : 0;
for (; p; p = p.offsetParent)
{
if (p.style.position != 'absolute')
{
left1 += p.offsetLeft;
left2 += p.offsetLeft;
top += p.offsetTop;
}
left3 += p.offsetLeft;
}
if (direction)
{
left = (direction == 'right') ? left1 : left2;
c['at_direction'] = direction;
}
else
{
left = (left3+c.offsetWidth < document.body.offsetWidth) ? left1 : left2;
c['at_direction'] = (left3+c.offsetWidth < document.body.offsetWidth) ? 'right' : 'left';
}
c.style.position = "absolute";
c.style.visibility = "visible";
c.style.display = "block";
c.style.top = top +'px';
c.style.left = left+'px';
}
// ----- Hide Aux -----
function at_hide_aux(parent, child)
{
document.getElementById(parent).className = "parent";
document.getElementById(child ).style.visibility = "hidden";
document.getElementById(child ).style.display = "block";
}
// ----- Show -----
function at_show(e)
{
var p = document.getElementById(this["at_parent"]);
var c = document.getElementById(this["at_child" ]);
at_show_aux(p.id, c.id);
clearTimeout(c["at_timeout"]);
}
// ----- Hide -----
function at_hide()
{
var c = document.getElementById(this["at_child"]);
c["at_timeout"] = setTimeout("at_hide_aux('"+this["at_parent"]+"', '"+this["at_child" ]+"')", at_timeout);
}
// ----- Attach -----
function at_attach(parent, child, position)
{
p = document.getElementById(parent);
c = document.getElementById(child );
p["at_child"] = c.id;
c["at_child"] = c.id;
p["at_parent"] = p.id;
c["at_parent"] = p.id;
c["at_position"] = position;
p.onmouseover = at_show;
p.onmouseout = at_hide;
c.onmouseover = at_show;
c.onmouseout = at_hide;
}
// ----- DropDown Menu ---------------------------------------------------------
// ----- Build Aux -----
function dhtmlmenu_build_aux(parent, child, position)
{
document.getElementById(parent).className = "parent";
document.write('<div class="vert_menu" id="'+parent+'_child">');
var n = 0;
for (var i in child)
{
if (i == '-')
{
document.getElementById(parent).href = child;
continue;
}
if (typeof child == "object")
{
document.write('<a class="parent" id="'+parent+'_'+n+'">'+i+'</a>');
dhtmlmenu_build_aux(parent+'_'+n, child, "x");
}
else document.write('<a id="'+parent+'_'+n+'" href="'+child+'">'+i+'</a>');
n++;
}
document.write('</div>');
at_attach(parent, parent+"_child", position);
}
// ----- Build -----
function dhtmlmenu_build(menu)
{
for (var i in menu) dhtmlmenu_build_aux(i, menu, "y");
}
function at_display(x)
{
var win = window.open();
for (var i in x) win.document.write(i+' = '+x+'<br>');
}
// ----- DropDown Control ------------------------------------------------------
var at_timeout = 50;
// ----- Show Aux -----
function at_show_aux(parent, child)
{
var p = document.getElementById(parent);
var c = document.getElementById(child);
p.className = "active";
if (c.offsetWidth <= 0)
{
c.style.position = "absolute";
c.style.visibility = "visible";
c.style.display = "block";
}
var direction = undefined;
if (p.parentNode && p.parentNode["at_position"] == "x")
direction = p.parentNode["at_direction"];
var top = (c["at_position"] == "y") ? p.offsetHeight+2 : 0;
var left1 = (c["at_position"] == "x") ? p.offsetWidth +2 : 0;
var left2 = (c["at_position"] == "x") ? -c.offsetWidth -2 : 0;
var left3 = (c["at_position"] == "x") ? p.offsetWidth +2 : 0;
for (; p; p = p.offsetParent)
{
if (p.style.position != 'absolute')
{
left1 += p.offsetLeft;
left2 += p.offsetLeft;
top += p.offsetTop;
}
left3 += p.offsetLeft;
}
if (direction)
{
left = (direction == 'right') ? left1 : left2;
c['at_direction'] = direction;
}
else
{
left = (left3+c.offsetWidth < document.body.offsetWidth) ? left1 : left2;
c['at_direction'] = (left3+c.offsetWidth < document.body.offsetWidth) ? 'right' : 'left';
}
c.style.position = "absolute";
c.style.visibility = "visible";
c.style.display = "block";
c.style.top = top +'px';
c.style.left = left+'px';
}
// ----- Hide Aux -----
function at_hide_aux(parent, child)
{
document.getElementById(parent).className = "parent";
document.getElementById(child ).style.visibility = "hidden";
document.getElementById(child ).style.display = "block";
}
// ----- Show -----
function at_show(e)
{
var p = document.getElementById(this["at_parent"]);
var c = document.getElementById(this["at_child" ]);
at_show_aux(p.id, c.id);
clearTimeout(c["at_timeout"]);
}
// ----- Hide -----
function at_hide()
{
var c = document.getElementById(this["at_child"]);
c["at_timeout"] = setTimeout("at_hide_aux('"+this["at_parent"]+"', '"+this["at_child" ]+"')", at_timeout);
}
// ----- Attach -----
function at_attach(parent, child, position)
{
p = document.getElementById(parent);
c = document.getElementById(child );
p["at_child"] = c.id;
c["at_child"] = c.id;
p["at_parent"] = p.id;
c["at_parent"] = p.id;
c["at_position"] = position;
p.onmouseover = at_show;
p.onmouseout = at_hide;
c.onmouseover = at_show;
c.onmouseout = at_hide;
}
// ----- DropDown Menu ---------------------------------------------------------
// ----- Build Aux -----
function dhtmlmenu_build_aux(parent, child, position)
{
document.getElementById(parent).className = "parent";
document.write('<div class="vert_menu" id="'+parent+'_child">');
var n = 0;
for (var i in child)
{
if (i == '-')
{
document.getElementById(parent).href = child;
continue;
}
if (typeof child == "object")
{
document.write('<a class="parent" id="'+parent+'_'+n+'">'+i+'</a>');
dhtmlmenu_build_aux(parent+'_'+n, child, "x");
}
else document.write('<a id="'+parent+'_'+n+'" href="'+child+'">'+i+'</a>');
n++;
}
document.write('</div>');
at_attach(parent, parent+"_child", position);
}
// ----- Build -----
function dhtmlmenu_build(menu)
{
for (var i in menu) dhtmlmenu_build_aux(i, menu, "y");
}
ps / надеюсь на отзывы
спасибо за линк , придётся подработать данный пример - меню выпает сверху в низ и блоки расположены по горизонтали.
А линк действительно интересный нашёл ещё пару интересных статей - пасиб.
Но если кто знает как разобратся с данной задачкой отпишите plz.
А линк действительно интересный нашёл ещё пару интересных статей - пасиб.
Но если кто знает как разобратся с данной задачкой отпишите plz.
Забил - Скачал Sothink DHTMLMenu - сделал менюшку.
Значит такой вот код:[HTML]<HTML>
<HEAD>
<TITLE>Test</TITLE>
<LINK href="functions/style.css" rel="stylesheet">
</HEAD>
<BODY onmousemove="movem(event,a);">
<SCRIPT>
a=1;
function showm(){
document.getElementById("Mtb").style.display="block";
clearTimeout(timer);
document.getElementById("menu").style.zIndex=10;
return 0;
}
function hidem(){
timer=setTimeout("document.getElementById('Mtb').style.display='none';",1000);
document.getElementById("menu").style.zIndex=0;
return 1;
}
function movem(e,flag_a){
if(flag_a==1){
if(e.pageY) document.getElementById("menu").style.top=e.pageY-100;
else document.getElementById("menu").style.top=e.clientY +document.body.scrollTop-document.documentElement.clientTop-100;
}
if(e.clientX<25) document.getElementById("menu").style.zIndex=10;
}
function overm(id){
document.getElementById(id).style.backgroundColor="#000000";
}
function outm(id){
document.getElementById(id).style.backgroundColor="transparent";
}
</SCRIPT>
<SPAN class="menu" id="menu" style="padding:10px; position:absolute; left:1%; z-index:0;" onmouseover="a=showm();" onmouseout="a=hidem();">
<TABLE border="0">
<TR><TD rowspan="4" valign="middle" id="M">M<BR><BR>E<BR><BR>N<BR><BR>U</TD>
<TD>
<TABLE id="Mtb" border="0" style="display:none;"><TR><TD id="item0" onmouseover="overm('item0');" onmouseout="outm('item0');"><A href="" title="Раздел пока не работает">Новости сайта</A>
<TR><TD id="item1" onmouseover="overm('item1');" onmouseout="outm('item1');"><A href="" title="Раздел пока не работает">Статьи</A>
<TR><TD id="item2" onmouseover="overm('item2');" onmouseout="outm('item2');"><A href="" title="Раздел пока не работает">Ссылки</A>
<TR><TD id="item3" onmouseover="overm('item3');" onmouseout="outm('item3');"><A href="/GUESTBOOK/" title="Guest book">Гостевая книга</A>
</TABLE></TABLE></SPAN></BODY>
</HTML>[/HTML]
В FireFox'e работает как и задумывалось,а в IE есть одна проблема.
По задумке меню при передвижении курсора меняет своё положение по вертикали. Но при наведении на него указателя мыши оно должно прекратить своё движение.
Страницу в работе можно посмотреть там>.
Заранее спасибо.
Проблему решил добавлением в <SPAN> [color=red]onmousemove[/color]="[color=green]a=0[/color][color=blue];[/color]"
<HEAD>
<TITLE>Test</TITLE>
<LINK href="functions/style.css" rel="stylesheet">
</HEAD>
<BODY onmousemove="movem(event,a);">
<SCRIPT>
a=1;
function showm(){
document.getElementById("Mtb").style.display="block";
clearTimeout(timer);
document.getElementById("menu").style.zIndex=10;
return 0;
}
function hidem(){
timer=setTimeout("document.getElementById('Mtb').style.display='none';",1000);
document.getElementById("menu").style.zIndex=0;
return 1;
}
function movem(e,flag_a){
if(flag_a==1){
if(e.pageY) document.getElementById("menu").style.top=e.pageY-100;
else document.getElementById("menu").style.top=e.clientY +document.body.scrollTop-document.documentElement.clientTop-100;
}
if(e.clientX<25) document.getElementById("menu").style.zIndex=10;
}
function overm(id){
document.getElementById(id).style.backgroundColor="#000000";
}
function outm(id){
document.getElementById(id).style.backgroundColor="transparent";
}
</SCRIPT>
<SPAN class="menu" id="menu" style="padding:10px; position:absolute; left:1%; z-index:0;" onmouseover="a=showm();" onmouseout="a=hidem();">
<TABLE border="0">
<TR><TD rowspan="4" valign="middle" id="M">M<BR><BR>E<BR><BR>N<BR><BR>U</TD>
<TD>
<TABLE id="Mtb" border="0" style="display:none;"><TR><TD id="item0" onmouseover="overm('item0');" onmouseout="outm('item0');"><A href="" title="Раздел пока не работает">Новости сайта</A>
<TR><TD id="item1" onmouseover="overm('item1');" onmouseout="outm('item1');"><A href="" title="Раздел пока не работает">Статьи</A>
<TR><TD id="item2" onmouseover="overm('item2');" onmouseout="outm('item2');"><A href="" title="Раздел пока не работает">Ссылки</A>
<TR><TD id="item3" onmouseover="overm('item3');" onmouseout="outm('item3');"><A href="/GUESTBOOK/" title="Guest book">Гостевая книга</A>
</TABLE></TABLE></SPAN></BODY>
</HTML>[/HTML]
В FireFox'e работает как и задумывалось,а в IE есть одна проблема.
По задумке меню при передвижении курсора меняет своё положение по вертикали. Но при наведении на него указателя мыши оно должно прекратить своё движение.
Страницу в работе можно посмотреть там>.
Заранее спасибо.
Проблему решил добавлением в <SPAN> [color=red]onmousemove[/color]="[color=green]a=0[/color][color=blue];[/color]"