学妹问我如何使用laravel写后台侧边栏模板，我笑了笑，然后给了她本秘籍。

Posted 2022-11-13 患孤

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了学妹问我如何使用laravel写后台侧边栏模板，我笑了笑，然后给了她本秘籍。相关的知识，希望对你有一定的参考价值。

前言

这次有个很漂亮的学妹问我怎么编写侧边栏模板，看着学妹那完美的面部轮廓，肤如软玉凝脂，眉如远山之黛，长而浓密的睫毛，直而英挺的鼻，薄而小巧的唇，一副精致绝伦的容貌。我本着助人为乐的精神勉为其难的写下了这篇文章。
上次我们完成了，数据库的搭建，那么接下来我们就可以来着手搭建博客网站了，那么这次我们来搭建博客的侧边栏。那么废话不多说我们接下来就来，就开始来敲代码。

编写侧边栏模板

新建public文件夹

我们在 resources 下面的views 新建一个pulic 来存储我们网站的公用模板，views 里面一般就是存储我们的网页文件，及html文件，我们所有网页文件都需要存储在这里，里面的后缀为 blade.php 这个于php 还有 html 都不太一样，这里需要注意一点，那么到这我们就可以，来编写侧边栏。

新建Sidebar.blade.php文件

那么接下来我们在public 文件夹下面新建一个Sidebar.blade.php文件，注意后缀面不要写错了，写错了的话便会报错，那么后面我们需要使用路由来看下，这个页面是否能够被访问到。

编写侧边栏路由

我们编写路由是在routes 文件夹下面的 web.php 文件下编写，那么我们接下来先随便在Sidebar.blade.php 文件下随便写点东西，那么接下来我们就可以编写路由。

//侧边栏路由
Route::get('/SideBar',function () 
    return view('public.Sidebar');//视图文件的路径，用 / 可以 但是一般都是用 . 更为方便
);

那么接下来测试看能否正常访问到页面，注意开启 Apache 服务，否则无法访问。

那么到这里我们这个路由可以正常访问到这个页面，但是正常来说，我们是不需要这个路由的，因为此页面是一个模板页面，无需访问到，所以后面我们要把他删了，加上路由只是为了更好的调试页面。

编写页面

这里便不过多赘述html代码了，具体代码可以去找下，即可，那么我写的样式是这样的，以下为内容。那么直接上代码。

html：

<!--
 博客的左侧侧边栏

 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>@yield('title','您还没有定义标题')</title>

    <script src=" asset('/js/jquery.min.js') "></script>

    <!--阿里图标库-->
    <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1632750_204xwxiwzht.css?1583918713" />
    <link rel="stylesheet" href=" asset('/css/Sidebar.css') ">
</head>
<body>
<div class="body_con">
    <div class="body_left">
        <ul class="body_left_list">
            @foreach($nav as $item)
            <li>
                <label>
                    <span>$item[0]['AMenu']</span><!-- 一级标题 -->
                    <i class="iconfont iconxiajiantou"></i>
                    <a href="javascript:;"></a>
                </label>
                <ul>
                    @foreach($item[0]['SecondaryMenu'] as $index=>$SecondaryMenu)
                    <li>
                        <label>
                            <i class="iconfont iconYYGK"></i>
                            <span>$item[0]['SecondaryMenu'][$index]['title']</span><!-- 二级标题 -->
                            <i class="iconfont iconyoujiantou"></i>
                            <a href="$item[0]['SecondaryMenu'][$index]['link']"></a>
                        </label>
                    </li>
                    @endforeach
                </ul>
            </li>
            @endforeach
        </ul>
    </div>
    <div class="body_right">
        <p class="Breadcrumbs">@yield('Breadcrumbs','您还没有定义，面包屑导航')</p>
        @section('content')
--            定义占位符 这里写右侧内容 --
            <p>This is content</p>
        @show
    </div>
</div>

