Floating Action Menu Using HTML CSS & JavaScript

Hello readers, Today In this article I am going to show you How To Create a Floating Action Menu in HTML CSS & JavaScript. This type of Floating Menu is used for website navigation. One of the most beautiful and good-looking designs.

You easily create this Floating Action Navigation Menu Using HTML CSS & JavaScript then this article will definitely help you. For this, you need to have an idea about basic HTML CSS & JavaScript then you can understand the following codes. It is designed in a completely modern way.

Some Information About This Floating Action Navigation Menu

Normally show navigation menu icon with nav button. When you click the nav toggle button then show menu expands with text. And hover the menu then background color change. Top of the menu show logo under the button.

Preview Of Floating Action Navigation Menu

See this video preview to get an idea of how this Floating Action Navigation Menu looks like.

Hopefully, the above demo has helped you to create this Navigation Menu Tutorial. If you like the video, be sure to like the video and comment on it so I can encourage you to create new designs.

You might like this:

Floating Action Navigation Menu | Source Codes

To create this program (Navigation Menu). First, you need to create three Files one HTML, CSS and another one is JS File. After creating these files just paste the following codes in your file. 

After create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension. You’ve to download files from the given download button to use.

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Text Typing Animation</title>
    <!----CSS link----->
    <link rel="stylesheet" href="style.css"> 
</head>
<body>

<div class="container">
  <div class="navigation">
    <div class="menu-toggle"></div>
    <div class="profile">
      <div class="image-box">
        <img src="https://randomuser.me/api/portraits/women/24.jpg" alt="avatar">
      </div>
    </div>
    <ul class="menu">
      <li>
        <a href="#">
          <span class="icon">
            <ion-icon name="person-outline"></ion-icon>
          </span>
          <span class="text">Profile</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon">
            <ion-icon name="archive-outline"></ion-icon>
          </span>
          <span class="text">Inbox</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon">
            <ion-icon name="cog-outline"></ion-icon>
          </span>
          <span class="text">Settings</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon">
            <ion-icon name="archive-outline"></ion-icon>
          </span>
          <span class="text">Support</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span class="icon">
            <ion-icon name="log-out-outline"></ion-icon>
          </span>
          <span class="text">Logout</span>
        </a>
      </li>
    </ul>
  </div>
</div>  

</body>
</html>

After to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

CSS CODE:

@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];300;400;500;600;700;800;900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

.container {
  width: 100%;
  min-height: 100vh;
  padding: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f7f7f7;
}

.navigation {
  width: 80px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: -20px 20px 50px rgba(0, 0, 0, 0.05);
  transition: 0.5s;
  overflow: hidden;
}

.navigation.active {
  width: 400px;
}

.navigation .menu-toggle {
  position: relative;
  width: 100%;
  height: 70px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.navigation .menu-toggle::before {
  content: "";
  position: absolute;
  width: 35px;
  height: 2px;
  background: #333;
  transform: translateY(-10px);
  transition: 0.5s;
}

.navigation.active .menu-toggle::before {
  transform: translateY(0) rotate(45deg);
}

.navigation .menu-toggle::after {
  content: "";
  position: absolute;
  width: 35px;
  height: 2px;
  background: #333;
  transform: translateY(10px);
  transition: 0.5s;
  box-shadow: 0 -10px #333;
}

.navigation.active .menu-toggle::after {
  transform: translateY(0) rotate(-45deg);
  box-shadow: none;
}

.navigation .profile {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  padding: 0 10px;
  width: 100%;
}

.navigation .profile .image-box img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.navigation .menu {
  position: relative;
  width: 100%;
  list-style: none;
  padding: 0 10px;
  transition: 0.5s;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.navigation .menu li a {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  color: #333;
}

.navigation .menu li a:hover {
  background: #0084ff;
  color: #fff;
  border-radius: 10px;
  font-size: 1.5em;
}

.navigation .menu li a .icon {
  position: relative;
  min-width: 60px;
  height: 60px;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navigation .menu li a .text {
  position: relative;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
}

After to create a JS file with the name of js.js and paste the given codes in your js file. Remember, you’ve to create a file with .js extension.

JS Code:

const navigation = document.querySelector('.navigation');
const menu_toggle = document.querySelector('.menu-toggle');

menu_toggle.onclick = function() {
  navigation.classList.toggle('active')
}

now you’ve successfully created these Floating Action Navigation Menu. If your code does not work or facing any error/problem to comment down or contact us through the contact page.

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Categories