css漂亮的侧导航栏,CSS3实现的可缩进的侧栏导航菜单

本文介绍一个可缩进的侧栏导航菜单，使用纯CSS3实现。

CSS3实现的可缩进的侧栏导航菜单

侧栏导航的HTML代码

下面是侧栏导航的HTML代码，主要是使用UL-LI结构。注意到还用了一个SVG代码，这个其实导航上面最顶部那个logo图标的SVG实现代码，如果我们不用那个logo图标，可以不要这个段SVG代码。

• 搜索

• 主页

• 工程

• 面版

• 团队

• 支持

• 设置

icon图标引用文件库

我们还注意到，在HTML代码里，后面有两个js文件，这是导航菜单每个项目前面的icon图标库文件，如果没有这两个js文件，则导航每个项目前面就没有小图标，那样会不太好看。

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实现的。

您可能对以下文章也感兴趣