<script>
    $(".body_left_list >li >label").on('click',function () 
        $height = $(this).parent('li').css('max-height');
        if($height == '1500px')
            $(this).parent('li').animate('max-height':'40px');
            $(this).children('i').css(
                'transform':'rotate(-90deg)'
            )
        else
            $(this).parent('li').animate('max-height':'1500px');
            $(this).children('i').css(
                'transform':'rotate(0)'
            )
        
    );

    $(".body_left_list >li >ul >li >ul >li").on(
        mouseover: function () 
            var juli = $(this).offset().top;
            $(this).children('ul').css(
                'padding-top':juli
            )
        ,
        mouseout: function () 
            $(".link").hide();
        
    );
</script>

</body>
</html>

css：

html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, th, td, select 
    margin: 0;
    padding: 0;


* 
    box-sizing: border-box;


html, body 
    min-height: 100%;


body 
    font-family: "Microsoft YaHei";
    font-size: 0.3rem;
    color: #333;


h1, h2, h3, h4, h5, h6 
    font-weight: normal;


ul, ol 
    list-style: none;


img 
    border: none;
    vertical-align: middle;


a 
    text-decoration: none;
    color: #232323;


table 
    border-collapse: collapse;
    table-layout: fixed;


input, textarea 
    outline: none;
    border: none;


textarea 
    resize: none;
    overflow: auto;


.clearfix 
    zoom: 1;


.clearfix:after 
    content: ".";
    width: 0;
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
    overflow: hidden;


.fl 
    float: left


.fr 
    float: right


.tl 
    text-align: left;


.tc 
    text-align: center


.tr 
    text-align: right;


.ellipse 
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;


.inline 
    display: inline-block;
    *display: inline;
    *zoom: 1;

.body_con
    width: 100%;
    height: 100%;
    position: relative;
    font-size: 0;

.body_top
    width: 100%;
    height: 60px;
    background: #1d8ff0;
    color: #fff;
    font-size: 24px;
    line-height: 60px;
    text-align: center;

.body_left
    width:200px;
    height: 100vh;
    /* vh 屏幕高度单位 100vh 即为屏幕等高  */
    display: inline-block;
    vertical-align: top;
    background:#333951;
    position: relative;
    font-size: 18px;
    color: #fff;

.body_right
    width: calc(100% - 200px);
    display: inline-block;
    vertical-align: top;
    background:#f3faff;
    font-size: 16px;
    color: #999;
    /*text-align: center;*/
    line-height: 40px;

.body_right > .Breadcrumbs
    padding: 0 20px;
    line-height: 40px;

.body_left_list
    width: 100%;
    min-height: 1rem;
    position: relative;

.body_left_list >li
    width: 100%;
    min-height: 1px;
    overflow: hidden;
    border-bottom: 1px solid #333951;
    transition:all 0.5s;
    max-height: 1500px;

.body_left_list >li >label
    width: 100%;
    height: 40px;
    line-height: 40px;
    position: relative;
    color: #fff;
    font-size:16px;
    background: #292e41;
    display: block;

.body_left_list >li >label >span
    padding: 0 20px;
    width: 150px;
    color: #fff;
    font-size:16px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

.body_left_list >li >label >a
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

.body_left_list >li >label >i
    position: absolute;
    top: 0;
    right:25px;
    font-size: 11px;

.body_left_list >li >ul
    width: 100%;
    min-height: 1px;
    position: relative;

.body_left_list >li >ul >li
    width: 100%;
    max-height: 50px;
    overflow: hidden;
    transition: all 0.5s;

.body_left_list >li >ul >li:hover
    max-height: calc(200 * 8px);

.body_left_list >li >ul >li >label
    width: 100%;
    height: 50px;
    background:#333951;
    line-height: 50px;
    position: relative;
    transition: all 0.5s;
    display: block;

.body_left_list >li >ul >li:hover >label
    background: #151b32;
    border-left: 6px solid #1D8FF0;

.body_left_list >li >ul >li:hover >label >i:nth-child(3)
    transform: rotate(90deg);

