تو این منو کمکم کنید [بایگانی]

olampiad

پنج شنبه 27 شهریور 1393, 11:31 صبح

سلام و خسته نباشید به اساتید عزیز
به این کد های من ی نگا بندازید
من این منو رو ساختم و لی به خوبی کار نمکنه.
دقیق نمدونم مشکلش از کجاست.
وقتی ماس میره روی اون li ، دایو داخل اون به خوبی اسلاید داون میشه
ولی
این دایو سریع بسته میشه
چطور بهتون بگم
وقتی میره روی اون دایو که زیر منو ها در آن قرار دارند به جای اینکه ثابت بماند
بسته میشود
مشکل از کجاست؟
ممنون
اینم کل منو به شکل پروژه
http://s5.picofile.com/file/8141368818/adak_menu.rar.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> index </title>

<style type="text/css">

@font-face{
src:url(WebYekan.ttf);
font-family:yekan;
}

body{
margin:0px;
padding:0px;
}

nav{
width:100%;
margin:auto;
height:95px;
background:#ffffff;
border-radius:0px;
margin-top:0px;
border-bottom:7px #6C0 solid;
font-family:yekan;
}

#one{
margin:0px;
padding:0px;
width:900px;
height:95px;
margin:auto;
list-style:none;
}

#one li{
position:relative;
float:right;
max-width:170px;
background:url(SplitterOfMenu.png) repeat-y;
}

#one li a:link,#one li a:visited{
float:right;
text-align:right;
text-decoration:none;
margin:5px;
margin-top:0px;
height:15px;
padding:7px;
padding-left:12px;
padding-top:70px;
color:#000;

}

#one li:nth-of-type(6){
background:none;
}

#two{
position:absolute;
background:#dddddd;
width:580px;
top:85px;
right:0px;
height:180px;
list-style:none;
padding:7px;
display:none;
}

li #two a:link,li #two a:visited{
float:right;
text-align:right;
text-decoration:none;
width:160px;
background:#CCC;
margin-top:0px;
height:15px;
padding:7px;
padding-right:14px;
padding-top:0px;
color:#003;
opacity:0.88;
background:url(Bullets.png) no-repeat;
background-position:175px 10px;

}
li #two a:hover{
background:#008ce5;
}

</style>

</head>
<body>

<nav>

<ul id="one">
<li style=""><a href=""> درباره آداک </a>

<div id="two">

<div><a href=""> محصولات </a></div>
<div><a href=""> خدمات </a></div>
<div><a href=""> راه کار های دانشگاهی </a></div>
<div><a href=""> مشتریان </a></div>
<div><a href=""> پیوستن به ما </a></div>
<div><a href=""> محصولات </a></div>
<div><a href=""> خدمات </a></div>
<div><a href=""> راه کار های دانشگاهی </a></div>
<div><a href=""> مشتریان </a></div>
<div><a href=""> پیوستن به ما </a></div>
<div><a href=""> محصولات </a></div>
<div><a href=""> خدمات </a></div>
<div><a href=""> راه کار های دانشگاهی </a></div>
<div><a href=""> مشتریان </a></div>
<div><a href=""> پیوستن به ما </a></div>
<div><a href=""> محصولات </a></div>
<div><a href=""> خدمات </a></div>

</div>

</li>

<li><a href=""> محصولات </a></li>
<li><a href=""> خدمات </a></li>
<li><a href=""> راه کار های دانشگاهی </a></li>
<li><a href=""> مشتریان </a></li>
<li><a href=""> پیوستن به ما </a></li>

</ul>

</nav>

<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">

$(document).ready(function(e) {

$('#one li').mouseover(function(){
$(this).find('div:first').slideDown(200);
})

$('#one li').mouseout(function(){
$(this).find('div:first').slideUp(200);
})

});

</script>

</body>
</html>

somaye-s

پنج شنبه 27 شهریور 1393, 12:11 عصر

سلام اولا برای زیر منو هیچ وقت از div استفاده نکنید .
از ul و li استفاده کنید

<ul id="two">
<li><a href=""> محصولات </a></li> <li><a href=""> خدمات </a></li> <li><a href=""> راه کار های دانشگاهی </a></li> <li><a href=""> مشتریان </a></li> <li><a href=""> پیوستن به ما </a></li> <li><a href=""> محصولات </a></li> <li><a href=""> خدمات </a></li> <li><a href=""> راه کار های دانشگاهی </a></li> <li><a href=""> مشتریان </a></li> <li><a href=""> پیوستن به ما </a></li> <li><a href=""> محصولات </a></li> <li><a href=""> خدمات </a></li> <li><a href=""> راه کار های دانشگاهی </a></li> <li><a href=""> مشتریان </a></li> <li><a href=""> پیوستن به ما </a></li> <li><a href=""> محصولات </a></li> <li><a href=""> خدمات </a></li>

</ul>

وبه جای کد جی کویری خودتون ازین کد استفاده کنید.

<script type="text/javascript">

jQuery("#one li").hover( function(){
jQuery(this).children("ul").stop(true,true).slideDown(500);
}
,function(){
jQuery(this).children("ul").slideUp(400);
});

</script>

فقط در اخر باید یه سری اصلاحات رو توی css انجام بدید چون با تبدیل div ها به li تنظیمات قبلی یکم بهم میریزه.

و بهتره که از id برای منو استفاده نکید . کلاس بدید ...به زیر منو هم لازم نیست id بدید ولی اگه لازم شد بهتره که کلاس بدین به جای id.

امیدوارم گیج نشده باشین:)