Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Project DropDown Navigation Bar is Completed #38

Merged
merged 4 commits into from
Jun 18, 2024
Merged

Project DropDown Navigation Bar is Completed #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
24ac078
Project dropdown_navbar completed
Vansh-kash2023 Jun 17, 2024
0abd64f
Merge branch 'Main' of https://github.com/dhairyagothi/50_days_50_web…
Vansh-kash2023 Jun 17, 2024
a7cf52e
html, readme file updated
Vansh-kash2023 Jun 18, 2024
9b81076
files deleted
Vansh-kash2023 Jun 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 0 additions & 70 deletions public/dropdown_navbar/dropdown.css
View file
Open in desktop

This file was deleted.

39 changes: 0 additions & 39 deletions public/dropdown_navbar/dropdown.html
View file
Open in desktop

This file was deleted.

Binary file added public/dropdown_navbar/img/pic.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
270 changes: 270 additions & 0 deletions public/dropdown_navbar/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,270 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DropDown Menu</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="input.css">
</head>

<body class="bg-gray-900">

<nav class="bg-gray-800 w-screen">
<div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
<div class="relative flex items-center justify-between h-16">
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
<!-- Mobile menu button-->
<button type="button"
class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
aria-expanded="false" aria-haspopup="false" id="mobile-menu">


<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>

<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
<!-- Logo -->
<div class="flex-shrink-0 flex items-center">
<svg class="block h-8 w-auto" fill="#55bbdd" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" xml:space="preserve" stroke="#55bbdd">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12 6.036c-2.667 0-4.333 1.325-5 3.976 1-1.325 2.167-1.822 3.5-1.491.761.189 1.305.738 1.906 1.345C13.387 10.855 14.522 12 17 12c2.667 0 4.333-1.325 5-3.976-1 1.325-2.166 1.822-3.5 1.491-.761-.189-1.305-.738-1.907-1.345-.98-.99-2.114-2.134-4.593-2.134zM7 12c-2.667 0-4.333 1.325-5 3.976 1-1.326 2.167-1.822 3.5-1.491.761.189 1.305.738 1.907 1.345.98.989 2.115 2.134 4.594 2.134 2.667 0 4.333-1.325 5-3.976-1 1.325-2.167 1.822-3.5 1.491-.761-.189-1.305-.738-1.906-1.345C10.613 13.145 9.478 12 7 12z">
</path>
</g>
</svg>
</div>
<div class="hidden sm:block sm:ml-6">

<div class="flex space-x-4">
<a href="#" class="text-white hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium"
aria-current="page">Grocery</a>

<a href="#"
class="text-white hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Mobile</a>

<a href="#"
class="text-white hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium"
id="appliances" aria-expanded="false" aria-haspopup="false">Appliances</a>


<div role="menu" aria-orientation="vertical" aria-labelledby="appliances" tabindex="-1"
class="hidden absolute top-20 left-48 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none rounded-md"
id="appliances-dd">
<div class="block px-4 py-2 rounded-md text-base font-medium">Refrigerator</div>
<div class="block px-4 py-2 rounded-md text-base font-medium">Air Conditioner</div>
<div class="block px-4 py-2 rounded-md text-base font-medium">Washing Machine</div>
<div class="block px-4 py-2 rounded-md text-base font-medium">Telivision</div>
<div class="block px-4 py-2 rounded-md text-base font-medium">Others</div>
</div>

<a href="#"
class="text-white hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Vehicle</a>


<a href="#"
class="text-white hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">Travel</a>

<a href="#"
class="text-white hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium"
id="fashion">Fashion</a>

<div role="menu" aria-orientation="vertical" aria-labelledby="fashion" tabindex="-1"
class="hidden absolute top-20 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none rounded-md" id="fashion-dd"
role="none">
<div class="block px-4 py-2 rounded-md text-base font-medium">Men's Fashion</div>
<div class="block px-4 py-2 rounded-md text-base font-medium">Women's Fashion</div>
<div class="block px-4 py-2 rounded-md text-base font-medium">Kid's Fashion</div>
</div>
</div>
</div>
</div>
<div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">
<button
class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">

<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>

<!-- Profile dropdown -->
<div class="ml-3 relative">
<div>
<button type="button"
class="bg-gray-800 flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<img class="h-8 w-8 rounded-full" src="./img/pic.jpg" alt="">
</button>
</div>

<div class="hidden origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1"
id="user-menu">

<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1"
id="user-menu-item-0">Your Profile</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1"
id="user-menu-item-1">Settings</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1"
id="user-menu-item-2">Sign out</a>
</div>
</div>
</div>
</div>
</div>

