当前位置:编程学习 > C#/ASP.NET >>

跪求asp.net实现把鼠标移动到某菜单按钮上能显示其下属子菜单功能

 编程语言为C#,即能实现web应用程序,当把鼠标移动到某菜单上或者点击该菜单,能显示其下子菜单的功能,包括页面设计和程序实现。 --------------------编程问答-------------------- JS菜单去网上收索下吧,很多 --------------------编程问答-------------------- $(document).ready(function()
{
    var isShow=false;
    $("#hidden_menu").hide();
    $("#categort").mouseover(function(){
        $("#hidden_menu").show();
    });
    $("#hidden_menu").mouseover(function(){
        isShow=true;    
        $(this).show(); 
    });
    $("#hidden_menu").mouseout(function(){
        if(isShow)
        {
            $(this).hide(); 
            isShow=false;
        }    
    });
})
</script>
<div id="categort"><a href="#">category</a></div>
<div id="hidden_menu">
    <div class="round_corner_left"></div>
    <div class="round_corner_reeat"><a>这里历遍数据库得到的各种分类名称</a></div>
    <div class="round_corner_right"></div>
</div>


//下面是导航样式的
$("a[title='nav']").click(function(){
           for(i=0;i<$("a[title='nav']").size();i++)
            {
                if($(this).attr("id")!=$("a[title='nav']").eq(i).attr("id"))
                   $("a[title='nav']").eq(i).removeClass("hover");
                else
                    $("a[title='nav']").eq(i).addClass("hover");
            }
    });
<a href="#" id="nav1" title="nav" class="hover" onfocus="this.blur();">nav1</a>
<a href="#" id="nav2" title="nav" onfocus="this.blur();">nav2</a>
<a href="#" id="nav3" title="nav" onfocus="this.blur();">nav3</a>
<a href="#" id="nav4" title="nav" onfocus="this.blur();">nav4</a>
//下面是收起和打开的样式
$(".Thand").click(function(){            $(this).next().css("display",$(this).next().css("display")=="block" ? "none":"block");
    });
<h2 class="Thand"><span>公司介绍</span><a href="#">open</a></h2>
    <div class="infobox">
        <dl>
            <dt><img src="../images/index_bg1.gif" name="logo"  id="logo" width="300"/></dt>
            <dd>
            公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息
          公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息
            公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息
            公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息
         公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息公司介绍信息
            </dd>
       </dl>
   </div>

或者看这个:http://www.cnblogs.com/mzoylee/archive/2010/01/07/1641307.html --------------------编程问答--------------------

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#mm').menu();
$('#aa1').click(function(){
$('#mm').menu('show',{
left:10,
top:30
});
});

$('#aa2').click(function(){
$('#mm').menu('hide');
});
});    
</script>
</head>
<body style="margin:0;padding:10px;">
<a href="#" id="aa1">显示</a> <a href="#" id="aa2">隐藏</a>
<div id="mm" style="width:120px;">
  <div>新建</div>
  <div> <span>打开</span>
    <div style="width:150px;">
      <div><b>Word文档</b></div>
      <div>Excel文档</div>
      <div>PowerPoint文档</div>
    </div>
  </div>
  <div icon="icon-save">包存</div>
  <div class="menu-sep"></div>
  <div>退出</div>
</div>
</body>
</html>


使用说明
HTML代码
<div id="mm" style="width:120px;">  
        <div>New</div>  
        <div>  
                <span>Open</span>  
                <div style="width:150px;">  
                        <div><b>Word</b></div>  
                        <div>Excel</div>  
                        <div>PowerPoint</div>  
                </div>  
        </div>  
        <div icon="icon-save">Save</div>  
        <div class="menu-sep"></div>  
        <div>Exit</div>  
</div>  

 
JQuery创建一个菜单
 
$('#mm').menu(options);  

 
 菜单定位
$('#mm').menu('show', {   
  left: 200,   
  top: 100   
});
    --------------------编程问答-------------------- jquery menu
很全。
http://apycom.com/#

或者自己去搜搜吧,“jquery menu” 或者是”js menu“
补充:.NET技术 ,  ASP.NET
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,