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;
}