تالار گفتمان nCIS.ir

با سلام خدمت دوستان
من در سطح سوم از منو افقی دچار مشکل شده ام لطفا راهنمایی کنید.

کد:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>فروشگاه اینترنتی</title>

<script src="js/jquery-1.10.2.min.js"></script>

</head>

<body style="margin:0; padding:0;">

<div id="line1" style="width:100%; height:4px; background:#006;"></div><!--line1-->

<style>

#ertebat a{ font-family:tahoma; font-size:12px; margin:0 6px; float:right; }

#ertebat span{float:right;} 

#ertebat > a > img{ vertical-align:middle;}

</style>

<div id="ertebat" style="width:1100px; height:37px; margin:0 auto;  background:#D9E1DE; text-align:right; direction:rtl; line-height:35px;">

<a>بازگشت به صفحه نخست</a>

<span>|</span>

<a>درباره ما</a>

<span>|</span>

<a>تماس با ما</a>

<a style="margin-right:180px; margin-top:-10px;"> </a>

<a style="float:left; box-shadow:1px 1px 8px #ccc; margin-left:2px; border-radius:8px;"> <img  src="img/sabad.png"> سبد خرید شما  </a>

</div><!--ertebat-->

<div id="line1" style="width:100%; height:4px; background:#006;"></div><!--line1-->

<style>

#menu > ul{ padding:0; margin:0; width:100%; height:100%;}

#menu > ul >li , #menu >ul >li >ul >li { float:right; direction:rtl; list-style:none; background:url(img/line1.jpg) right center no-repeat ; padding:0 10px; line-height: 34px; font-family:tahoma; font-size:12px; height:100%; cursor:pointer; }

#menu > ul >li >img { vertical-align:middle;}

#menu > ul >li >ul {padding:0; margin:0; width:1100px; height:37px; margin:0 auto; position:absolute; right:0; top:37px; z-index:2; color:#fff; display:none;}

</style>

<div id="top1" style="width:100%; height:37px; background:#003; margin-top:3px;">

<div id="menu" style="width:1100px; height:100%; background:#A4DAF7; margin:0 auto; height:100%; position:relative;">

<ul>

<li> <img src="img/home54.png"> صفحه نخست </li>

<li> <img src="img/tel.png"> گوشی همراه 

<ul>

<li>samsung<ul><li>s7</li></ul></li>

<li>nokia</li>

<li>htc</li>

</ul>

 </li>

<li> <img src="img/laptop.png"> لپ تاپ 

<ul>

<li>ASUS<ul><li>x555</li></ul></li>

<li>ACER<ul><li>55610</li></ul></li>

<li>SONY<ul><li>nk253</li></ul></li>

</ul>

</li>

<li> <img src="img/tv.png"> تلویزیون </li>

<li> <img src="img/pc.png"> کامپیوتر  </li>

</ul>

<!--menu1-->

<div id="menu2" style="width:1100px;  top:74px; height:37px; background:#ccc; position:absolute; display:none;"></div><!--menu2-->

</div><!--menu-->

<div id="menu1" style="width:100%; height:37px; background:#006; position:absolute; display:block;"></div>

</div><!--top1-->

<?php

include('script.php');

?>

</body>

</html>

کد:

<script>

$("#menu > ul >li").hover(function(){

    $(this).css('background','url(img/line2.jpg) right center no-repeat ');

    var number=$(this).find('ul').length;

    if(number>0){

    $("#menu1").slideDown(600);

    $(this).find('ul').css('display','block');

    }

    else{$("#menu1").slideUp(300);$("#menu2").slideUp(300);}

    },

    function(){

        $(this).css('background','url(img/line1.jpg) right center no-repeat ');

        $(this).find('ul').css('display','none');

     })

     $("#menu").mouseleave(function(){

         $("#menu1").slideUp(300);

 })

$("#menu > ul >li> ul >li").hover(function(){

    $(this).css('background','url(img/line2.jpg) right center no-repeat ');

    var number=$(this).find('ul').length;

    if(number>0){

    $("#menu2").slideDown(1000);

    $(this).find('ul > li').css('display','block');

    }

    else{$("#menu2").slideUp(200);$("#menu2").slideUp(200);}

    },

    function(){

        $(this).css('background','url(img/line1.jpg) right center no-repeat ');

        $(this).find('ul > li').css('display','none');

     })

     $("#menu").mouseleave(function(){

         $("#menu2").slideUp(200);

 })

</script>

سلام... امیدوارم درست فهمیده باشم:

کد:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>فروشگاه اینترنتی</title>

<script src="js/jquery-1.10.2.min.js"></script>

</head>

<body style="margin:0; padding:0;">

<div id="line1" style="width:100%; height:4px; background:#006;"></div><!--line1-->

<style>

#ertebat a{ font-family:tahoma; font-size:12px; margin:0 6px; float:right; }

