jQuery 实现菜单
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>垂直菜单</title><style>要注意的:/*1. 不要直接给li设置padding,可以在这样导致border也跟着变小可以考虑在li中嵌入标签解决2.在插入图片时，li的高度最好等于图片本身高度，不然下拉背景会溢出*/body,html,ul {padding: 0;margin: 0;}ul {list-style-type: none;}ul li {border-bottom: solid 1px gray;background: #EEEEEE;}a {text-decoration: none;color: black;padding-left: 20px;}.menu {margin: 30px auto;}.main {/*background: url(main_bg.png);*/background: -webkit-linear-gradient(left, gray, black);background-color: #EEEEEE;line-height: 37px;width: 200px;background-repeat: repeat-x;position: relative;}.main ul li {/*margin-left: -20px;*//*padding-left: 30px;*/}.main ul {display: none;}.main span {display: block;border: 7px solid white;border-bottom: 7px solid transparent;border-right: 7px solid transparent;border-top: 7px solid transparent;width: 0;height: 0;position: absolute;top: 11px;left: 6px;}.menu.horizontal {}.menu.horizontal .main {float: left;}.menu.horizontal:after {content: '';display: block;overflow: hidden;clear: both;}</style><script src="../jquery-2.2.4.min.js"></script><script>$(window).load(function() {$('.main').on('click', function() {var _this = $(this);_this.children('ul').slideToggle();});$('.horizontal .main').hover(function() {var _this = $(this);_this.children('ul').slideDown();},function(){var _this = $(this);_this.children('ul').slideUp(); });})/*判断并改变图片*/function changeIcon(mainNode){if(mainNode){if(mainNode.css('background-image').indexOf('ag.png')>=0){mainNode.css('background-image','url(../../1.png)')}else{}}}</script></head><body><div class="containner"><ul class="menu"><li class="main"><span></span> <a href="#">主菜单1</a><ul><li><a href="#">菜单1</a></li><li><a href="#">菜单2</a></li><li><a href="#">菜单3</a></li></ul></li><li class="main"><span></span> <a href="#">主菜单2</a><ul><li><a href="#">菜单1</a></li><li><a href="#">菜单2</a></li><li><a href="#">菜单3</a></li></ul></li><li class="main"><span></span> <a href="#">主菜单3</a><ul><li><a href="#">菜单1</a></li><li><a href="#">菜单2</a></li><li><a href="#">菜单3</a></li></ul></li></ul><br/><ul class="menu horizontal"><li class="main"><span></span> <a href="#">主菜单1</a><ul><li><a href="#">菜单1</a></li><li><a href="#">菜单2</a></li><li><a href="#">菜单3</a></li></ul></li><li class="main"><span></span> <a href="#">主菜单2</a><ul><li><a href="#">菜单1</a></li><li><a href="#">菜单2</a></li><li><a href="#">菜单3</a></li></ul></li><li class="main"><span></span> <a href="#">主菜单3</a><ul><li><a href="#">菜单1</a></li><li><a href="#">菜单2</a></li><li><a href="#">菜单3</a></li></ul></li></ul></div></body></html>
转载于:https://www.cnblogs.com/yqlog/p/5583932.html
jQuery 实现菜单相关推荐
- 36个引人注目JQuery导航菜单
1.jQuery 选项卡界面 / 选项卡结构菜单教程 这种类型的菜单在网页设计与开发中非常著名的.此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单.要非常留心 ...
- jquery右键菜单
点击这里体验效果 如果要屏蔽页面原来的右键菜单,请设置disable_native_context_menu:true 以下是源代码: 1 <!DOCTYPE html> 2 <ht ...
- Java折叠_[Java教程]Jquery中菜单的展开和折叠
[Java教程]Jquery中菜单的展开和折叠 0 2018-08-15 16:03:38 标签内容 您好:alee 宿舍管理员 密码管理 修改密码 宿舍管理 学生宿舍查询 学生宿舍新增 学生宿舍分配 ...
- 10 个非常酷的基于jQuery的菜单效果插件
除了直观的界面效果外,炫酷的网站导航菜单或右键菜单也能为访问者带来眼前一亮的感觉.本文为你带来10个非常酷的基于jQuery的菜单效果插件. 1. 右击菜单 一个创建右击菜单的插件,简洁且易用. 源 ...
- jquery toggle_响应式WordPress主题教程–第6部分– jQuery Toggle菜单
jquery toggle 视频教程详细信息 名称 响应式WordPress主题教程–第6部分– jQuery Toggle菜单 描述 我们将继续在导航菜单上进行操作. 在这一部分中,我们写了一口jQ ...
- jquery折叠菜单、jquery侧边栏菜单、CSS侧边栏菜单
jquery折叠菜单.jquery侧边栏菜单.CSS侧边栏菜单 一.Jquery折叠菜单效果 二.jquery侧边栏菜单效果 三.CSS侧边栏菜单效果 先上代码 <!DOCTYPE html&g ...
- html jquery 菜单选中,jQuery树形菜单插件多级菜单选中代码
特效描述:jQuery 树形菜单插件 多级菜单选中.jQuery树形菜单插件,点击展开多级下拉菜单,点击选中菜单效果代码. 代码结构 1. 引入JS 2. HTML代码 打开 | 关闭 d = new ...
- jQuery一级菜单和二级菜单
1.先做一级菜单,第一步设置body,把大概样子写出来. 2.第二步-1.用css设置通配符. 3.第二步-2.设置ul标签基础样式 . 4.第二步-3.设置类样式. 5.设置jquery内容的第一步 ...
- JQuery Tab菜单的实现
2019独角兽企业重金招聘Python工程师标准>>> 一个tab面板 <div id="tab"> <div class="menu ...
- jQuery手机菜单
效果展示 http://hovertree.com/texiao/nav/4/ 手机扫描二维码查看效果: 源码下载 http://hovertree.com/h/bjaf/kroft6c7.htm 效 ...
最新文章
- glusterfs基本操作
- python写好的代码怎么给别人使用-10分钟学会用python写游戏！Python其实很简单！...
- Redis详解（一）------ redis的简介与安装
- 【教程】怎么同时同时ping1000个IP地址？
- 【通知】CCIE LAB北京考场9月1日起开放考试
- angularjs ajax header,angularJs/ajax跨域请求携带cookies
- 牛顿迭代法(Newton#39;s Method)
- 快准牌电脑发软件_做自媒体必备技能，视频剪辑软件排名（精品篇）
- springMVC整合swagger(亲自试验完全可用)
- java 泛型 上限_Java 泛型通配符上限和通配符下限
- python调用hive与java调用区别_python 调用hive查询实现类似存储过程
- html 字体思源_CSS3嵌入字体@font-face调用字体（思源宋体regula/PingFang SC/ttf/woff）...
- 计算机中的各种字符编码
- 网站流量模型(1)介绍
- 关于扫码签到统计信息，一键导出excel表
- 计算机局域网络具有哪些功能,局域网的功能有哪些
- 虎扑网站服务器垃圾,虎扑拿下域名hupu.com 游击队摇身一变正规军
- 苹果考虑推迟发布5G iPhone
- java字符串反转reverse();
- sklearn中StandardScaler()