专栏首页小白程序猿layui响应式导航(菜单)

layui响应式导航(菜单)

今天来分享一套自己写的layui响应式导航栏菜单,网络上搜索无果,只能自己写了,现在分享出来。

一、layui介绍

layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。layui 首个版本发布于2016年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。

二、效果展示

1、PC端

2、平板端

3、移动端

4、菜单展开效果

三、代码展示

1、html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="./css/layui.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="header">
    <div class="layui-container">
        <div class="logo">
            <a href="" title="Layui">Layui</a>
        </div>
        <i class="layui-icon layui-icon-app mobile-icon"></i>
        <div class="nav">
            <ul class="layui-nav">
                <li class="layui-nav-item layui-this"><a href="">网站首页</a></li>
                <li class="layui-nav-item"><a href="">产品</a></li>
                <li class="layui-nav-item"><a href="">活动</a></li>
                <li class="layui-nav-item"><a href="">资讯</a></li>
                <li class="layui-nav-item"><a href="">专题</a></li>
                <li class="layui-nav-item"><a href="">大数据</a></li>
                <li class="layui-nav-item"><a href="">社区</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="layui-container main">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
            <div class="demoBox">this is a demo box</div>
        </div>
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
            <div class="demoBox">this is a demo box</div>
        </div>
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
            <div class="demoBox">this is a demo box</div>
        </div>
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
            <div class="demoBox">this is a demo box</div>
        </div>
        <div class="layui-col-xs12 layui-col-sm6 layui-col-md4">
            <div class="demoBox">this is a demo box</div>
        </div>
    </div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="layui.js"></script>
<script>
 //JavaScript代码区域
 layui.use(['element', 'layer'], function () {
        var element = layui.element;
 var layer = layui.layer;

 });
 $(".mobile-icon").click(function () {
       $(".nav").toggleClass('layui-show');
 });
</script>
</body>
</html>

2、css代码

.header{
    background-color: #393D49;
    width: 100%;
    height: 60px;
}
.header .logo{
    width: 200px;
    height: 60px;
    float: left;
    text-align: center;
}
.header .logo a{
    font-size: 50px;
    color: #FFF;
    line-height: 60px;
}

.header .nav{
    float: left;
}
.mobile-icon{
    display: none;
}

/* 演示元素 */
.main{
    margin-top: 20px;
}
.demoBox{
    background-color: #2E2D3C;
    text-align: center;
    height: 100px;
    width: 100%;
    color: #FFF;
    font-size: 30px;
    line-height: 100px;
}
@media screen and (max-width: 1024px) {
    .header .logo{
        text-align: left;
    }
    .header .nav{
        display: none;
        width: 100%;
        position: absolute;
        z-index: 99;
        top: 61px; /* 如果需要缝隙,可将值调至61px */
        margin-left: -15px;
    }
    .layui-nav{
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    .header .nav li{
        width: 100%;
        text-align: center;
    }
    .mobile-icon{
        display: block;
        color: #FFF;
        font-size: 30px;
        float: right;
        margin-top: 15px;
    }
    .layui-nav .layui-this:after,
    .layui-nav-bar,
    .layui-nav-tree .layui-nav-itemed:after {
        height: 1px;
        background-color: #5FB878;
    }
}

四、代码下载

下载地址:https://gitee.com/ay2977/layui_responsive_navigation

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 登录-Thinkphp5.1开发后台管理系统

    将config目录下的app.php文件(thinkphp5.1版本核心配置文件)内的路由配置项设置为开启状态;

    申霖
  • JQ实现倒计时功能

    使用JQ实现发送短信或阅读倒计时效果,结合bootstrap框架。直接上效果图:

    申霖
  • Thinkphp+layui动态表格的使用

    今天早上想将后台中的表格部分使用layui的动态表格模块来实现,早上简单的看了下手册,晚上回家详细的看了手册,写了代码,实现了功能。下面直接上代码及效果图:

    申霖
  • thymeleaf中使用layui

    头部引入css,尾部引入js,定义两个模板(一个也可以,里面的碎片分开写,我喜欢写两个分别引入),注意th:fragment,fragment即碎片,可以在模板...

    小尘哥
  • SSM框架结合LayUi文件上传模块接入COS对象存储服务

    在日常项目开发中经常会用到图片,视频等文件存储的操作,但是文件如果一直存放在本地服务器中,可以会导致资源浪费,且访问速度也有所限制,这时我们就会考虑CDN加速或...

    sr
  • 表单数据验证方法(一)—— 使用validate.js实现表单数据验证

     好久没写博客了,真的是罪过,以后不能这样了,只学习不思考,学的都是白搭,希望在博客园能记录下自己学习的点滴,虽然记录的都是些浅显的技术,但能起到巩固自己和稍...

    CherishTheYouth
  • 总结一下laravel中Hash::make()遇到的坑

    ==这里遇到的坑就是laravel框架中,每次hash的值都是不一致的,跟之前写过的md5不一样,md5是唯一的,但是只要保存进去了,就算hash以后的值是不一...

    一个淡定的打工菜鸟
  • Git示例教程 - 命令别名

    对于那些经常使用的,或者是特别复杂的Git命令,我们可以为其设置别名,这样在我们想要执行对应的Git命令时,只要执行这个别名命令就好了,简单方便。

    wangyuntao
  • Git 代码统计

    当我们一起维护一个开源项目的时候,你肯定想知道那些人比较活跃,哪些人贡献比较多。这时候就需要一个简单易用的工具,下面我来介绍几款好用工具。

    猿哥
  • QQ大数据推荐系统的架构演进

    前言:3月24号,由iTechClub华南分会和腾讯SNG数据中心联合举办的“腾讯QQ大数据与AI应用”沙龙在腾讯大厦圆满举行。此文为分享主题 “QQ大数据推荐...

    腾讯QQ大数据

扫码关注云+社区

领取腾讯云代金券