alismith
پنج شنبه 29 اردیبهشت 1390, 23:44 عصر
سلام این نمونه دیگه مشکل در اجرای لینک های منو نداره و با کلیک بر روی ایتم ها (منظور تگ A هست) منو در روی صفحه باقی می ماند البته همه اینها با یک style خاص صورت می گیرد
مثل facebook :چشمک:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery","1.5");</script>
<script language="javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("#btn").toggleClass('btn');
$("#subMenu").fadeToggle("slow");
return false;
});
$(document).click(function(e){
$("#btn").toggleClass('btn');
var elm = e.target.className;
var dom = e.target.tagName;
if(dom=="A" && elm=="Mitem"){
$("#subMenu").show();
}else{
$("#subMenu").hide();
return false;
}
});
});
</script>
<style type="text/css">
.btn{border: 1px solid #003; border-right: 2px solid #003; background: #FFF; box-shadow: 0 0 7px #006;}
.item{margin-left: -12px;}
.Mitem{text-decoration: none; color: #0000cc;}
</style>
</head>
<body>
<ul style=" list-style: none; width: 50px;">
<li id="topic" style="background: silver;"><a href="javascript<b></b>:void(0)" id="btn" style="text-decoration: none; color: brown;">More ></a></li>
<li>
<ul id="subMenu" style="display: none; list-style: none; border: 1px solid #003; border-right: 2px solid #003; border-bottom: 2px solid #003; width: 50px; height: 150px; margin-left: -15px; box-shadow: 0 0 7px #006;">
<li class="item"><a class="Mitem" href="http://www.google.com">item a</a></li>
<li class="item"><a class="Mitem" href="http://www.google.com">item b</a></li>
<li class="item"><a class="Mitem" href="http://www.google.com">item c</a></li>
</ul>
</li>
</body>
</html>
موفق باشید