20231107-前端学习炫酷菜单效果和折叠侧边栏

炫酷菜单效果

代码

<!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>

折叠侧边栏

代码

<!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()">&times;</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>