<!-- Mobile menu, show/hide based on menu state. -->
<div class="sm:hidden">
<div class="px-2 pt-2 pb-3 space-y-1 hidden" role="menu" aria-orientation="vertical" aria-labelledby="mobile-menu" tabindex="-1" id="mobile-menu-dd">

<a href="#" class="text-white hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium"
aria-current="page">Grocery</a>

<a href="#"
class=" hover:bg-gray-700 text-white block px-3 py-2 rounded-md text-base font-medium">Mobile</a>

<a href="#"
class= "hover:bg-gray-700 text-white block px-3 py-2 rounded-md text-base font-medium">Appliances</a>

<a href="#"
class=" hover:bg-gray-700 text-white block px-3 py-2 rounded-md text-base font-medium">Fashion</a>
<a href="#"
class=" hover:bg-gray-700 text-white block px-3 py-2 rounded-md text-base font-medium">Travel</a>
<a href="#"
class=" hover:bg-gray-700 text-white block px-3 py-2 rounded-md text-base font-medium">Vehicle</a>
</div>
</div>
</nav>

<div class="label flex justify-center items-center flex-wrap">
<div class="text-white text-base px-5 py-5">DropDown is Present under Appliances, Fashion and Account Tab</div>
</div>


<footer id="footer" class="text-white text-base py-5 absolute bottom-0 left-2">
<div>This Project is created by <b>~Vansh Kashyap</b></div>
</footer>


<script>
// JavaScript to handle dropdown toggle
document.getElementById('appliances').addEventListener('click', function () {
const dropdownMenu = document.getElementById('appliances-dd');
if (dropdownMenu.style.display === 'block') {
dropdownMenu.style.display = 'none';
} else {
dropdownMenu.style.display = 'block';
}
});

document.getElementById('fashion').addEventListener('click', function () {
const dropdownMenu = document.getElementById('fashion-dd');
if (dropdownMenu.style.display === 'block') {
dropdownMenu.style.display = 'none';
} else {
dropdownMenu.style.display = 'block';
}
});

document.getElementById('user-menu-button').addEventListener('click', function () {
const dropdownMenu = document.getElementById('user-menu');
if (dropdownMenu.style.display === 'block') {
dropdownMenu.style.display = 'none';
} else {
dropdownMenu.style.display = 'block';
}
});

document.getElementById('mobile-menu').addEventListener('click', function () {
const dropdownMenu = document.getElementById('mobile-menu-dd');
if (dropdownMenu.style.display === 'block') {
dropdownMenu.style.display = 'none';
} else {
dropdownMenu.style.display = 'block';
}
});

// Close the dropdown when clicking outside of it
document.addEventListener('click', function (event) {
const dropdownButton = document.getElementById('appliances');
const dropdownMenu = document.getElementById('appliances-dd');
if (!dropdownButton.contains(event.target) && !dropdownMenu.contains(event.target)) {
dropdownMenu.style.display = 'none';
dropdownButton.classList.remove('bg-gray-900')
}
});

document.addEventListener('click', function (event) {
const dropdownButton = document.getElementById('fashion');
const dropdownMenu = document.getElementById('fashion-dd');
if (!dropdownButton.contains(event.target) && !dropdownMenu.contains(event.target)) {
dropdownMenu.style.display = 'none';
dropdownButton.classList.remove('bg-gray-900');
}
});

document.addEventListener('click', function (event) {
const dropdownButton = document.getElementById('user-menu-button');
const dropdownMenu = document.getElementById('user-menu');
if (!dropdownButton.contains(event.target) && !dropdownMenu.contains(event.target)) {
dropdownMenu.style.display = 'none';

}
});

document.addEventListener('click', function (event) {
const dropdownButton = document.getElementById('mobile-menu');
const dropdownMenu = document.getElementById('mobile-menu-dd');
if (!dropdownButton.contains(event.target) && !dropdownMenu.contains(event.target)) {
dropdownMenu.style.display = 'none';

}
});

// changing background when selected
const element = document.getElementById('appliances');

if (element) {
// Add event listener to the element
element.addEventListener('click', function () {
// Toggle the specified class on the clicked element
element.classList.toggle('bg-gray-900');
});
} else {
console.error(`Element with given ID not found.`);
}

const e = document.getElementById('fashion');

if (e) {
// Add event listener to the element
e.addEventListener('click', function () {
// Toggle the specified class on the clicked element
e.classList.toggle('bg-gray-900');
});
} else {
console.error(`Element with given ID not found.`);
}

</script>

</body>

</html>
11 changes: 11 additions & 0 deletions public/dropdown_navbar/input.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

#fashion-dd{
left: 450px;
}

.label{
height: 80vh;
}
Loading