jQuery做简单的下拉菜单
效果:
css 代码
<style>* {margin: 0;padding: 0;}li {list-style-type: none;}a {text-decoration: none;font-size: 14px;}.nav {margin: 100px;}.nav>li {position: relative;float: left;width: 80px;height: 41px;text-align: center;}.nav li a {display: block;width: 100%;height: 100%;line-height: 41px;color: #333;}.nav>li>a:hover {background-color: #eee;}.nav ul {display: none;position: absolute;top: 41px;left: 0;width: 100%;border-left: 1px solid #FECC5B;border-right: 1px solid #FECC5B;}.nav ul li {border-bottom: 1px solid #FECC5B;}.nav ul li a:hover {background-color: #FFF5DA;}</style>
html 结构
<ul class="nav"><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">评论</a></li><li><a href="">@我</a></li></ul></li></ul>
js代码
<script src="jquery.min.js"></script>$(function () {$('.nav>li').mouseover(function () {$(this).children('ul').show()}).mouseout(function () {$(this).children("ul").hide()})$('.nav>li').hover(function(){$(this).children('ul').slideToggle()})})
jQuery做简单的下拉菜单相关推荐
- jquery实现简单的下拉菜单
本文用简单的几行jquery代码实现简单的下拉菜单效果 看效果 html <ul><li>主题市场<ul><li>运动派<ul><li ...
- 利用jQuery制作的导航下拉菜单效果
利用jQuery制作的导航下拉菜单效果,其实利用css同样可以实现导航下拉菜单效果,但自从学习了jQuery后,感觉还是jQuery做起来效果更好.jQuery制作导航下拉菜单,需要用到jQuery方 ...
- 无限级导航PHP,jQuery多级无限级导航下拉菜单代码
jQuery多级无限级导航下拉菜单代码 js代码 $(document).ready(function() { $("ul.nav li").hover(function(){ $ ...
- qml中使用combobox实现多级菜单_Excel教程:还不会做Excel三级下拉菜单?其实它跟复制粘贴一样简单...
关注回复[目录]学习113篇Excel教程 全套Excel视频教程,扫码观看 编按: 哈喽,大家好!说到做下拉菜单,小伙伴们都知道直接使用Excel中的数据验证就可以实现,但是二级.三级,甚至更多级的 ...
- jquery实现二级导航下拉菜单效果实例
大家都知道jQuery是一个框架,它对JS进行了封装,使其更方便使用.前面两篇博文分别是用CSS样式和JS实现的,那么这篇就用jQuery来实现二级下拉式菜单. 使用JQuery实现需要用到的知识有: ...
- jquery实现二级导航下拉菜单效果
大家都知道jQuery是一个框架,它对JS进行了封装,使其更方便使用.前面两篇博文分别是用CSS样式和JS实现的,那么这篇就用jQuery来实现二级下拉式菜单. 使用JQuery实现需要用到的知识有: ...
- web下拉列表代码_你做的Excel下拉菜单已Out,更好用的多列显示来了
在excel中设置下拉菜单很简单,直接用数据有效性-序列就可以实现. 今天我们介绍的下拉菜单: 可以显示多列内容 选取后只输入其中一列的内容. 制作步骤: 一. 生成多列下拉列表 1.添加辅助列,用& ...
- js实现简单的下拉菜单列表
下拉菜单 效果图: 基本代码 如下: <!DOCTYPE html> <html><head><meta charset=</
- 利用JavaScript实现简单的下拉菜单
最近几日,突然对Javascript非常兴趣,就想用Javascript实现几个经常都实现的特效,虽然对于javascript一直能够做一些开发,但还是使用很少. 首先我想实现的就是一个下拉样式的树, ...
最新文章
- 菜鸟初涉SQL Server的总结
- PLSQL_海量数据处理系列3_索引
- C++cycle sort循环排序的实现算法(附完整源码)
- MongoDB副本集配置系列四:节点的关闭顺序
- Oracle一定有sqlplus吗,oracle sqlplus执行sql文件
- Struts 2的OGNL表达式
- 上的img表示什么_方向盘上的SET、RES和CNL,表示什么意思?别弄错了
- Spring Boot 之spring.factories
- 小汤学编程之JAVA基础day09——常用类(一):比较器、内部类和包装类
- nginx的目录结构和配置文件
- Spring MVC-页面重定向示例(转载实践)
- rk3288对于parameter参数文件的解析处理【转】
- java文件字节流和文件字符流的使用
- 如何使用GetParent来得到父对话框的指针
- 【android】apk在线升级
- MyBatis generator 注解方式和xml方式
- 过cloudflare,使用cfscrape,以及cfscrape挂代理的方式
- python 共享内存 c_python共享内存 - DK's Blog - 博客园
- MAC OS无法开机问题解决
- 2022年版中国煤矿安全设备市场投资规划及需求前景预测报告