f_talebi
دوشنبه 14 مرداد 1392, 15:46 عصر
سلام من یه کد ساده نوشتم :
میخوام که وقتی ماوس روی .submenu2 قرار میگیره این انیمیشن اجرا نشه و ثابت بمونه. اگه کد رو اجرا کنین میبینین که کد درست اجرا نمیشه:ناراحت: البته یک مشکل دیگه هم داره ، میخوام روی هر groupdiv که برم فقط زیر منوی اون نمایش داده بشه... حالا نمیدونم چطور بنویسمش...لطفا منو راهنمایی کنید
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<style type="text/css">
*{ margin:0;
padding:0;}
a:link{color:#0F0;}
a:visited{color:#AFF;}
a:hover{color:mediumorchid;}
a:active{color:greenyellow;}
#rightmenu{background-color:rgba(20,30,40,.9);
float:right;
color:#AFF;
text-align:center;
direction:rtl;
list-style-type:none;}
.groupdiv{
height:30px; width:123px;
background-color:black;
border-radius:3px;}
.submenu2{
background-color:green;
border-radius:3px;
display:none;}
</style>
<script>
$(document).ready(function(){
$(".groupdiv").hover(function(){
$(".submenu2").slideDown({ duration: 2000, easing: "easeInBounce" });
},
function(){
$(".submenu2").slideUp({ duration: 2000, easing: "easeInBounce" });
});
});
</script>
</head>
<body>
<div id="rightmenu">
<div class="groupdiv">
<a href="#">دسته بندی </a>
</div>
<div class="submenu2">
<ul>
<li>
<a href="#">HTML</a>
</li>
<li>
<a href="#">CSS</a>
</li>
<li>
<a href="#">JavaScript</a>
</li>
<li>
<a href="#">jquery</a>
</li>
</ul>
</div>
<div class="groupdiv">
<a href="#">دسته بندی2 </a>
</div>
<div class="submenu2">
<ul>
<li>
<a href="#">PHP</a>
</li>
<li>
<a href="#">ASP.Net</a>
</li>
<li>
<a href="#">ASP</a>
</li>
</ul>
</div>
</div>
</body>
</html>
میخوام که وقتی ماوس روی .submenu2 قرار میگیره این انیمیشن اجرا نشه و ثابت بمونه. اگه کد رو اجرا کنین میبینین که کد درست اجرا نمیشه:ناراحت: البته یک مشکل دیگه هم داره ، میخوام روی هر groupdiv که برم فقط زیر منوی اون نمایش داده بشه... حالا نمیدونم چطور بنویسمش...لطفا منو راهنمایی کنید
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<style type="text/css">
*{ margin:0;
padding:0;}
a:link{color:#0F0;}
a:visited{color:#AFF;}
a:hover{color:mediumorchid;}
a:active{color:greenyellow;}
#rightmenu{background-color:rgba(20,30,40,.9);
float:right;
color:#AFF;
text-align:center;
direction:rtl;
list-style-type:none;}
.groupdiv{
height:30px; width:123px;
background-color:black;
border-radius:3px;}
.submenu2{
background-color:green;
border-radius:3px;
display:none;}
</style>
<script>
$(document).ready(function(){
$(".groupdiv").hover(function(){
$(".submenu2").slideDown({ duration: 2000, easing: "easeInBounce" });
},
function(){
$(".submenu2").slideUp({ duration: 2000, easing: "easeInBounce" });
});
});
</script>
</head>
<body>
<div id="rightmenu">
<div class="groupdiv">
<a href="#">دسته بندی </a>
</div>
<div class="submenu2">
<ul>
<li>
<a href="#">HTML</a>
</li>
<li>
<a href="#">CSS</a>
</li>
<li>
<a href="#">JavaScript</a>
</li>
<li>
<a href="#">jquery</a>
</li>
</ul>
</div>
<div class="groupdiv">
<a href="#">دسته بندی2 </a>
</div>
<div class="submenu2">
<ul>
<li>
<a href="#">PHP</a>
</li>
<li>
<a href="#">ASP.Net</a>
</li>
<li>
<a href="#">ASP</a>
</li>
</ul>
</div>
</div>
</body>
</html>