[JavaScript] Problem z wyświetlaniem elementów, jak wyżej Opcje

[worek]

Zrobiłem sobie menu w liście. Struktura menu wygląda tak:

CODE

<ul>
<li></li><li></li>........
<ul>
<li></li><li></li>
</ul>

Napisałem sobie skrypcik żeby po najechaniu na hiperłącze wyświetlił podkategorie znaczy się drugi poziom listy. Dla testów zrobiłem display:block; dla drugiego poziomu listy. I pozamieniałem miejscami w skrypcie gdzie block i none. Ukrywać elementy chciało. Ale jak zrobiłem z powrotem czyli tak jak teraz mam to nie chce pokazywać ukrytych elementów. Gdzie leży problem?

link ma taką testową składnię: <a href="#" onmouseover="return rozwin(this)" onmouseout="return pokaz(this)">

CODE

<script type="text/javascript">
<!--
function rozwin(obj)
{
obj.parentNode.nextSibling.style.display='block';
obj.parentNode.parentNode.nextSibling.style.display='block';
return false;
}
function pokaz(obj)
{
obj.parentNode.nextSibling.style.display='none';
obj.parentNode.parentNode.nextSibling.style.display='none';
return false;
}
//-->
</script>

Ten post edytował worek 4.06.2011, 23:59:24

[gargamel]

nie pisze się onmouseover="return rozwin(this)" tylko onmouseover="rozwin(this)"
Te returny są tam nie potrzebne.

Ten post edytował gargamel 4.06.2011, 08:28:26

[wookieb]

Naucz się używac bbcode albo kolejne twoje tematy zostaną usunięte.

[pablo_83]

poszukaj sobie rozwiązań bazujących na jQuery jest łatwiejsze do napisania i daje więcej mozliwości, masz tutaj dwa przykłady, które całkiem spoko się prezentują a tobie chyba o coś takiego chodzi:

1 przyklad
2 przykład

[worek]

Już napisałem trochę menu tylko że jeden problem mam. jak najadę na jedną z podkategorii menu i dłużej potrzymam kursor to mi się schowa menu. Kod wykminiony jest straszny ale to pierwszy raz menu od podstaw sam chce zrobić, bez jQuery.

kod odpowiedzialny za generowanie struktury menu wygląda tak:

CODE

<ul>
<?php

echo "<li class=\"buton\"><a class=\"linkmenu\" href=\"#\" onmousemove=\"rozwin(this)\" onfocus=\"rozwin3(obj)\">".$result['cat_name']."</a></li><ul class=\"ulist\">";
$sql = "SELECT * FROM subcategory WHERE id_cat_main = $_GET[id] ORDER BY id ASC;";
$query = mysql_query($sql,$polaczenie);
while($result = mysql_fetch_array($query))
{
echo "<li class=\"bt\" onfocus=\"rozwin3(this)\" onmousemove=\"rozwin2(this)\"><a class=\"linkmenu2\" href=\"#\" onmousemove=\"rozwin2(this)\" onmouseout=\"pokaz2(this)\" onfocus=\"rozwin2(this)\">$result[cat_name]</a></li>";
}
?>
</ul>
</ul>

skrypt jS:

CODE

<script type="text/javascript">
<!--
var uchwyt;
function rozwin(obj)
{
uchwyt = 3;
obj.parentNode.nextSibling.style.display='block';
return false;
}
function rozwin2(obj)
{uchwyt = 3;
obj.parentNode.style.display='block';
return false;}

function pokaz2(obj)
{
uchwyt--;
if (uchwyt > 0)
{
setTimeout(function(){pokaz2(obj);}, 1000);
}
else
{
obj.parentNode.parentNode.style.display='none';
uchwyt = 3;
return false;
}
}
function rozwin3(obj)
{uchwyt=3;
return false;}
//-->
</script>

style dla przycisków menu:

CODE

.ulist{display:none;}
.linkmenu{
display:block;
top:-3px;
text-decoration:none;
font-size:16px;
text-align:center;
color:#be3f03;
list-style-type:none;
list-style:none;
width:180px;
position:relative;
height:30px;
padding:0px;
margin-top:8px;
margin-bottom:0px;
text-shadow: 1px 1px 2px #ab5704;
filter: dropshadow(color=#ffb74b, offx=0, offy=0);
}
.linkmenu:hover{
display:block;
top:-3px;
text-decoration:none;
font-size:16px;
text-align:center;
color:#be3f03;
list-style-type:none;
list-style:none;
width:180px;
position:relative;
height:30px;
padding:0px;
margin-top:8px;
margin-bottom:10px;
text-shadow: 1px 1px 2px #292622;
filter: dropshadow(color=#ffb74b, offx=0, offy=0);
}
.linkmenu2{
display:block;
top:-4px;
text-decoration:none;
font-size:12px;
font-weight:bold;
text-align:center;
border:1px;
color:#be3f03;
list-style-type:none;
list-style:none;
width:150px;
position:relative;
height:25px;
padding:0px;
margin-top:8px;
margin-bottom:10px;
text-shadow: 1px 1px 2px #ab5704;
filter: dropshadow(color=#ffb74b, offx=0, offy=0);
}
.linkmenu2:hover{
top:-3px;
text-decoration:none;
font-size:12px;
font-weight:bold;
text-align:center;
border:1px;
color:#be3f03;
list-style-type:none;
list-style:none;
width:150px;
position:relative;
height:25px;
padding:0px;
margin-top:8px;
margin-bottom:10px;
text-shadow: 1px 1px 2px #292622;
filter: dropshadow(color=#ffb74b, offx=0, offy=0);
}
li.bt
{
z-index:3;
top:-6px;
font-size:14px;
text-align:center;
border:1px;
border-color:#ff8400;
border-style:solid;
color:#be3f03;
left:-20px;
list-style-type:none;
list-style:none;
width:150px;
position:static;
height:25px;
padding:0px;
margin-top:0px;
margin-bottom:3px;
text-decoration:none;
-webkit-border-top-left-radius: px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: px;
-moz-border-radius-topleft: px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: px;
border-top-left-radius: px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: px;
webkit-box-shadow: 0px 0px 5px #ff8400;
-moz-box-shadow: 0px 0px 5px #ff8400;
box-shadow: 0px 0px 5px #ff8400;
text-shadow: 1px 1px 2px #ab5704;
filter: dropshadow(color=#ffb74b, offx=0, offy=0);
background: url(/mvp/pictures/btmnyl.png) repeat-x;
display:block;
z-index:100;
}
li.bt:hover
{
z-index:3;
top:-6px;
font-size:14px;
text-align:center;
border:1px;
border-color:#ff8400;
border-style:solid;
color:#be3f03;
left:-45px;
list-style-type:none;
list-style:none;
width:150px;
position:relative;
height:25px;
padding:0px;
margin-top:0px;
margin-bottom:0px;
text-decoration:none;
-webkit-border-top-left-radius: px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: px;
-moz-border-radius-topleft: px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: px;
border-top-left-radius: px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: px;
webkit-box-shadow: 0px 0px 5px #ff8400;
-moz-box-shadow: 0px 0px 5px #ff8400;
box-shadow: 0px 0px 5px #ff8400;
text-shadow: 1px 1px 2px #ab5704;
filter: dropshadow(color=#ffb74b, offx=0, offy=0);
background: url(/mvp/pictures/btmnyl.png) repeat-x;
display:block;
z-index:100;
}

Ten post edytował worek 5.06.2011, 00:07:59