کنترل عنصر با جاوا اسکریپت - خاصیت hover

[reza_edu]

سلام من تاز کار هستم چند تا سوال داشتم که اینجا میپرسم ممنون میشم دوستان راهنمای کنن.

سوال اول :
توضیح » این منو {نمونه} من هست من چه جوری میتونم با جاوا اسکریپت عناصرش رو کنترل کنم اول کد رو بخونید پاینش سوال رو کامل میکنم :
<div id="navMenu">

<ul>

<li> <a href="#">Products</a>

<ul>

<li><a href="#">Wet Suit</a></li>

<li><a href="#">Vacuum Cleaner</a></li>

<li><a href="#">Pill Box</a></li>

<li><a href="#">Knee Socks</a></li>

<li><a href="#">Pirate Hat</a></li>

<li><a href="#">Kilt</a></li>

</ul> <!-- end inner UL -->


</li> <!-- end main LI -->

</ul> <!-- end main UL -->

<br class="clearFloat" />


</div> <!-- end navMenu -->
اینم کد css :
#navMenu {
margin:0;
width:auto;
}

#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}

#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#999;
}

#navMenu ul li a {
text-align:center;
height:30px;
width:150px;
display:block;
color:#000;
font-family:"Comic Sans MS", cursive;
text-decoration:none;
color:#FFF;
border:1px solid #FFF;
text-shadow:1px 1px 1px #000;
}

/*********************************************/
/* hide menu and allow it to return */
/*********************************************/

#navMenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}

#navMenu ul li:hover ul {
visibility:visible;
z-index:9999;
}

/**********************************************/

/*sets top level hover color*/

#navMenu li:hover {
background:#09F;
}

/*sets link items hover color and background*/

#navMenu ul li:hover ul li a:hover {
color:#000;
background:#CCC;
}

/* Changes text color on hover for main menu hover*/

#navMenu a:hover {
color:#000;
}

/* Contains the Float */

.clearFloat {
clear:both;
margin:0;
padding:0;
}

/* IE7 Display Fix */

#navMenu ul li {

display: inline;

}

حالا موندم چه جوری میشه با کتابخونه jquery و توابع slide نمایش زیر منو رو کنترل کرد؟ یعنی وقتی hover{موس روی لینک رفت} یهو زیر منو هارو نمایش نده و به آرومی نشون بده.

دوستانی که میگن کد های زیادی وجود داره و زیاد در این باره بحث شده حق دارن من همشون رو دیدم ولی من میخوام کد بالا رو کنترل کنم نه کدای دیگه رو.

سوال دوم :

چه جوری میشه تو جاوا اسکریپت یه کدی مثل کد زیر نوشت برای یه کلاس:

if($('.li').hover() {شرط انجام شدن}){
$('.a').css({"color":"red"});
}else{
$('.a').css({"color":"green"});
}


ممنون میشم راهنمای کنید.

[Saber Mogaddas]

سلام
خوب شما ul داخلی رو باید تو Css بهش display:none; بدین بعد کد jquery برای hover رو زیر نوشتم ..کتابخانه جی کوئری رو هم پیوست کنید به head


<script type="text/javascript">
$(document).ready(function () {
$('li btn class or id').hover(on, off);

});
function on() {
$('ul class or id').show();
}
function on() {
$('ul class or id').hide();
}
</script>

برای اینکه یهو نملیش نده او اینا می تونی به جای show ,hide از fadein ,fadeout استفاده کنی و سرعتشم کنترل کنی..
به این صورت هست اگه نفهمیدید باز بپرسید موفق باشی..

[reza_edu]

اما یه سوال دوست گرامی این خاصیت hover زمانی که موس رفت کنار تابع دوم رو اجرا میکنه ؟

[Saber Mogaddas]

سلام
بله..دقیقا رفتین روش تابع on فعال میشه و با کنار کشیدن ماوس off فعال میشه..

[reza_edu]

ممنون میشم این سوالم رو هم پاسخ بدید
کد :
<div id="navMenu">
<ul>
<li> <a href="#">Products</a>
<ul class="submenu">
<li><a href="#">Wet Suit</a></li>
<li><a href="#">Vacuum Cleaner</a></li>
<li><a href="#">Pill Box</a>
<ul class="submenu">
<li><a href="#">Pill Box</a>
<li><a href="#">Pill Box</a>
</ul>
</li>
<li><a href="#">Knee Socks</a></li>
<li><a href="#">Pirate Hat</a></li>
<li><a href="#">Kilt</a></li>
</ul> <!-- end inner UL -->
</li> <!-- end main LI -->
</ul> <!-- end main UL -->
</div> <!-- end navMenu -->
کد css :
#navMenu{
margin:0px;
width:auto;
}
#navMenu ul{
margin:0px;
padding:0px;
line-height:30px;
}
#navMenu li{
margin:0px;
padding:0px;
list-style:none;
float:left;
position:relative;
background:#999;
}
#navMenu ul li a{
text-align:center;
height:30px;
width:150px;
display:block;
color:#000;
font-family:Tahoma, Geneva, sans-serif;
text-decoration:none;
border:1px solid #fff;
text-shadow:1px 1px 1px #fff;
}
#navMenu ul ul{
position:absolute;
visibility:hidden;
top:32px;
}
#navMenu ul li:hover ul{
visibility:visible;
z-index:999;
}
#navMenu li:hover{
background:#09f;
}
حالا میخوام کاری کنم که Pill Boxها مثل زیر منو نشون داده بشن خواستم با کلاس جداشون کنم نشد؟

[Saber Mogaddas]

برای ul آخری باید از خاصیت animate jquery استفاده کنی.. تا به سمت چپ باز شه..شما فایل تو بده برات حل میکنم

[reza_edu]

نه منو من با کد اولی حل شده اما میخواستم بدونم اگه برای کار دیگه که میخوام از دیتابیس بخونم چیکار باید بکنم چون میخوام یه cms برای خودمون بنویسم اونجا ممکنه هر منو زیر منو داشته باشه {تعداد معلوم نیست} تو این حالت اصولا چیکار میکنن؟ این فرم اولیه استاتیک میشه دستی تغییر داد .ممنون راهنمائی میکنید. برای کار بعدی میخواستم بدونم باید چیکار کنم.

[Saber Mogaddas]

سلام
اگه می خواید تو تو Cms منو درست کنید که قضیه متفاوت میشه..باید تو تالار asp مطرح کنید ولی اگه ثابت هست و زیر منو هارو می دونید می تونید تو item template تو asp استفاده کنید

[reza_edu]

باشه اونجا مطرح میکنم .