10分钟使用纯css实现完整的响应式导航菜单栏的效果

在开发hexo主题pixel的时候没有选择bootstrap和jquery实现响应式菜单，而是

使用了纯css实现响应式菜单，这个想法来自于You-Dont-Need-Javascript，

这个项目分享了很多精彩的纯css效果，值得学习。

简单阅读这些css效果源码之后发现大部分css实现动态效果都是使用

[type="checkbox"]

也就是一个单选按钮来保存html组件的状态，更复杂的效果可能

需要单选按钮组合来实现。

checkbox有一个checked状态，可以使用css伪类选择器

[type="checkbox"]:checked

来实现css切换。

下面是这个博客使用的导航菜单scss格式的源码

.nav-collapse {
height: 60px;

.nav-brand {
float: left;
padding: 10px;
font-style: italic;
font-family: Georgia;
font-size: 28px;
text-decoration: none;
color: #000;
margin-right: 50px;
}

[type="checkbox"].check,
label.toggle {
display: none;
}

.nav-nav {
li {
text-align: center;
line-height: 40px;
margin-left: 40px;
float: left;
list-style: none;
}

li:hover {
cursor: pointer;
position: relative;
}

li > a {
display: block;
width: 100%;
padding: 5px 0;
font-weight: bold;
font-size: 14px;
text-transform: uppercase;
letter-spacing: .2px;
}

li:hover > a {
color: #e1eb3e;
}
}
}

@media all and (max-width: 768px) {
.nav-collapse {
.nav-brand {
padding: 20px;
}

.nav-nav {
background: #fff;
opacity: 0;
display: block;
z-index: 9999;
position: fixed;
right: 0;
left: 0;
padding: 0;
top: 60px;

li {
display: block;
width: 100%;
text-align: left;
text-indent: 20px;
margin-left: 10px;
border-bottom: 1px solid #efefef;
}
}

label.toggle {
display: block;
background: #fff;
width: 40px;
height: 40px;
cursor: pointer;
position: absolute;
right: 20px;
top: 20px;
}

label.toggle:after {
content: '';
display: block;
width: 30px;
height: 5px;
background: #777;
margin: 7px 5px;
box-shadow: 0px 10px 0px #777, 0px 20px 0px #777;
}

[type="checkbox"].check:checked + .nav-nav {
opacity: 1;
transition: all .5s linear;
}
}
}

上面这个的导航菜单是固定在顶部的，如果需要导航菜单使用流动布局，下面这个是可以放到页面任何位置的导航菜单

.nav-collapse {
background-color: #000;

.nav-brand {
float: left;
padding: 10px;
font-style: italic;
font-family: Georgia;
font-size: 28px;
text-decoration: none;
color: #000;
margin-right: 50px;
}

[type="checkbox"].check,
label.toggle {
display: none;
}

.nav-nav {
li {
text-align: center;
float: left;
list-style: none;
}

li:hover {
cursor: pointer;
position: relative;
}

li > a {
display: block;
width: 100%;
color: #fff;
padding: 10px 12px;
font-weight: bold;
font-size: 14px;
text-transform: uppercase;
letter-spacing: .2px;
font-family: 'Consolas', 微软雅黑;
}

li:hover > a {
color: #e1eb3e;
}
}
}

@media all and (max-width: 768px) {
.top {
width: 100%;
}
.nav-collapse {
.nav-brand {
padding: 20px;
}

.nav-nav {
background: #fff;
display: none;
z-index: 9999;

li {
display: block;
width: 100%;
text-align: left;
text-indent: 20px;
margin-left: 10px;
border-bottom: 1px solid #efefef;

a {
color: #000;
}
}

li:hover > a {
color: #e1eb3e;
}
}

label.toggle {
display: block;
width: 40px;
height: 40px;
cursor: pointer;
}

label.toggle:after {
content: '';
display: block;
width: 30px;
height: 5px;
background: #fff;
margin: 7px 5px;
box-shadow: 0px 10px 0px #fff, 0px 20px 0px #fff;
}

[type="checkbox"].check:checked + .nav-nav {
opacity: 1;
display: block;
transition: all .5s linear;
}
}
}

如果想要看实际效果可以访问这个网站美剧天堂，效果是一样的。

休闲时间看看美剧是很好的消遣。