分类：导航菜单

2020
10-10

jQuery实现二级导航菜单的示例

实用JQ实现导航二级菜单效果，导航菜单在网站中非常常见，有的网站可能会出现三级菜单及多级菜单模式，下面我们来简单的实现一个二级菜单的效果。部分效果截图：整体代码：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>导航菜单案例</title><style>*{padding:0;margin:0;}ul,li{list-style:none;}a{text-decoration:none;}nav{... 继续阅读 >
2020
10-09

vue 导航菜单刷新状态不消失,显示对应的路由界面操作

vue 导航菜单刷新状态不消失,显示对应的路由界面操作 使用vueelement-ui框架构建公共导航栏（https://element.eleme.cn/#/zh-CN/component/menu）按F5刷新就会返回默认定义的路由，使用"$route.path"刷新后还是在最新的一个路由：<el-menu:default-active="$route.path"></el-menu>补充知识：vue动态菜单刷新空白解决方案1.先确认自己在route.js或者main.js中有没有使用路由守卫vue.beforeEach和vue.addRouters()促使页面每次刷新，重新根据后台返回数据生成动态路由，就... 继续阅读 >
2020
10-08

Element NavMenu导航菜单的使用方法

Element NavMenu导航菜单的使用方法 组件—导航菜单顶栏<el-menu:default-active="activeIndex"class="el-menu-demo"mode="horizontal"@select="handleSelect"><el-menu-itemindex="1">处理中心</el-menu-item><el-submenuindex="2"><templateslot="title">我的工作台</template><el-menu-itemindex="2-1">选项1</el-menu-item><el-menu-itemindex="2-2">选项2</el-menu-item><el-menu-itemindex="2-3">选项3</el-menu-item><el-submenuindex=... 继续阅读 >
2020
10-08

JS实现移动端可折叠导航菜单（现代都市风）

效果图1.html部分<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>index</title><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Open+Sans:400,700"rel="externalnofollow"><linkrel="stylesheet"href="css/style.css"rel="externalnofollow"></head><body><divclass="htmleaf-container"><divid="wrapper"><!--菜单--><divclass="menu"><imgi... 继续阅读 >
2020
10-08

vue实现导航菜单和编辑文本的示例代码

导航菜单实例<divid="main"><!--激活的菜单样式为active类--><!--为了阻止链接在点击时跳转，我们使用了"prevent"修饰符(preventDefault的简称)。--><navv-bind:class="active"v-on:click.prevent><!--当菜单上的链接被点击时，我们调用了makeActive方法,该方法在Vue实例中创建。--><ahref="#"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"... 继续阅读 >