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

2024-01-24 16:43:16

前言

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

编写侧边栏模板

新建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 的方法具体代码如下：

public function boot()
    {
        //
        $nav=[
            [
                ['AMenu' => '富强', 'SecondaryMenu' => [['title' => '二-1级标题', 'link' => '/header'],['title' => '二-1级标题', 'link' => '/header']]]
            ],
            [
                ['AMenu' => '*', 'SecondaryMenu' => [['title' => '二-1级标题', 'link' => '/header']]]
            ],
            [
                ['AMenu' => '文明', 'SecondaryMenu' => [['title' => '二-2级标题', 'link' => '/header']]]
            ],
        ];
        View::share('nav',$nav);
    }

这样后面我们需要修改标题就很简单了，直接在这里修改就可以了。
那么到这里我们的侧边栏模板就已经写完了。

结语

这次我们把左侧的侧边栏做完了，那么后面我们就需要实现注册的功能了，那么下一篇文章，我们就来实现下注册的功能。

码农公寓

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

目录

前言

编写侧边栏模板

新建public文件夹

新建Sidebar.blade.php文件

编写侧边栏路由

编写页面

定义视图全局变量

结语

码农公寓

目录

前言

编写侧边栏模板

新建public文件夹

新建Sidebar.blade.php文件

编写侧边栏路由

编写页面

定义视图全局变量

结语

相关文章