Crafting the Perfect Navigation Menu Bar | Best Menu Bar in HTML, CSS | Guide by #UntoldCoding

Navigation menus play an important role in the user experience of a website. A well-designed menu increases accessibility, improves navigation, and contributes to the overall look of the website. In this blog post, we will explore how to create a beautiful and functional Navigation Menu Bar using HTML and CSS. Welcome to the world of #UntoldCoding!

1st Menu Bar

Live Demo : Click here

Step 1 HTML Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Nav Item | untoldcoding</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <ul id="menu">
        <a
          class="menu-button icon-plus"
          id="open-menu"
          href="#menu"
          title="Show navigation"
        ></a>
        <a class="menu-button icon-minus" href="#0" title="Hide navigation"></a>
        <li class="menu-item">
          <a href="#menu">
            <span class="fa fa-github"></span>
          </a>
        </li>
        <li class="menu-item">
          <a href="#menu">
            <span class="fa fa-linkedin"></span>
          </a>
        </li>
        <li class="menu-item">
          <a href="#menu">
            <span class="fa fa-instagram"></span>
          </a>
        </li>
        <li class="menu-item">
          <a href="#menu">
            <span class="fa fa-twitter"></span>
          </a>
        </li>
        <li class="menu-item">
          <a href="#menu">
            <span class="fa fa-twitter"></span>
          </a>
        </li>
      </ul>

<div class="content">
        <div class="text">
          <h5>Click On Picture!</h5>
        </div>
      </div>
    </div>
    <script>
      window.onload = function () {
        var menuButton = document.getElementById("open-menu");
        menuButton.click();
      };
    </script>
    <script
      src="https://kit.fontawesome.com/28069d2172.js"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Step 2 CSS Code:

body {
  font-family: "Dosis", sans-serif;
  text-align: center;
  background-color: rgb(1, 27, 122);
  color: white;
}

#menu {
  width: 150px;
  height: 150px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -75px 0 0 -75px;
  list-style: none;
  font-size: 200%;
}

.menu-button {
  opacity: 0;
  z-index: -1;
}

.menu-button {
  width: 150px;
  height: 150px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  background: url(Untold\ Coding.png);
  background-size: 100%;
  overflow: hidden;
  text-decoration: none;
  background-repeat: no-repeat;
  box-shadow: 0 0 15px rgb(246, 159, 159);
}

#menu:not(:target) > a:first-of-type,
#menu:target > a:last-of-type {
  opacity: 1;
  z-index: 1;
}

#menu:not(:target) > .icon-plus:before,
#menu:target > .icon-minus:before {
  opacity: 1;
}

.menu-item {
  width: 70px;
  height: 70px;
  position: absolute;
  left: 55%;
  line-height: 5px;
  top: 50%;
  margin: -50px 0 0 -50px;
  border-radius: 50%;
  background-color: rgba(160, 21, 21, 0.588);
  transform: translate(0px, 0px);
  transition: transform 500ms;
  z-index: -2;
}

.menu-item:hover {
  background-color: #c71414;
  color: #c71414;
  box-shadow: 0 0 10px rgb(255, 255, 255);
}

.menu-item a {
  color: #ffffff;
  position: relative;
  top: 30%;
  left: 0;
  text-decoration: none;
}

#menu:target > .menu-item:nth-child(6) {
  transform: rotate(60deg) translateY(-150px) rotate(300deg);
  transition-delay: 0s;
}

#menu:target > .menu-item:nth-child(5) {
  transform: rotate(20deg) translateY(-155px) rotate(-20deg);
  transition-delay: 0.1s;
}

#menu:target > .menu-item:nth-child(3) {
  transform: rotate(-20deg) translateY(-155px) rotate(20deg);
  transition-delay: 0.2s;
}

#menu:target > .menu-item:nth-child(4) {
  transform: rotate(-60deg) translateY(-150px) rotate(60deg);
  transition-delay: 0.3s;
}

.content {
  position: absolute;
  text-align: center;
  margin: -10px 0 0 -30px;
  top: 65%;
  left: 50%;
  font-size: 15px;
}

Now, let’s break down the main features of this code:

2nd Menu Bar

Step 1 HTML Code

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Menu bar 2 |untoldcoding</title> <link rel="stylesheet" href="style.css" /> </head> <body> <nav class="nav"> <input id="menu" type="checkbox" /> <label for="menu">Menu</label> <ul class="menu"> <li> <a href="#0"> <span>About</span> <i class="fas fa-address-card" aria-hidden="true"></i> </a> </li> <li> <a href="#0"> <span>Projects</span> <i class="fas fa-tasks" aria-hidden="true"></i> </a> </li> <li> <a href="#0"> <span>Clients</span> <i class="fas fa-users" aria-hidden="true"></i> </a> </li> <li> <a href="#0"> <span>Contact</span> <i class="fas fa-envelope-open-text" aria-hidden="true"></i> </a> </li> </ul> </nav> <footer class="page-footer"> <span>made by </span> <a href="https://www.instagram.com/untoldcoding/" target="_blank"> <img width="24" height="24" src="https://i.postimg.cc/SxhbJgZq/Untold-Coding.png" alt="George Martsoukos logo" /> </a> </footer> <script src="https://kit.fontawesome.com/28069d2172.js" crossorigin="anonymous" ></script> </body> </html>

Step 2 CSS Code :

@import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");

