Forum PHP.pl > [JavaScript] Problem z wyświetlaniem elementów

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript] Problem z wyświetlaniem elementów

worek

4.06.2011, 06:43:18

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

CODE

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

gargamel

4.06.2011, 08:27:53

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

wookieb

4.06.2011, 08:40:13

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

pablo_83

4.06.2011, 12:49:05

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

5.06.2011, 00:06:01

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

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

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.