How to create a Navigation bar Frontend project

 

How to Create Navigation bar using  html and CSS, JS

👇ஃ Create a  Navigation bar with source codeஃ

Source Code 

<html>

    <head>

    <meta charset="UTF-8">

    <meta name="viewport"

content="width=device-width,

initial-scale=1.0">

    <title>User Login</title>

    <link rel="stylesheet"

href="css/bootstrap.css">

  <style>

.dropbtn {

  background-color:#0096FF;

  color: white;

  padding: 10px;

  font-size: 16px;

  border: none;

  cursor: pointer;

}

.dropbtn:hover, .dropbtn:focus {

  background-color: #2980B9;

}

.dropdown {

  position: relative;

  display: inline-block;

}

.dropdown-content {

  display: none;

  position: absolute;

  background-color: pink;

  min-width: 160px;

  overflow: auto;

  box-shadow:  rgba(0,0,0,0.2);

  z-index: 1;

}

.dropdown-content a {

  color: black;

  padding: 16px 12px;

  text-decoration: none;

  display: block;

}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

    </style>

</head>

<div class="bg-white shadow container mt-5 p-3

text-center mx-auto">

                <a href="home.php" class="btn

btn-primary">

                   Home

                </a>

                <body style="background-color:

white;">

<div class="dropdown">

  <button onclick="myFunction()"

class="dropbtn btn btn-primary">

Dress</button>

  <div id="myDropdown"

class="dropdown-content">

    <a href="product1.php">Women Lehenga Choli

</a>

    <a href="#product2.php">Sharara Suit</a>

    <a href="product3.php">Anarkali  Suit</a>

  </div>

</div>

                <a href="About.php"

class="btn btn-primary">

                    About us

                </a>

<a href="contact.php" class="btn btn-primary">

                    Contact Us

                </a>

                <a href="feedback.php"

class="btn btn-primary">

                    Feedback

                </a>

                <a href="login.php"

class="btn btn-primary">

                    Login

                </a>

        </div>

        <script>

function myFunction() {

  document.getElementById("myDropdown").

classList.toggle("show");

}

// Close the dropdown if the user clicks

outside of it

window.onclick = function(event) {

  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.

getElementsByClassName("dropdown-content");

    var i;

    for (i = 0; i < dropdowns.length; i++) {

      var openDropdown = dropdowns[i];

if (openDropdown.classList.contains('show')) {

        openDropdown.classList.remove('show');

      }

    }

  }

}

</script>    

 </html>

 How to Create Navigation bar using  html and CSS, JS

OutPut :- 

Related Post :-

php program factorial number program

php assignment operators

Css element selector