菜单设置：点击第一级菜单，第二级菜单在下方出现，并且下方的一级菜单自动下移

html代码：

<body><div><ul class="main"><li class="nav"><a href="#">文创商户</a><ul class="navcontent"><li style="margin-top:10px">文创商户01</li><li>文创商户02</li><li>文创商户03</li></ul></li><li class="nav"><a href="#">特色餐饮</a><ul class="navcontent"><li style="margin-top:10px">特色餐饮01</li><li>特色餐饮02</li><li>特色餐饮03</li></ul></li><li class="nav"><a href="#">后台专区</a><ul class="navcontent"><li style="margin-top:10px">搜索优化</li><li>CSS专区</li><li>ASP专区</li></ul></li></ul></div>
</body>

css代码：

    <style type="text/css">*{margin: 0px;padding: 0px;font-size: 14px;}ul{list-style: none;}.main{margin: auto;margin-top: 40px;position: relative;width: 100px;min-width: 50px;height: 200px;}.main .nav{width: 100px;margin: 0px auto;margin-top: 10px;}.main .nav a{width: 100px;height: 50px;line-height: 3.5;text-align: center;text-decoration: none;background-color: red;display: block;color:Black;font-weight:bold;}.navcontent{padding-left: 0;padding-top: 0;margin-top: 0;list-style: none;overflow: hidden;text-align: right;margin-bottom: 1px;text-align: center;transition: all .4s ease-out;height: 100%;}.navcontent li{border-radius: 2px;position: relative;display: inline-block;margin-left: 35px;line-height: 3.5;height:50px;width: 100%;margin: 0;margin-bottom: 10px;transition: background 3s;box-shadow: 2px 2px 10px -2px rgba(0,0,0,.35);background-color: rgba(0,0,0,0);color:Black;font-weight:bold;}.main .nav .navcontent{display: none;}</style>

JavaScript代码：

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">$(document).ready(function () {var navs = $(".nav");var navcontents = $(".navcontent");var navlen = navs.length;$(".nav a").click(function () {if ($(this).siblings().css("display") == "none") {$(this).siblings().css("display", "block")}else {$(this).siblings().css("display", "none")}})})
</script>

效果如下：

点击后：

菜单设置：点击第一级菜单，第二级菜单在下方出现，并且下方的一级菜单自动下移相关推荐

计算机右键菜单太多,电脑鼠标右键菜单太多了怎么办？Windows右键菜单设置删除方法介绍...
随着电脑中所安装的程序越来越多,右键菜单中的选项也都随着多了起来.这虽然说对我们使用电脑没有什么太大的影响,但是看着如此多的没用的右键菜单也是烦烦的,那么,电脑桌面右键菜单怎么清除多余的选项呢?对此, ...
实例：用C#.NET手把手教你做微信公众号开发（9）--菜单设置
一.菜单定义先看个直观的图,菜单在公众号的底部,当一个公众号没有设置菜单时是看不到的,设置之后就是下面的样子. 注意事项: 自定义菜单最多包括3个一级菜单,每个一级菜单最多包含5个二级菜单. 一级菜 ...
Android实现侧滑抽屉菜单,android studio自带的抽屉侧滑菜单怎么设置点击事件？还头一回遇到，汗！...
在你的activity,你需要inflate 你的menu folder@Override public boolean onCreateOptionsMenu(Menu menu) { MenuIn ...
微信公众号自定义菜单设置管理
微信开发时候如果按照接口调试工具进行自定义菜单的设置非常麻烦而且容易出错,尤其是使用测试号进行测试的时候,由于测试后没有自定义菜单的设置功能,我们可以自己封装一个自定义菜单的方法对其进行自定义菜单的设 ...
Java微信公众号服务号开发（四）：公众号底部菜单设置
今天来说一下微信公众号底部的菜单设置设置更改公众号底部的菜单有两种方式:1.通过Java代码调取微信提供的接口进行设置. 2.直接在微信公众号平台用json数据设置. 这两种方式都比较简单.个人采取 ...
Php公众号自定义菜单设置,教你设置微信公众号自定义菜单！，来看看吧
很多微信公众号都添加了自定义菜单,订阅用户点击菜单可以跳转到历史文章,或者会即刻发送一条信息等等.那么这是怎么做到的呢?别着急,下面就告诉你详细的设置方法. 工具/材料小蚂蚁Page页面模板微信公 ...
Java Excel省市区级联菜单设置
主要解决使用POI写excel,并且添加数据校验,以及省市区级联菜单设置,分Excel2003与Excel2007两个版本. 关于POI与Excel之间的一些关系,以及设计方面的一些思想说明: Jav ...
BOS项目02_02_zTree-通过ajax的获取菜单数据、监听树形菜单的点击事件、读取json文件、Ajax获取数据
系列文章目录文章目录系列文章目录前言一.发送ajax网络请求获取菜单数据二.监听树形菜单的点击事件总结前言一.发送ajax网络请求获取菜单数据我们现在的数是写死的,那么实际项目中我们 ...
左边菜单，点击左边右边内容改变
作为新手, 拿到真的很棘手. 很多人想到的是用iframe, 其实我的第一感也是, 但是好像iframe正在被淘汰, 所以一直在寻找新方法.. 当然, 我还是先把iframe方法贴出来, 这个方法是 ...
CrapApi接口管理系统菜单设置
其他链接:免费VPN推荐 VPN使用帮助 API接口管理 CrapApi帮助文档 API接口管理感谢使用CrapApi应用接口管理系统! 一个由anjularjs+bootstrap+sprin ...

菜单设置：点击第一级菜单，第二级菜单在下方出现，并且下方的一级菜单自动下移

菜单设置：点击第一级菜单，第二级菜单在下方出现，并且下方的一级菜单自动下移相关推荐

最新文章

热门文章