利用.net控件实现下拉导航菜单制作的具体方法

今天的一个小测试是老师让用.NET用控件来制作一个拉菜单要求如下:
将鼠标移到父菜单上弹出3个子菜单,而且每个子菜单都有超链接。
以下是我自己做的代码:


代码如下:

<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" Width="100%"
            Font-Size="14px" ForeColor="#161621" Font-Bold="True"
            PathSeparator="1" StaticEnableDefaultPopOutImage="False"
            >
                <DynamicMenuStyle BackColor="#D0E6DE" />
                <DynamicMenuItemStyle ItemSpacing="5px" />
                <Items>
                        <asp:MenuItem Text="IT从业" Value="IT从业" NavigateUrl="~/Introduce.aspx?id=1"></asp:MenuItem>
                        <asp:MenuItem Text="IT从业" Value="NavigateUrl="~/Introduce.aspx?id=2"></asp:MenuItem>
                        <asp:MenuItem Text="IT从业" Value="IT从业" NavigateUrl="~/PIntroduce.aspx?id=1"></asp:MenuItem>
                        <asp:MenuItem Text="IT从业" Value="IT从业" NavigateUrl="~/PIntroduce.aspx?id=2"></asp:MenuItem>
                    </asp:MenuItem>
                    <asp:MenuItem Text="IT从业" ValueNavigateUrl="~/News.aspx"></asp:MenuItem>
                    <asp:MenuItem Text="IT从业" Value="IT从业" NavigateUrl="~/Product.aspx?id=1">
                        <asp:MenuItem Text="IT从业" Value="IT从业" NavigateUrl="~/Product.aspx?id=0"></asp:MenuItem>
                        <asp:MenuItem Text="IT从业" Value="IT从业" NavigateUrl="~/Product.aspx?id=1"></asp:MenuItem>
                    </asp:MenuItem>
                    <asp:MenuItem Text="IT从业" Value="IT从业" NavigateUrl="~/Message.aspx"></asp:MenuItem>
                    <asp:MenuItem Text="IT从业" Value="IT从业" NavigateUrl="~/Download.aspx"></asp:MenuItem>
                    <asp:MenuItem Text="在线联系 " Value="在线联系" NavigateUrl="~/Content.aspx"></asp:MenuItem>
                </Items>
            </asp:Menu>

(0)

相关推荐

  • 利用.net控件实现下拉导航菜单制作的具体方法

    今天的一个小测试是老师让用.NET用控件来制作一个拉菜单要求如下: 将鼠标移到父菜单上弹出3个子菜单,而且每个子菜单都有超链接. 以下是我自己做的代码: 复制代码 代码如下: <asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" Width="100%"             Font-Size="14px" ForeColor=&

  • Qt qml中listview 列表视图控件(下拉刷新、上拉分页、滚动轴)

    Qt qml listview下拉刷新和上拉分页主要根据contentY来判断.但要加上顶部下拉指示器.滚动条,并封装成可简单调用的组件,着实花了我不少精力:) 先给大家展示下效果图: [功能] 下拉刷新和上拉分页逻辑 /下拉刷新 /上拉更多 /滚动栏 /工具栏半拉显隐 Author: surfsky.cnblogs.com Lisence: MIT 请保留此文档声明 History: init. surfsky.cnblogs.com, 2015-01 add initPosition pro

  • Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)

    这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单 输入过滤框 以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级关系,就一定会用到树形组件了. 使用Vue + Element UI,构建出最基本的树如下图所示: 现在我们就要在这个基础上进行改造,使页面更加符合我们的交互场景. 下拉菜单 将下拉菜单嵌到树节点中,使操作更加简便.紧凑. 效果演示 效果如图: 图示1:悬浮在树节点状态 图示2:点击三个点图标状态

  • js+div+css下拉导航菜单完整代码分享

    效果预览:http://keleyi.com/keleyi/phtml/menu/1.htm 下拉菜单 js+div+css下拉导航菜单完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w

  • 使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效

    这是一款仿windows10开始菜单的下拉导航菜单特效.该下拉菜单使用jQuery和CSS3来完成类似windows10开始菜单样式效果,它的代码简洁,效果非常时尚. 查看演示      源码下载 该下拉菜单的HTML结构非常简单,基本的HTML结构如下: <div id="top-bar" class="top-bar"> <div class="bar"> <button id="navbox-trig

  • jQuery实现淡入淡出二级下拉导航菜单的方法

    本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquery-1.6.2版本的JS,鼠标移动到包括二级子菜单的主菜单上,会立即渐显出二级的子菜单,鼠标在二级子菜单上划过,子菜单项的背景会改变. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-in-out-nav-menu-codes/ 具体代

  • JS+CSS实现简单的二级下拉导航菜单效果

    本文实例讲述了JS+CSS实现简单的二级下拉导航菜单效果.分享给大家供大家参考.具体如下: 这是一款CSS配合JavaScript实现二级下拉导航菜单,好像CSS要配合JS才能写出好效果来,本款菜单同样用到了JS,菜单目前支持两级,下拉导航是我们经常用的一种菜单形式,把这个修改一下你就能用了,结构挺简单,相信你会做好的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-2l-fade-down-menu-codes/

  • Android使用 Spinner控件实现下拉框功能

    Spinner是android的一种控件,用它我们可以实现下拉框. 我们先来看一下效果图 这是一个很简单的功能,上面一个TextView,下面一个Spinner,TextView用于显示Spinner选择的选项. 下面我们就来看一下实现吧. 首先,我们先在xml文件中将spinner写出 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://s

  • jQuery实现简单下拉导航效果

    本文实例讲述了jQuery实现简单下拉导航效果.分享给大家供大家参考.具体如下: 这里粗略做一款基于jquery的下拉导航菜单效果,我觉得挺不错,虽然没有怎么美化,但是代码易懂,另外修补的空间也比较大,相信对学习CSS以及jquery的朋友有不小的帮助. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-xl-down-show-nav-codes/ 具体代码如下: <!DOCTYPE HTML> <html> <

  • JS实现灵巧的下拉导航效果代码

    本文实例讲述了JS实现灵巧的下拉导航效果代码.分享给大家供大家参考.具体如下: 这是一款基于JS实现下拉菜单,是一款灵巧的网站导航条,支持二级显示,向下滑动显示,经典的下拉菜单,JS和CSS共同编写实现,Li菜单列表风格,便于修改,兼容各大主流浏览器,相信你也会喜欢的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-down-nav-blue-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC

随机推荐