#ertebat span{float:right;}

#ertebat > a > img{ vertical-align:middle;}

</style>

<div id="ertebat" style="width:1100px; height:37px; margin:0 auto;  background:#D9E1DE; text-align:right; direction:rtl; line-height:35px;">

<a>بازگشت به صفحه نخست</a>

<span>|</span>

<a>درباره ما</a>

<span>|</span>

<a>تماس با ما</a>

<a style="margin-right:180px; margin-top:-10px;"> </a>

<a style="float:left; box-shadow:1px 1px 8px #ccc; margin-left:2px; border-radius:8px;"> <img  src="img/sabad.png"> سبد خرید شما  </a>

</div><!--ertebat-->

<div id="line1" style="width:100%; height:4px; background:#006;"></div><!--line1-->

<style>

#menu1{

    width:100%;

    height:37px;

    background:#006;

    position:absolute;

    display: none;

}

#menu > ul{

    padding:0;

    margin:0;

    width:100%;

    height:100%;

}

#menu > ul >li , #menu >ul >li >ul >li {

    float:right; direction:rtl;

    list-style:none; background:url(img/line1.jpg) right center no-repeat ;

    padding:0 10px; line-height: 34px; font-family:tahoma;

    font-size:12px; height:100%;

    cursor:pointer;

}

#menu ul li ul li ul{

    display: none;

    position: absolute;

    right: 0;

    left: 0;

    top: 100%;

    background: #EEE;

}

#menu ul li ul li ul li{

    display: inline-block;

    color: black;

}

#menu > ul >li >img {

    vertical-align:middle;

}

#menu > ul >li >ul {

    padding:0; margin:0;

    width:1100px; height:37px;

    margin:0 auto;

    position:absolute;

    right:0;

    top:37px; z-index:2;

    color:#fff;

    display:none;

}

</style>

<div id="top1" style="width:100%; height:37px; background:#003; margin-top:3px;">

<div id="menu" style="width:1100px; height:100%; background:#A4DAF7; margin:0 auto; height:100%; position:relative;">

<ul>

<li> <img src="img/home54.png"> صفحه نخست </li>

<li> <img src="img/tel.png"> گوشی همراه

<ul>

<li>samsung<ul><li>s7</li></ul></li>

<li>nokia</li>

<li>htc</li>

</ul>

</li>

<li> <img src="img/laptop.png"> لپ تاپ

<ul>

<li>ASUS<ul><li>x555</li></ul></li>

<li>ACER<ul><li>55610</li></ul></li>

<li>SONY<ul><li>nk253</li></ul></li>

</ul>

</li>

<li> <img src="img/tv.png"> تلویزیون </li>

<li> <img src="img/pc.png"> کامپیوتر  </li>

</ul>

<!--menu1-->

<div id="menu2" style="width:1100px;  top:74px; height:37px; background:#ccc; position:absolute; display:none;"></div><!--menu2-->

</div><!--menu-->

<div id="menu1" style=""></div>

</div><!--top1-->

<?php

include('script.php');

?>

کد:

$("#menu li").mouseenter(function(){

    if($(this).children('ul').length > 0){

        $(this).children('ul').stop().slideDown(600);

        $('#menu1').stop().slideDown(600);

    }

});

$("#menu li").mouseleave(function(){

    $(this).children('ul').stop().slideUp(300);

    $('#menu1').stop().slideUp(300);

});

$("#menu li ul li").mouseleave(function(){

    $('#menu1').stop().slideDown(300);

});

بله درست هست.تشکر
ولی با یک روش دیگه میشه یک توضیح اجمالی در خصوص jquery این کد بدهید

خواهش میکنم

کد:

$("#menu li")

با این کار واقع تمامی li های درون menu رو فرا میخونیم

کد:

$(this).children('ul').stop().slideDown(600);

و با این قسمت مشخص میکنیم که فرزند ul از اون li ای که موس روش برده شده ظاهر بشه

کد:

$("#menu li").mouseleave(function(){

    $(this).children('ul').stop().slideUp(300);

    $('#menu1').stop().slideUp(300);

});

این قسمت هم عکس قضیه هست که میگه اگر موس از روی li برداشته شد فرزند ul اون رو محو کنه

کد:

$("#menu li ul li").mouseleave(function(){

    $('#menu1').stop().slideDown(300);

});

این قسمت رو فقط به خاطر این اضافه کردیم که شما برای پس زمینه منو سطر دوم یه div در نظر گرفته بودید ...
اگر به خود ul پس زمینه داده بودید این قطعه از کد نیازی نبود دیگه

اینم داره میگه اگر موس از روی li ای که فرزند یک ul هست و اون ul فرزند یک li هست و اون li فرزندی از menu بود (چی شد اصلا Undecided

) برداشته شد اون div پس زمینه محو نشه...

alisalehi

amir

alisalehi

amir