Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Action Menu Button</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div class="action">
- <div class="profile" onclick="menuToggle();">
- <h4>Menu</h4>
- </div>
- <div class="menu">
- <h3>Navigation<br></h3>
- <ul>
- <li><i class="fa-solid fa-house"></i><a href="#">Home</a></li>
- <li><i class="fa-solid fa-circle-user"></i><a href="#">My Profile</a></li>
- <li><i class="fa-solid fa-list-ul"></i><a href="#">Guidelines</a></li>
- <li><i class="fa-regular fa-heart"></i><a href="#">Interests</a></li>
- </div>
- </div>
- </body>
- </html>
- <style>
- @import url('https://fonts.googleapis.com/css2?family=Comfortaa&family=Inter&family=Nunito&display=swap');
- *
- {
- margin: 0;
- padding: 0;
- font-family: 'Nunito', sans-serif;
- }
- body {
- background: #ffefe8;
- }
- .action {
- position: fixed;
- top: 20px;
- left: 30px;
- }
- .action .profile {
- position: relative;
- width: 70px;
- height: 20px;
- border-radius: 0.25em;
- overflow: hidden;
- cursor: pointer;
- padding: 5px;
- background: #FFE3E3;
- text-align: center;
- }
- .action .profile img {
- position: absolute;
- top: 0;
- left: 0;
- }
- .action .menu {
- position: absolute;
- top: 50px;
- left: -1px;
- padding: 7px 14px;
- background: #ffffff;
- width: 100px;
- box-sizing: 0 5px 25px rgba (0,0,0,0.1);
- border-radius: 8px;
- transition: 0.5s;
- visibility: hidden;
- opacity: 0;
- }
- .action .menu.active {
- visibility: visible;
- opacity: 1;
- }
- .action .menu:before {
- content: '';
- position: absolute;
- top: -5px;
- left: 26px;
- width: 20px;
- height: 20px;
- background: #fff;
- transform: rotate(45deg);
- }
- .action .menu h3 {
- width: 100%;
- text-align: center;
- font-size: 14px;
- padding: 7px 0;
- font-weight: 600;
- color: #212121;
- line-height: 1.2em;
- }
- .action .menu ul li {
- list-style: none;
- padding: 5px 0;
- border-top: 1px solid rgba(0,0,0,0.05);
- display: flex;
- align-items: center;
- }
- i {
- width: 10px;
- margin-right: 15px;
- opacity: 1;
- transition: 0.5s;
- }
- .action .menu ul li:first-of-type {
- border-top: 0.5px solid #fff;
- }
- .action .menu ul li:hover i {
- opacity: 0.5;
- }
- .action .menu ul li a {
- display: inline-block;
- font-size: 12px;
- text-decoration: none;
- color: #000;
- font-weight: 500;
- transition: 0.5s;
- }
- .action .menu ul li:hover a {
- color: #999;
- }
- </style>
- <script src="https://kit.fontawesome.com/ba309bcaa3.js" crossorigin="anonymous"></script>
- <script>
- function menuToggle(){
- const toggleMenu = document.querySelector ('.menu');
- toggleMenu.classList.toggle('active')
- }
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement