<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>
</head>
<body>
<header>
<nav class="navbar">
<div class="allcat">
<a class="navbar-all-category" href="#">All <br>Category</a>
</div>
<div class="navbar-logo">
<img src="https://skyldev.com/images/logo/Skyldev-logo-rectangular.png" alt="Logo">
</div>
<div class="navbar-address allcat">
<a href="#">Select <br>Your Address</a>
</div>
<div class="navbar-search">
<input type="text" placeholder="Search...">
<button type="submit">Search</button>
</div>
<div class="navbar-actions">
<!-- Add this inside the .navbar-actions div, before the other links -->
<a href="./">Home</a>
<a href="login">Account</a>
<a href="cart">Cart</a>
</div>
</nav>
</header>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark hidform">
<form class="form-inline" action="/action_page.php">
<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 class="category collapsed">
<h4 class="category-toggle">Category 1</h4>
<div class="subcategory collapsed">
<h5 class="subcategory-toggle">Subcategory 1.2</h5>
<ul class="options undoted-list">
<li><a href="">Option 1</a></li>
<li><a href="">Option 1</a></li>
<li><a href="">Option 1</a></li>
</ul>
</div>
<div class="subcategory collapsed">
<h5 class="subcategory-toggle">Subcategory 1.3</h5>
<ul class="options undoted-list">
<li>Option 12</li>
<li>Option 22</li>
<li>Option 32</li>
</ul>
</div>
</div>
<div class="category collapsed">
<h4 class="category-toggle">Category 2</h4>
<div class="subcategory collapsed">
<h5 class="subcategory-toggle">Subcategory 2.1</h5>
<ul class="options undoted-list">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
</div>
<!-- Add more categories -->
</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>
/* Reset some default styles */
body, ul {
margin: 0;
padding: 0;
}
/* Navbar styles */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #232f3e;
color: #ffffff;
padding: 10px 20px;
}
.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;
}
.hidform {
display: none; /* Hide the search bar on small screens */
}
.navbar-actions a {
text-decoration: none;
color: #ffffff;
margin-left: 10px;
}
.allcat a{
text-decoration: none;
color: #ffffff;
}
/* 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 {
margin-bottom: 10px;
cursor: pointer;
background-color: #35495e; /* Category background color */
padding: 8px;
border-radius: 4px;
}
.subcategory h5 {
margin-bottom: 5px;
cursor: pointer;
background-color: #50677e; /* Subcategory background color */
padding: 8px;
border-radius: 4px;
}
.options {
/* display: none;*/
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;
}
/* 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 */
}
.hidform {
display: block; /* Display the navbar on screens up to 991px wide */
}
.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";
});
});