:root {
  --white: #fffbfb;
  --light-grey: #edf0f1;
  --violet: #5ba7e1;
  --dark-violet: #1d41b7;
  --black: #ffffff;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

body {
  font-family: "Inter", sans-serif;
  text-align: center;
  padding: 0 20px;
  background: var(--light-grey);
  color: var(--white);
  background-color: black;
}

.notification {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  background: var(--violet);
}

.nav {
  position: relative;
  display: flex;
  justify-content: center;
  max-width: 400px;

border-radius: 50px 55px 5px 5px;
  margin: 300px auto 0;
  background: rgb(79, 82, 84);
  box-shadow: rgb(50 50 93 / 10%) 0 30px 60px -12px,
    rgb(0 0 0 / 15%) 0 18px 36px -18px;
}

.nav [type="checkbox"] {
  position: absolute;
  left: -9999px;
}

.nav [type="checkbox"] + label {
  position: relative;
  width: 75px;
  height: 75px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  z-index: 1;
  background: var(--violet);
  border-radius: 50%;
  transform: translateY(-50%);
  transition: all 0.2s;
}

.nav [type="checkbox"] + label:hover {
  background: #1d41b7;
}

.menu li {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.4s;
}

.menu li:nth-child(1) {
  transition-delay: 0.2s;
}

.menu li:nth-child(2) {
  transition-delay: 0.15s;
}

.menu li:nth-child(3) {
  transition-delay: 0.1s;
}

.menu li:nth-child(4) {
  transition-delay: 0.05s;
}

.menu li a {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--violet);
}
.menu li a:hover {
  background-color: #1d41b7;
  width: 54px;
  height: 54px;
  box-shadow: 0 0 50px 4px rgb(255, 255, 255);
}

.menu li a span {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(calc(-100% - 5px));
  width: 100%;
  font-size: 13px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  color: var(--black);
  font-weight: bold;
}

.nav input:checked + label {
  background: #1d41b7;
  transform: translateY(calc(-50% + 4px));
}

.nav input:checked ~ .menu li:nth-child(1) {
  top: -210px;
  transition-delay: 0.1s;
}

.nav input:checked ~ .menu li:nth-child(2) {
  top: -160px;
  left: calc(50% - 75px);
  transition-delay: 0.2s;
}

.nav input:checked ~ .menu li:nth-child(3) {
  top: -160px;
  left: calc(50% + 75px);
  transition-delay: 0.3s;
}

.nav input:checked ~ .menu li:nth-child(4) {
  top: -110px;
  transition-delay: 0.4s;
}

.nav input:checked ~ .menu li a span {
  opacity: 1;
  transition-delay: 0.9s;
}

.page-footer {
  position: fixed;
  right: 0;
  bottom: 60px;
  display: flex;
  align-items: center;
  padding: 5px;
  color: var(--black);
}

.page-footer a {
  display: flex;
  margin-left: 4px;
}

Join us on Telegram : Click here.

Join with us YouTube : Click here.

Join with us Instagram: Click here.

Frequently Asked Questions (FAQ) - UntoldCoding Navigation

Welcome to the UntoldCoding Navigation FAQ! If you have any questions about the navigation menu on our website, you can find answers below. If your question is not answered, feel free to contact us.

1. What is the purpose of the navigation menu in UntoldCoding?

The navigation menu makes it easy for users to navigate different parts of our website. Includes links to social media profiles and other resources.

2. How can I show/hide the navigation menu?

You can display the navigation menu by pressing the "Show navigation" button represented by a plus sign (plus sign). To hide it, click the minus sign (minus-sign) on the "Hide navigation" button.

3. What social media links are included in the navigation menu?

The navigation menu contains links to GitHub, LinkedIn, Instagram, and Twitter. Click on the relevant icons to view our profiles on these forums.

4. Why does the navigation menu automatically open when the page loads?

We added a script that triggers a click on the "Show navigation" button when the window is loaded. This is to provide a seamless and user-friendly experience, making the journey easier.

5. Can I customize the navigation menu?

exactly! Feel free to edit the HTML and CSS to customize the look and functionality of the menu to your preferences and branding.

6. Why add Font Awesome to the script?

Font Awesome is a library that provides customizable vector icons. We use it to easily add beautiful and uniform social media icons to our navigation menus.

7. How can I contact us if I have more questions?

If you have further questions or need further assistance, please contact us through our Contact Us page. We are happy to help!

Crafting the Perfect Navigation Menu Bar | Best Menu Bar in HTML, CSS | Guide by #UntoldCoding

Crafting the Perfect Navigation Menu Bar | Best Menu Bar in HTML, CSS | Guide by #UntoldCoding

1st Menu Bar

Step 1 HTML Code:

Step 2 CSS Code:

2nd Menu Bar

Step 1 HTML Code

Step 2 CSS Code :

Join us on Telegram : Click here.

Join with us YouTube : Click here.

Join with us Instagram: Click here.

Frequently Asked Questions (FAQ) - UntoldCoding Navigation

Post a Comment

1 comment:

Categories

Popular Post

Random Posts

Recent Posts

Popular Posts

Crafting the Perfect Navigation Menu Bar | Best Menu Bar in HTML, CSS | Guide by #UntoldCoding

Crafting the Perfect Navigation Menu Bar | Best Menu Bar in HTML, CSS | Guide by #UntoldCoding

1st Menu Bar

Step 1 HTML Code:

Step 2 CSS Code:

2nd Menu Bar

Step 1 HTML Code

Step 2 CSS Code :

Join us on Telegram : Click here.

Join with us YouTube : Click here.

Join with us Instagram: Click here.

Frequently Asked Questions (FAQ) - UntoldCoding Navigation

Related Posts

Post a Comment

1 comment:

Categories

Popular Post

Random Posts

Recent Posts

Popular Posts