<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="navbar.css">
<title>Your Website</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<section class="col-lg-12 col-md-12 col-sm-12 col-12">
<!-- Contact Navbar -->
<div class="top-head pt-1">
<div class="">
<div class="row">
<div class="col-md-12 text-right">
<ul class="list-inline ">
<a href="tel: +919051918008"><li class="list-inline-item"><small><i class="fa fa-phone"></i> +91 9051918008</small></li></a>
<a href="contact"><li class="list-inline-item"><small><i class="fa fa-commenting-o" aria-hidden="true"></i>Feedback</small></li></a>
<!--<a href="contact"><li class="list-inline-item"><small> Help</small></li></a>-->
<a href="track_my_order"><li class="list-inline-item"><small><i class="fa fa-search" aria-hidden="true"></i>Track Order</small></li></a>
<a href="cart"><li class="list-inline-item"><small><i class="fa fa-shopping-basket" aria-hidden="true"></i>Cart</small></li></a>
</ul>
</div>
</div>
</div>
</div>
</section>
<header>
<nav class="navbar">
<div class="allcat">
<a class="navbar-all-category" href="#">All <br>Category</a>
</div>
<div class="navbar-logo">
<a href="./">
<img src="https://skyldev.com/images/logo/Skyldev-logo-rectangular.png" alt="Logo">
</a>
</div>
<div class="navbar-address allcat">
<a href="#">Select <br>Your Address</a>
</div>
<div class="navbar-search pl-4">
<form class="form-inline" method="get" action="/search.php" enctype="multipart/form-data">
<input type="text" placeholder="Search...">
<button type="submit">Search</button>
</form>
</div>
<div class="navbar-actions">
<!-- Add this inside the .navbar-actions div, before the other links -->
<a href="./"><i class="fa fa-home" aria-hidden="true"></i>Home</a>
<a href="login"><i class="fa fa-user" aria-hidden="true"></i>Account</a>
<a href="cart"><i class="fa fa-shopping-bag" aria-hidden="true"></i>Cart</a>
</div>
</nav>
</header>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark d-md-none">
<form class="form-inline" method="get" action="/search.php" enctype="multipart/form-data">
<input type="text" placeholder="Search...">
<button type="submit">Search</button>
</form>
</nav>
<!-- Add this inside the <body> tag, before the <header> -->
<!-- Add this inside the <body> tag, before the <header> -->
<div class="sidebar">
<div class="sidebar-header">
<h3>All Categories</h3>
<button class="close-sidebar">×</button>
</div>
</div>
<div class="address-popup" id="addressPopup">
<div class="popup-content">
<span class="close-btn" id="closePopup">×</span>
<h2>Select Your Address</h2>
<input type="text" placeholder="Enter your address">
<button id="applyAddress">Apply</button>
</div>
</div>
<!-- Rest of your website content -->
<script src="navbar.js"></script>
</body>
</html>
/* Navbar styles */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #232f3e;
color: #ffffff;
padding: 10px 20px;
font-size: 17px;
}
.navbar-logo img {
height: 50px; /* Adjust as needed */
}
/* ... Previous CSS rules ... */
.navbar-search {
flex: 1;
max-width: 70%;
}
.navbar-search input[type="text"] {
width: 60%;
padding: 8px;
border: none;
border-radius: 4px;
}
.navbar-search button {
padding: 8px 15px;
background-color: #ff9900;
border: none;
border-radius: 4px;
color: #ffffff;
cursor: pointer;
}
.navbar-actions a {
text-decoration: none;
color: #ffffff;
margin-left: 10px;
transition: color 0.3s ease;
display: inline-flex; /* Display the links as flex items */
flex-direction: column; /* Stack the icon and text vertically */
align-items: center; /* Center items horizontally */
justify-content: center; /* Center items vertically */
text-align: center; /* Center the text within the link */
}
.navbar-actions a:hover {
color: #ff9900;
}
.allcat a {
text-decoration: none;
color: #ffffff;
transition: color 0.3s ease; /* Add a transition effect for color changes */
}
.allcat a:hover {
color: #ff9900; /* Change the color on hover */
}
/* Popup styles */
.address-popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.popup-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
text-align: center;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
cursor: pointer;
}
.popup-content h2 {
margin-bottom: 10px;
}
.popup-content input[type="text"] {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 10px;
}
.popup-content button {
padding: 8px 15px;
background-color: #ff9900;
border: none;
border-radius: 4px;
color: #ffffff;
cursor: pointer;
}
.sidebar {
position: fixed;
top: 0;
left: -100%; /* Initially off-screen */
width: 300px;
height: 100%;
background-color: #232f3e;
color: #ffffff;
padding: 20px;
transition: left 0.3s ease-in-out;
z-index: 1000;
overflow-y: auto; /* Add this to enable vertical scrolling */
}
.sidebar.active {
left: 0; /* Slide in when active */
}
.sidebar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.close-sidebar {
background: none;
border: none;
font-size: 24px;
color: #ffffff;
cursor: pointer;
}
.category h4 {
font-size: 18px;
margin-bottom: 10px;
cursor: pointer;
background-color: #35495e; /* Category background color */
padding: 8px;
border-radius: 4px;
}
.subcategory h5 {
font-size: 16px;
margin-bottom: 5px;
cursor: pointer;
background-color: #50677e; /* Subcategory background color */
padding: 8px;
border-radius: 4px;
}
.options {
/* display: none;*/
font-size: 16px;
background-color: #5e7f98; /* Options background color */
padding: 8px;
border-radius: 4px;
margin-top: 5px; /* Add a small margin to separate options */
list-style: none;
}
.options li{
margin-bottom: 8px; /* Add space between list items */
line-height: 1.4; /* Improved line spacing */
}
.options a{
text-decoration: none;
color: #ffffff;
transition: color 0.3s ease;
}
.options a:hover {
color: #ff9900; /* Change the color on hover */
}
/* Add this to style collapsed categories and subcategories */
.category.collapsed .subcategory {
display: none;
}
/* Add this to style collapsed subcategories' options */
.subcategory.collapsed .options {
display: none;
}
.category-toggle,
.subcategory-toggle .options-toggle{
cursor: pointer;
}
.subcategory.active {
display: block; /* Display when active */
}
.options.active {
display: block; /* Hide options by default */
}
.subcategory.active .options {
display: block; /* Display options when subcategory is active */
}
/* Add this to style collapsed categories and subcategories */
.category.collapsed .subcategory {
display: none;
}
/* Add this to style collapsed subcategories' options */
.subcategory.collapsed .options {
display: none;
}
/* ... Previous CSS rules ... */
@media (max-width: 767px) {
.navbar-search {
display: none; /* Hide the search bar on small screens */
}
.form-inline {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 10px;
}
.form-inline input[type="text"] {
width: 70%; /* Input field takes 70% of the width */
padding: 10px;
border: none;
border-radius: 4px;
}
.form-inline button {
width: 20%; /* Button takes 20% of the width */
padding: 10px 15px;
background-color: #ff9900;
border: none;
border-radius: 4px;
color: #ffffff;
cursor: pointer;
}
.navbar-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px; /* Add some space from the header */
padding: 10px; /* Add padding to the buttons for better touch interaction */
background-color: #232f3e; /* Match the navbar background color */
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
.navbar-actions a {
text-decoration: none;
color: #ffffff;
margin: 0 5px; /* Add padding between buttons */
text-align: center;
width: 33.33%; /* Distribute buttons evenly */
}
}
const sidebar = document.querySelector('.sidebar');
const openSidebarButton = document.querySelector('.navbar-all-category');
const closeSidebarButton = document.querySelector('.close-sidebar');
const categoryHeaders = document.querySelectorAll('.category h4');
const subcategoryHeaders = document.querySelectorAll('.subcategory h5');
openSidebarButton.addEventListener('click', (event) => {
event.preventDefault();
sidebar.classList.add('active');
});
closeSidebarButton.addEventListener('click', () => {
sidebar.classList.remove('active');
});
categoryHeaders.forEach(header => {
header.addEventListener('click', () => {
header.parentElement.classList.toggle('collapsed');
});
});
subcategoryHeaders.forEach(header => {
header.addEventListener('click', () => {
header.parentElement.classList.toggle('collapsed');
});
});
document.addEventListener("DOMContentLoaded", function () {
const addressPopup = document.getElementById("addressPopup");
const openPopup = document.querySelector(".navbar-address");
const closePopup = document.getElementById("closePopup");
openPopup.addEventListener("click", function () {
addressPopup.style.display = "block";
});
closePopup.addEventListener("click", function () {
addressPopup.style.display = "none";
});
});
