前言
这次有个很漂亮的学妹问我怎么编写侧边栏模板,看着学妹那完美的面部轮廓,肤如软玉凝脂,眉如远山之黛,长而浓密的睫毛,直而英挺的鼻,薄而小巧的唇,一副精致绝伦的容貌。我本着助人为乐的精神勉为其难的写下了这篇文章。
上次我们完成了,数据库的搭建,那么接下来我们就可以来着手搭建博客网站了,那么这次我们来搭建博客的侧边栏。那么废话不多说我们接下来就来,就开始来敲代码。
编写侧边栏模板
新建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);
}
这样后面我们需要修改标题就很简单了,直接在这里修改就可以了。
那么到这里我们的侧边栏模板就已经写完了。
结语
这次我们把左侧的侧边栏做完了,那么后面我们就需要实现注册的功能了,那么下一篇文章,我们就来实现下注册的功能。