利用layui来完成垂直和侧边导航的小案例

      利用layui来完成垂直和侧边导航的小案例

开发工具与关键技术：VS Layui
作者：沈金凤
年级：18级（4）班
撰写日期：2019年4月10日

Layui 是采用自身模块编写的前端UI的框架，有着原生的HTML/CSS/JS的书写和组织形式，初学者都可以从里面学到很多的东西，同样也可以拿来即用。还有就是它里面的方法极其简洁，却又不失饱满的内容，它体积轻盈，从核心代码到API的每一处细节都是经过精心的撰写出来的，是非常适合界面的快速的开发和使用。
layui导航一般是指页面引导性频道集合，大多数是以菜单的形式来呈现出来的，可以用于头部、垂直侧边和水平方面等等，是整个网页的画龙点睛般的存在。可以设置导航的目录有：水平导航、导航主题、垂直与侧边的导航、面包屑等等。
接下来就是我利用layui来完成垂直和侧边导航的案例,要完成这个案例首先得引用layui.css文件和 layui.all.js文件才可以，引用了这俩个文件之后就是写css的代码了，下面是在VS中编写的HTML：

从上图我们可以看出它是由一个大的ul标签来包裹着li标签，然后li标签中包裹a标签和dl标签，再然后a标签中包裹着span标签、dl标签中又包裹着dd标签，以此类推就可以完成了。
这两张图片中：第一张的第二行和第二张的最后一行就是layui.css文件和layui.all.js文件，还有就是layui.all.js必须放在HTML后面我曾试过把它放到layui.css文件下面结果是它没有引用成功。

下面是案例的效果图：

在浏览器中点击上图中的三角形按钮就会展现出隐藏在其中的内容如下图所示，再点击的时候就会恢复上图那样,而这样的效果是通过JS来完成的，JS中呢是通过display的属性的显示：display: block 和隐藏：display: none 等其他方式来实现这样的一个效果。

利用layui来完成垂直和侧边导航的小案例相关推荐

layui隐藏侧边栏_layui禁用侧边导航栏点击事件的处理方法
layui是一款优秀的前端模块化css框架.我用layui做过两个完整的项目,对她的感觉就是,这货非常适合做后台管理界面,且基于jquery,很容易上手.当然,她最大的优点我觉得还是她的模块化方式,相 ...
利用layui实现侧边导航栏
主要利用element模块插件实现侧边导航栏第一种展示的侧边导航栏是依据菜单展示的内容来展示其背景样式的 <link rel="stylesheet" type=" ...
layui框架学习（4：导航）
layui官网教程采用html中的无序列表和定义列表来实现导航样式(文章最后还有个关于导航所用元素的补充说明),主要包括水平导航.垂直/侧边导航,同时还支持用span和a元素实现面包屑导航样式.导 ...
Drag,drag,drag！拽出哔哩哔哩侧边导航组件
一.前言文章主要以宏观的形式来聊哔哩哔哩侧边导航拖拽组件,非常适合正在渐进式学习VUE的你,适当的模仿开发项目是前端学习必须要有的技能.大多数人都知道的是,面试需要有自己的作品,而作品最重要的不是切 ...
【源码分享】jquery+css实现侧边导航栏
jquery+css实现侧边导航栏最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...
利用layui前端框架实现对不同文件夹的多文件上传
利用layui前端框架实现对不同文件夹的多文件上传问题场景: 普通的input标签实现多文件上传时,只能对同一个文件夹下的多个文件进行上传,如果要同时上传两个或多个文件夹下的文件,是无法实现的.这篇 ...
html 下拉到一定位置,浏览器向下滚动到一定位置继续滚动时，侧边导航固定在页面顶部，再滚动到一定位置时页面再向下滚动侧边导航不再固定。这种效果怎么实现呢...
1.浏览器向下滚动到一定位置继续滚动时,侧边导航固定在页面顶部,再滚动到一定位置时页面再向下滚动侧边导航不再固定.页面向上滚动到一定位置继续滚动时,侧边导航保持在原来位置.这种效果怎么实现呢 2.. ...
【机器学习实践】Jupyter Notebook安装侧边导航栏功能操作及其他常用扩展功能介绍...
安装过程: 1. 首先我们引入jupyter_contrib_nbextension这个第三方库. 2. 在Anaconda Promot中输入命令: pip install jupyter_con ...
ldaptemplate 分页_UI设计干货分享：设计语言 - 侧边导航栏/分页
原文作者:罗耀_UI 侧边导航栏.分页.步骤条的绘制方法不管是做设计(感性)还是设计规范(理性),都是仁者见仁智者见智的,都很主观.我是想阐述出自己的想法供大家参考,文章中的数值也不是固定标准,还是 ...

利用layui来完成垂直和侧边导航的小案例

利用layui来完成垂直和侧边导航的小案例相关推荐

最新文章

热门文章