Merge pull request #506 from Code-With-Abhishek-Kumar/main

Navigation Bar
Ayushparikh-code · Sep 17, 2024 · 4595382 · 4595382
2 parents cde4a31 + 989b455
commit 4595382
Show file tree

Hide file tree

Showing 3 changed files with 310 additions and 0 deletions.
diff --git a/Responsive Navigation Bar /index.html b/Responsive Navigation Bar /index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <!-- Csn Start  -->
+        <script type="module"
+            src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
+        <script nomodule
+            src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
+
+        <link rel="stylesheet"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
+            integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
+            crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+        <!-- Csn End  -->
+        <!-- css start  -->
+        <link rel="stylesheet" href="style.css">
+        <!-- css end  -->
+        <title>Responsive Navigation Bar </title>
+    </head>
+    <body>
+        <script src="script.js" defer></script>
+        <nav>
+            <div class="logo">
+                <h1>Coder Abhi</h1>
+
+            </div>
+
+            <ol class="navbar-list">
+
+                <li>Home</li>
+                <li >About </li>
+                <li>Contact us</li>
+                <li>Blog</li>
+
+            </ol>
+
+            <div class="mobile-navbar-btn">
+
+                <!-- <ion-icon name="menu-outline" class="mobile-nav-icon"
+                    id="nav-btn"> -->
+
+                    <i class="fa-solid fa-bars" class="mobile-nav-icon"  id="nav-btn"></i>   
+
+
+
+
+                    <!-- <ion-icon name="close-outline" class="mobile-nav-icon"
+                        id="close-nav"> -->
+
+                    </ion-icon>
+
+                </ion-icon>
+
+            </div>
+
+        </nav>
+
+        <section class="sec">
+            Hero Section
+
+        </section>
+<hr>
+        <section class="sec">
+              Servise Section
+        </section>
+
+        <hr>
+         <section class="sec">
+              About me Section
+        </section>
+
+    </body>
+</html>
diff --git a/Responsive Navigation Bar /script.js b/Responsive Navigation Bar /script.js
@@ -0,0 +1,83 @@
+let nav_btn = document.getElementById("nav-btn");
+let nav = document.querySelector("nav");
+let navlist = document.querySelector('.navbar-list');
+
+
+// console.log(nav_btn) 
+
+
+
+
+
+
+
+// console.log(navlist) 
+
+
+
+
+
+var navopen = 0;
+
+// console.log(navopen); 
+
+
+nav_btn.addEventListener('click', () => {
+    // open.style.display = none;
+    // open.style.display = "none";
+    // nav.style.display = "none";
+
+
+    // nav.style.height = '100%';
+    // navlist.style.display = "none";
+    // nav_btn.style.display = "none";
+
+
+
+    if (navopen == 0) {
+        nav.style.height = '100vh';
+        // nav_btn.style.display = "none"; 
+        console.log(navopen);
+        nav_btn.classList.remove("fa-bars");
+        nav_btn.classList.add("fa-xmark");
+
+
+        navlist.style.display = "flex";
+        // close_nav.style.display = "none"; 
+
+        // console.log(navlist) 
+
+        navopen = 1;
+
+
+
+
+    }
+    else {
+        // nav.classList 
+        nav_btn.classList.add("fa-bars");
+        nav_btn.classList.remove("fa-xmark");
+        nav.style.height = 'auto';
+        navlist.style.display = "none";
+
+        // nav_btn.style.display = "block"; 
+        // close_nav.style.display = "block"; 
+        navopen = 0;
+
+
+
+
+    }
+
+
+
+
+
+
+})
+
+
+// music.addEventListener('timeupdate', () => {
+//     progress = parseInt((music.currentTime / music.duration) * 100);
+//     myProgressbar.value = progress;
+// })
diff --git a/Responsive Navigation Bar /style.css b/Responsive Navigation Bar /style.css
@@ -0,0 +1,151 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+nav{
+    display: flex;
+    align-items: center;
+    height: 7vh;
+    justify-content: space-between;
+    background-color: blueviolet;
+    color: white;
+
+}
+
+.navbar-list{
+    display: flex;
+    gap: 18px;
+}
+
+.navbar-list>  li{
+    display: inline;
+
+}
+
+.sec{
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgb(183, 217, 13);
+    align-items: center;
+    justify-content: center;
+    color: white;
+
+}
+
+.mobile-navbar-btn{
+
+    display: none;
+    gap: 12px;
+    cursor: pointer;
+    color: black;
+    cursor: pointer;
+    margin: 0px 45px; 
+
+
+}
+
+.navbar-list{
+    display: flex;
+    gap: 18px;
+}
+
+.navbar-list>  li{
+    display: inline;
+    font-size: 2rem;
+
+}
+
+
+
+.mobile-nav-icon{
+       font-size: 2em;
+    line-height: .03125em
+
+
+
+
+}
+
+.mobile-nav-icon[name="close-outline"]{
+    display: none;
+}
+
+@media screen and (max-width:600px) {
+
+.mobile-navbar-btn {
+
+    display: flex;
+    justify-content: right;
+    position: absolute;
+    top: 0;
+    padding: 12px 12px;
+
+    width: 100%;
+    gap: 12px;
+    background-color: rgb(211, 35, 35); 
+
+
+
+}
+
+.mobile-navbar-btn > ion-icon {
+
+    margin-right: 30px;
+    border: 2px solid black;
+
+
+
+
+}
+
+.mobile-navbar-btn > i{
+    padding: 5px;
+
+    margin-right: 30px;
+    border: 2px solid black;
+
+
+
+
+}
+
+
+.logo{
+    display: none;
+}
+
+
+nav{
+  position: absolute; 
+  width: 100%;
+  /* display: none;  */
+  align-items: center;
+  justify-content: center;
+  height: auto;
+  top: 0;
+   left: 0;
+
+
+}
+
+.navbar-list{
+
+   display: none; 
+
+    flex-direction: column;
+}
+
+.navbar-list>  li{
+    /* display: none; */
+
+
+
+}
+
+
+
+
+
+}