CSS3实现的可缩进的侧栏导航菜单
作者:admin 时间:2021-7-28 10:19:15 浏览:本文介绍一个可缩进的侧栏导航菜单,使用纯CSS3实现。
CSS3实现的可缩进的侧栏导航菜单
侧栏导航的HTML代码
下面是侧栏导航的HTML代码,主要是使用UL-LI结构。注意到还用了一个SVG代码,这个其实导航上面最顶部那个logo图标的SVG实现代码,如果我们不用那个logo图标,可以不要这个段SVG代码。
<nav id="navbar">
<ul class="navbar-items flexbox-col">
<li class="navbar-logo flexbox-left">
<a class="navbar-item-inner flexbox">
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 1438.88 1819.54">
<polygon points="925.79 318.48 830.56 0 183.51 1384.12 510.41 1178.46 925.79 318.48"/>
<polygon points="1438.88 1663.28 1126.35 948.08 111.98 1586.26 0 1819.54 1020.91 1250.57 1123.78 1471.02 783.64 1663.28 1438.88 1663.28"/>
</svg>
</a>
</li>
<li class="navbar-item flexbox-left">
<a class="navbar-item-inner flexbox-left">
<div class="navbar-item-inner-icon-wrapper flexbox">
<ion-icon name="search-outline"></ion-icon>
</div>
<span class="link-text">搜索</span>
</a>
</li>
<li class="navbar-item flexbox-left">
<a class="navbar-item-inner flexbox-left">
<div class="navbar-item-inner-icon-wrapper flexbox">
<ion-icon name="home-outline"></ion-icon>
</div>
<span class="link-text">主页</span>
</a>
</li>
<li class="navbar-item flexbox-left">
<a class="navbar-item-inner flexbox-left">
<div class="navbar-item-inner-icon-wrapper flexbox">
<ion-icon name="folder-open-outline"></ion-icon>
</div>
<span class="link-text">工程</span>
</a>
</li>
<li class="navbar-item flexbox-left">
<a class="navbar-item-inner flexbox-left">
<div class="navbar-item-inner-icon-wrapper flexbox">
<ion-icon name="pie-chart-outline"></ion-icon>
</div>
<span class="link-text">面版</span>
</a>
</li>
<li class="navbar-item flexbox-left">
<a class="navbar-item-inner flexbox-left">
<div class="navbar-item-inner-icon-wrapper flexbox">
<ion-icon name="people-outline"></ion-icon>
</div>
<span class="link-text">团队</span>
</a>
</li>
<li class="navbar-item flexbox-left">
<a class="navbar-item-inner flexbox-left">
<div class="navbar-item-inner-icon-wrapper flexbox">
<ion-icon name="chatbubbles-outline"></ion-icon>
</div>
<span class="link-text">支持</span>
</a>
</li>
<li class="navbar-item flexbox-left">
<a class="navbar-item-inner flexbox-left">
<div class="navbar-item-inner-icon-wrapper flexbox">
<ion-icon name="settings-outline"></ion-icon>
</div>
<span class="link-text">设置</span>
</a>
</li>
</ul>
</nav>
icon图标引用文件库
我们还注意到,在HTML代码里,后面有两个js文件,这是导航菜单每个项目前面的icon图标库文件,如果没有这两个js文件,则导航每个项目前面就没有小图标,那样会不太好看。
<script src='https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js'></script>
<script src='https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js'></script>
CSS代码
下面仅贴出导航的CSS代码。
#navbar {
top: 0;
padding: 0;
width: 5em;
height: 100vh;
position: fixed;
background-color: hsl(var(--background-secondary));
transition: width .35s cubic-bezier(var(--transition-main), 1);
overflow-y: auto;
overflow-x: hidden;
}
#navbar:hover {
width: 16em;
}
#navbar::-webkit-scrollbar-track {
background-color: hsl(var(--background-secondary));
}
#navbar::-webkit-scrollbar {
width: 8px;
background-color: hsl(var(--background-secondary));
}
#navbar::-webkit-scrollbar-thumb {
background-color: hsl(var(--primary));
}
.navbar-items {
margin: 0;
padding: 0;
list-style-type: none;
}
/* Navbar Logo */
.navbar-logo {
margin: 0 0 2em 0;
width: 100%;
height: 5em;
background: hsl(var(--background-secondary-dark));
}
.navbar-logo > .navbar-item-inner {
width: calc(5rem - 8px);
}
.navbar-logo > .navbar-item-inner:hover {
background-color: transparent;
}
.navbar-logo > .navbar-item-inner > svg {
height: 2em;
fill: hsl(var(--white));
}
/* Navbar Items */
.navbar-item {
padding: 0 .5em;
width: 100%;
cursor: pointer;
}
.navbar-item-inner {
padding: 1em 0;
width: 100%;
position: relative;
color: hsl(var(--quite-gray));
border-radius: .25em;
text-decoration: none;
transition: all .2s cubic-bezier(var(--transition-main), 1);
}
.navbar-item-inner:hover {
color: hsl(var(--white));
background: hsl(var(--background-secondary-light));
box-shadow: 0 17px 30px -10px hsla(var(--black), .25);
}
.navbar-item-inner-icon-wrapper {
width: calc(5rem - 1em - 8px);
position: relative;
}
.navbar-item-inner-icon-wrapper ion-icon {
position: absolute;
font-size: calc(var(--navbar-buttons) - 1rem);
}
.link-text {
margin: 0;
width: 0;
text-overflow: ellipsis;
white-space: nowrap;
transition: all .35s cubic-bezier(var(--transition-main), 1);
overflow: hidden;
opacity: 0;
}
#navbar:hover .link-text {
width: calc(100% - calc(5rem - 8px));
opacity: 1;
}
这个导航加入了不少的鼠标悬停效果。
还有,这是一个响应式的侧栏导航菜单,可缩进效果是它一大特色,而它是纯CSS3实现的。
您可能对以下文章也感兴趣
相关文章
x
- 站长推荐