.body_left_list >li >ul >li >label >i:nth-child(1)
    padding-left:  30px;
    font-size: 20px;
    display: inline-block;
    vertical-align: top;

.body_left_list >li >ul >li >label >span
    font-size: 15px;
    color: #a1a3ab;
    width: 90px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

.body_left_list >li >ul >li >label >i:nth-child(3)
    position: absolute;
    top: 0;
    right:25px;

.body_left_list >li >ul >li >label >a
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

.body_left_list >li >ul >li >ul
    width: 100%;
    min-height: 1px;

.body_left_list >li >ul >li >ul >li
    max-height: 40px;
    transition: all 0.5s;
    overflow: hidden;
    position: relative;

.body_left_list >li >ul >li >ul >li:hover
    max-height: calc(200 * 8px);

.body_left_list >li >ul >li >ul >li >label
    width: 100%;
    height:40px;
    background: #3a3e50;
    position: relative;
    line-height: 40px;
    display: block;
    transition: all 0.5s;

.body_left_list >li >ul >li >ul >li:hover >label >span
    color: #fff;

.body_left_list >li >ul >li >ul >li:hover ul
    display: block;

.body_left_list >li >ul >li >ul >li:hover >label >i
    color: #fff;

.body_left_list >li >ul >li >ul >li >label >span
    font-size:14px;
    padding-left: 70px;
    color: #a1a3ab;
    width: 150px;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

.body_left_list >li >ul >li >ul >li >label >i
    position: absolute;
    top: 0;
    right:25px;
    font-size: 14px;

.body_left_list >li >ul >li >ul >li >label >a
    width: 100%;
    height: 100%;
    position: absolute;
    top: 2px;
    left: 0;
    z-index: 1;

.body_left_list >li >ul >li >ul >li >ul
    width: 120px;
    min-height: 1px;
    position: fixed;
    top:0;
    left: 200px;
    display: none;

.body_left_list >li >ul >li >ul >li >ul >li
    width: 100%;
    min-height: 40px;
    position: relative;
    transition:all 0.5s;
    background: #fff;

.body_left_list >li >ul >li >ul >li >ul >li >label
    display: block;
    position: relative;
    width: 100%;
    height: 30px;

.body_left_list >li >ul >li >ul >li >ul >li >label >span
    width: 60%;
    height: 40px;
    font-size: 12px;
    line-height: 40px;
    padding-left: 20px;
    display: block;
    color: #999;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition:all 0.5s;

.body_left_list >li >ul >li >ul >li >ul >li >label >i
    position: absolute;
    top: 13px;
    right:25px;
    font-size: 14px;
    color: #999;

.body_left_list >li >ul >li >ul >li >ul >li:hover >label >span
    color: #1D8FF0;

.body_left_list >li >ul >li >ul >li >ul >li:hover >label >i
    color: #1D8FF0;

.body_left_list >li >ul >li >ul >li >ul >li >label >a
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

资源来自于网络，稍有修改，如有侵权，联系删除。
最后出来这个样子的。

大家是否好奇这个$nav 是从哪里来的，如果你想知道它从哪里来的话，那我现在就来带你研究研究。

定义视图全局变量

哪个$nav 是来自文件夹 app/Providers 下面的AppServiceProvider.php的文件下的boot 的方法具体代码如下：

以上是关于学妹问我如何使用laravel写后台侧边栏模板，我笑了笑，然后给了她本秘籍。的主要内容，如果未能解决你的问题，请参考以下文章 
 学妹问我如何使用laravel写后台侧边栏模板，我笑了笑，然后给了她本秘籍。
 学妹问我一个java类是如何加载的？
 学妹问我：有什么好用的测试框架吗？
 学妹问我单元测试怎么写，我把阿里大牛偷偷教我的知识塞给她。
 学妹问我，并发问题的根源到底是什么？
 学妹问我，并发问题的根源到底是什么？