Floating Menu
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Floating Html</title> | |
| </head> | |
| <body> | |
| <div class="action" onclick="actionToggle();"> | |
| <span>+</span> | |
| <ul> | |
| <li><img src="facebook.png">Share On facebook</li> | |
| <li><img src="facebook.png">Share On Twitter</li> | |
| <li><img src="facebook.png">Share On Instagram</li> | |
| <li><img src="facebook.png">Share On Pintrest</li> | |
| <li><img src="facebook.png">Share On Linkedin</li> | |
| </ul> | |
| </div> | |
| <script type="text/javascript"> | |
| function actionToggle() { | |
| var action = document.querySelector('.action'); | |
| action.classList.toggle('active') | |
| } | |
| </script> | |
| </body> | |
| </html> | |
| <style type="text/css"> | |
| *{ | |
| margin: 0px; | |
| padding: 0px; | |
| font-family: arial; | |
| } | |
| body{ | |
| min-height: 100vh; | |
| background: linear-gradient(#7d6cfc, #c635ea); | |
| } | |
| .action{ | |
| position: fixed; | |
| bottom: 50px; | |
| left: 50px; | |
| width: 50px; | |
| height: 50px; | |
| cursor: pointer; | |
| background-color: #fff; | |
| border-radius: 50%; | |
| box-shadow: 0 5px 5px rgb(0, 0, 0, 0.1); | |
| } | |
| .action span{position: relative; width: 100%;height: 100%; display: flex; justify-content: center; align-items: center; color: #a13dea; font-size: 2em; transition: 0.3s ease-in-out;} | |
| .action:active span{ | |
| transform: rotate(135deg); | |
| } | |
| .action ul{position: absolute; bottom: 55px; background-color: #fff; min-width: 250px; padding: 20px; border-radius: 20px; opacity: 0; visibility: hidden; transition: 0.3s;} | |
| .action.active ul{opacity: 1; visibility: visible; transition: 0.3s; bottom: 65px;} | |
| .action ul li{list-style-type: none; display: flex; justify-content: flex-start; align-items: center; padding: 10px 0px; transition: 0.3s;} | |
| .action ul li:hover{ | |
| font-weight: 600; | |
| } | |
| .action ul li:not(:last-child){ | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.1); | |
| } | |
| .action ul li img{ | |
| margin-right: 10px; | |
| opacity: 0.2; | |
| transform: scale(0.8); | |
| } | |
| .action ul li:hover img{ | |
| opacity: 0.8; | |
| } | |
| </style> |
Comments
Post a Comment