css布局实现响应式全屏右侧弹出菜单效果代码
代码语言:html
所属分类:菜单导航
代码描述:css布局实现响应式全屏右侧弹出菜单效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@import url("https://fonts.googleapis.com/css?family=Barlow:200,300,400,500,600,700,800,900&display=swap");
/*
$bg-01: #364e68;
$bg-02: #446d8c;
$bg-03: #5788a0;
$bg-04: #73a5b5;
*/
body {
margin: 0;
font-family: "Barlow", sans-serif;
background-color: #f1f3f7;
}
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
a {
text-decoration: none;
color: white;
}
/* Navigation */
nav {
/* Nav Bar */
/* Main Nav */
}
nav .menubar {
width: 100%;
height: 80px;
position: absolute;
top: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40px;
box-sizing: border-box;
background-color: white;
box-shadow: 0px 0px 20px -10px rgba(0, 0, 0, 0.3);
/* Logo */
/* Icons */
}
@media screen and (max-width: 767px) {
nav .menubar {
height: 60px;
padding: 0 20px;
}
}
nav .menubar .home {
font-size: 20px;
font-weight: 600;
color: #c05c7e;
transition: all 0.4s ease;
}
nav .menubar .home:hover {
opacity: 0.5;
}
nav .menubar .icons {
display: flex;
/* Icon Menu Hamburguer */
/* Secondary Icons */
}
nav .menubar .icons .icon-menu {
display: flex;
width: 30px;
height: 30px;
z-index: 2;
position: relative;
display: flex;
align-items: center;
cursor: pointer;
padding: 5px;
/* Icon Close */
}
nav .menubar .icons .icon-menu span {
background-color: #c05c7e;
width: 30px;
height: 3px;
position: absolute;
display: flex;
justify-content: flex-end;
transition: all 0.2s ease;
right: 0;
border-radius: 5px;
}
nav .menubar .icons .icon-menu span:before, nav .menubar .icons .icon-menu span:after {
position: absolute;
content: "";
width: 100%;
height: 100%;
background-color: #c05c7e;
border-radius: 5px;
}
nav .menubar .icons .icon-menu span:before {
transform: translateY(-10px);
transition: all 0.3s 0.1s ease;
}
nav .menubar .icons .icon-menu span:after {
transform: translateY(10px);
transition: all 0.3s 0.2s ease;
}
nav .menubar .icons .icon-menu:hover span {
width: 30px;
}
nav .menubar .icons .icon-menu:hover span:before {
width: 25px;
}
nav .menubar .icons .icon-menu:hover span:after {
wid.........完整代码请登录后点击上方下载按钮下载查看
网友评论0