单击展开关闭导航菜单

js导航菜单左侧竖纵向二级导航菜单可点击展开与收缩子菜单 立即下载

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 runat="server">
    <title></title>
    <style type="text/css">
   body
{
   font-family: arial, 宋体, serif;
   font-size:14px;
   top: 0px;
   left: 0px;
}
#nav {
  line-height: 32px;
  list-style-type: none;
  width: 520px;
  }
#nav a {
 display: block; width: 85px; text-align:center;
}
#nav a:link  {
  text-decoration:none;
}
#nav a:visited  {
 text-decoration:none;
}
#nav a:hover  {
 text-decoration:none;font-weight:bold;
}
#nav li {
 float: left; width: 85px;
}

#nav li ul {
 line-height: 32px;  list-style-type: none;text-align:left;
 left: -999em; width: 180px; position: absolute;
}

#nav li ul a:hover  {
text-decoration:none;font-weight:lighter;

}
#nav li:hover ul {
 left: auto;
}
#nav li.sfhover ul {
 left: auto;
}
#content {
 clear: left;
}

</style>
    <script src="Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $('#nav li').click(function () {
            $('#nav li ul').slideToggle('medium');
        })
    })

</script>
  
   
    </head>
<body>
    <form id="form1" runat="server">
     <div id="content">
     <ul id="nav">
   <li> <a>歌曲</a>
   <ul>
   <li><a>华语</a></li>
   <li><a>英文</a></li>
   <li><a>粤语</a></li>
   <li><a>嘻哈</a></li>
   <li><a>摇滚</a></li>
   </ul>
   </li>
   <li> <a>电影</a>
   <ul>
   <li><a>喜剧</a></li>
   <li><a>动作</a></li>
   <li><a>枪战</a></li>
   <li><a>惊悚</a></li>
   <li><a>恐怖</a></li>
   </ul>
   </li>
    <li> <a>电视剧</a>
   <ul>
   <li><a>苦情</a></li>
   <li><a>爱情</a></li>
   <li><a>亲情</a></li>
   <li><a>喜剧</a></li>
   <li><a>室内</a></li>
   </ul>
   </li>
    <li> <a>动漫</a>
   <ul>
   <li><a>热血</a></li>
   <li><a>冒险</a></li>
   <li><a>萌系</a></li>
   <li><a>搞笑</a></li>
   <li><a>青春</a></li>
   </ul>
   </li>
    <li> <a>纪录片</a>
   <ul>
   <li><a>自然</a></li>
   <li><a>社会</a></li>
   <li><a>军事</a></li>
   <li><a>人物</a></li>
   <li><a>文化</a></li>
   </ul>
   </li>
    <li> <a>综艺</a>
   <ul>
   <li><a>播报</a></li>
   <li><a>访谈</a></li>
   <li><a>游戏</a></li>
   <li><a>选秀</a></li>
   <li><a>时尚</a></li>
   </ul>
   </li>
     </ul>
     </div>
    </form>
</body>
</html>

左边menu导航条,关闭状态只显示缩略图标,用户可以点击图标进行快速切换,在左侧导航栏向右滑动,将打开导航 立即下载

相关推荐

侧边栏分类菜单控件(leftmenu)

侧边栏分类菜单控件(leftmenu)源码,非常使用,在很多软件中都用到

关闭虚拟按键导航栏方法一

目录:frameworks/base/core/res/res/values/dimens.xml 修改前 <dimen name="toast_y_offset">64dip</dimen> <!-- Height of the status bar --> <dimen name="status_bar_height">24dp</dimen> <!-- Height of the bottom navig

xuangelouzhu的博客 808

jquery实现点击向下展开菜单项(伸缩导航)效果

本文实例讲述了jquery实现点击向下展开菜单项(伸缩导航)效果。分享给大家供大家参考。具体如下: 这里演示基于jquery打造的向下展开的多级导航条效果,纵向垂直排列,风格非常的简洁,鼠标点击时候展开菜单的二级项,再次点击的时候又向上合拢,平时只显示一级菜单,二级菜单是隐藏不显示的,代码简洁,包括了完整的JS、css和jquery部分。 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-show-hidden-style-menu-codes/ 具体代码如下: <html> <head> <title>可折叠展开导航条</

jQuery 导航栏展开关闭效果

&lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;&lt;/title&gt;         &lt;style type="text/css"&gt;             *{   

qq_42467563的博客 1017

菜单栏的展开&关闭

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术:VS、jQuery 作者:#33 撰写时间:撰写时间:2019年05月28日 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 运用jQuery方法实现(使用前引入插件):点击按钮(如功能...

weixin_44484621的博客 1404

单击时下滑

(全部用字体大小10) 首先先了解单击时的逻辑。 单击时被单击标签下滑展开 其他标签上滑消失 如下图 二,开始,先写它的body也就是ul和li的组合 (这里的样式style只用显示一个li就可以其他全部隐藏) <ul class="menu"> <li> <a href="#" class="level1">手机</a> <ul class="cur...

weixin_57763240的博客 262

extjs5相关典型特效的实现

这里写一些具体特效的实现,这个框架主要用于做比较复杂的企业管理系统,外层的框架搭建好后,开发只需要关注center部分的界面和业务逻辑即可,所以我介绍一些框架的一些实现; 外围框架的特效影响到整体的用户体验,做好后使用起来很爽,否则总会感觉蛋疼,本例程center区域支持iframe和...

chuseniao4475的博客 175

jquery实现菜单功能(单击展开或者关闭)-一般应用于后台

jquery实现菜单功能(单击展开或者关闭)-一般应用于后台 .bor{border:10px solid yellow;} .red{color:red;} $(document).ready(function(e) { //class=menu的h1的下一个元素:无类型 $('h1.menu').next().css('display','none');

926

20个优秀JavaScript导航菜单

<br /><br />JavaScript允许你在网页中添加交互和反馈,使得用户体验更棒也更直观。本文将为大家介绍20个基于JavaScript的导航菜单。要记住如果客户端浏览器关闭了JavaScript(平均有5%的用户通过W3 web statistics关闭了JS),这些技巧中的几个可能不能正常工作。<br />在这篇文章中,你将发现一些非常棒的、独特的JavaScript导航技巧和实例。点击图片直接跳转到导航菜单演示页面,点击该菜单名称则跳转到其开发项目组网页上。<br />1. MenuMati

2768

分层导航:手风琴菜单

“Accordion” menus are vertically-oriented navigational menus that contain further vertical sub-menus inside them, revealed with a click or a mouse-over on their parent elements. Accordion menus are so...

cungui5726的博客 500

win11 右键关闭显示更多选项 修改右键菜单

win11 右键关闭显示更多选项 修改右键菜单

qq_43530326的博客 5998

vue中将div展开收起_在Windows 7中将导航窗格树设置为自动展开

vue中将div展开收起In Windows 7, when you double-click or press Enter on folders in the right pane of Windows Explorer to open them, the folder tree in the left pane (the navigation pane) does not automatica...

365

怎么在html5中制作下拉导航栏,在PPT2016中怎么制作下拉式导航菜单

通过展开下拉列表方式实现快速切换。因此要提高类似条块化内容PPT切换速度,我们也可以在PPT2016制作类似网页的下拉菜单。以下是学习啦小编为您带来的关于在PPT2016中制作下拉式导航菜单,希望对您有所帮助。在PPT2016中制作下拉式导航菜单因为类似网页的导航菜单需要出现在所有幻灯片中,我们可以通过在母版中进行设置。新建一个演示文档,点击“视图→幻灯片母版”进入到母版视图。按下“Ctrl+A”...

weixin_31688465的博客 566

导航栏手机适配下,点击按钮出导航栏,点击×关闭导航栏

<div class="header2"> <a href="<?php echo base_url('#') ?>"> <img src="<?php echo base_url('resource/images/logo.png') ?>"> </a> ...

zhangzhuo1130的博客 423

axure 侧滑抽屉式菜单_AxureRP教程

前面介绍的《AxureRP教程–自适应菜单效果》里的自适应菜单,其实也可以叫做抽屉式菜单,皆因其可展开可收缩,类似抽屉的开关,不过自适应菜单有空间大小的显示,这里介绍的则没有大小限制,完全取决于菜单项的多少。抽屉式菜单网上也有很多朋友尝试制作过,在这里我自己也尝试了一下,做了一个三级菜单的抽屉式效果。抽屉式菜单应用的比较广,一般常见于左侧的导航菜单。本例的实现原理是用一个动态面板来控制一级菜单,...

weixin_29149931的博客 1032

jquery 后台管理菜单展开关闭实例(1)

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS</title> <style> ul,li{margin:0; padding:0; list-style:non...

weixin_30709635的博客 146
上一篇: 可滑动展开折叠的jQurey简洁信息导航菜单
下一篇: 在一定时间内关闭的广告窗口
李赫
博客等级 码龄15年 6粉丝 31原创
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值