炫酷菜单效果
代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>炫酷菜单效果</title>
<script src="https://kit.fontawesome.com/d37465fc7c.js" crossorigin="anonymous"></script>
<style>
* {
margin: 0;
padding: 0;
font-family: sans-serif;
list-style: none;
text-decoration: none;
}
.middle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.menu {
width: 300px;
border-radius: 8px;
overflow: hidden;
}
.item {
border-top: 1px solid #2980b9;
overflow: hidden;
}
.btn {
display: block;
padding: 16px 20px;
background: #3498db;
position: relative;
color: white;
}
.btn::before {
content: "";
position: absolute;
width: 14px;
height: 14px;
background: #3498db;
left: 20px;
bottom: -7px;
transform: rotate(45deg);
}
.btn i {
margin-right: 10px;
}
.smenu {
background: #333;
overflow: hidden;
transition: max-height 0.3s;
max-height: 0;
}
.smenu a {
display: block;
padding: 16px 26px;
color: white;
font-size: 14px;
margin: 4px 0;
position: relative;
}
.smenu a::before {
content: "";
position: absolute;
width: 6px;
height: 100%;
background: #3498db;
left: 0;
top: 0;
transition: 0.3s;
opacity: 0;
}
.smenu a:hover::before {
opacity: 1;
}
.item:target .smenu {
max-height: 10em;
}
</style>
</head>
<body>
<div class="middle">
<div class="menu">
<li class="item" id="profile">
<a href="#profile" class="btn">
<i class="fa-solid fa-user"></i>Profile
</a>
<div class="smenu">
<a href="">Posts</a>
<a href="">Picture</a>
</div>
</li>
<li class="item" id="messages">
<a href="#messages" class="btn">
<i class="fa-solid fa-envelope"></i>Messages
</a>
<div class="smenu">
<a href="">new</a>
<a href="">Sent</a>
<a href="">Spam</a>
</div>
</li>
<li class="item" id="settings">
<a href="#settings" class="btn">
<i class="fa-solid fa-gear"></i>Settings
</a>
<div class="smenu">
<a href="">Password</a>
<a href="">Language</a>
</div>
</li>
<li class="item">
<a href="" class="btn">
<i class="fa-solid fa-right-from-bracket"></i>Logout
</a>
</li>
</div>
</div>
</body>
</html>
折叠侧边栏
代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>折叠侧边栏</title>
<script src="https://kit.fontawesome.com/d37465fc7c.js" crossorigin="anonymous"></script>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
body {
font-family: Arial, Helvetica, sans-serif;
background-color: #f4f4f4;
}
.navbar {
background-color: #3b5998;
overflow: hidden;
height: 63px;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
font-size: 17px;
padding: 14px 16px;
}
.navbar ul {
margin: 8px 0 0 0;
}
.open-side i {
padding-top: 18px;
}
.navbar a:hover {
background-color: #ddd;
color: #000;
}
.side-nav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
opacity: 0.8;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.side-nav a {
padding: 10px 10px 10px 30px;
font-size: 22px;
color: #ccc;
display: block;
transition: .3s;
}
.side-nav a:hover {
color: orange;
}
.side-nav .btn-close {
position: absolute;
top: 0;
right: 22px;
font-size: 36px;
}
#content {
transition: margin-left .5s;
padding: 20px;
}
@media(max-width:568px) {
.navbar ul {
display: none;
}
}
/* @media(min-width:568px) {
.open-side {
display: none;
}
} */
</style>
</head>
<body>
<nav class="navbar">
<span class="open-side">
<a href="#" onclick="openSideMenu()">
<i class="fa-solid fa-bars fa-2xl"></i>
</a>
</span>
<ul class="navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div id="side-menu" class="side-nav">
<a href="#" class="btn-close" onclick="closeSideMenu()">×</a>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
<div id="content">
<h1>你好,世界!</h1>
</div>
<script>
xySideMenu = document.getElementById("side-menu");
xyContent = document.getElementById("content");
function openSideMenu() {
xySideMenu.style.width = "250px";
xyContent.style.marginLeft = "250px";
}
function closeSideMenu() {
xySideMenu.style.width = "0";
xyContent.style.marginLeft = "0";
}
</script>
</body>
</html>