Ayushparikh-code · Ayushparikh-code · Sep 17, 2024 · Feb 14, 2024
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; */
+
+
+
+}
+
+
+
+
+
+}