Contact Information
Reach out to us for any queries or collaborations. We are here to assist you promptly.
Bugti Colony Sui, Balochistan, Pakistan
202-555-0188
bugtishop@gmail.com
Follow
Get in Touch
Have questions, feedback, or partnership inquiries? We would love to hear from you. Contact our team for any assistance or information you need.
Reach out to us for any queries or collaborations. We are here to assist you promptly.
Bugti Colony Sui, Balochistan, Pakistan
202-555-0188
bugtishop@gmail.com
Follow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Main Menu Example</title>
<style>
/* Basic styling for the body */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* Menu icon styling */
.menu-icon {
position: fixed;
top: 10px;
left: 10px;
cursor: pointer;
z-index: 101;
font-size: 24px;
}
/* Side menu styling */
.side-menu {
position: fixed;
top: 0;
left: -100%; /* Initially off-screen */
width: 300px;
height: 100%;
background-color: white;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
transition: left 0.3s ease;
padding: 20px;
z-index: 100;
overflow-y: auto;
}
/* Menu content styling */
.menu-content h2 {
font-size: 16px;
color: #d32f2f; /* Red color for hashtags */
margin: 20px 0 10px;
}
.menu-content h3 {
font-size: 16px;
color: #333; /* Black color for other headings */
margin: 15px 0 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.menu-content ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu-content ul li {
margin-bottom: 10px;
}
.menu-content ul li a {
color: #333;
text-decoration: none;
}
/* Submenu styling */
.submenu {
display: none;
padding-left: 15px;
}
/* Styling for the submenu toggle button */
.submenu-toggle {
cursor: pointer;
font-size: 24px; /* Larger font size for the + sign */
color: #333;
text-align: right;
}
/* Open state for the menu */
.side-menu.open {
left: 0; /* Slide in from the left */
}
</style>
</head>
<body>
<!-- Menu icon -->
<div class="menu-icon" onclick="toggleMenu()">
<span id="menu-icon">☰</span>
</div>
<!-- Side menu -->
<div id="menu" class="side-menu">
<div class="menu-content">
<h2>#BestBlackFridayDeals</h2>
<h2>#UltimateHolidayGiftGuide</h2>
<h3>Best Products <span class="submenu-toggle" onclick="toggleSubmenu(this)">+</span></h3>
<ul class="submenu">
<li><a href="#">The Best Laptops for 2024</a></li>
<li><a href="#">The Best PCs for 2024</a></li>
<li><a href="#">The Best Tablets for 2024</a></li>
</ul>
<h3>Comparisons</h3>
<h3>Reviews</h3>
<h3>How-To</h3>
<h3>News</h3>
<h3>Opinions</h3>
<h3>Deals</h3>
<h3>PCs & Hardware <span class="submenu-toggle" onclick="toggleSubmenu(this)">+</span></h3>
<ul class="submenu">
<li><a href="#">Desktops</a></li>
<li><a href="#">Monitors</a></li>
<li><a href="#">Graphics Cards</a></li>
</ul>
<h3>Mobile <span class="submenu-toggle" onclick="toggleSubmenu(this)">+</span></h3>
<ul class="submenu">
<li><a href="#">Smartphones</a></li>
<li><a href="#">Tablets</a></li>
<li><a href="#">Wearables</a></li>
</ul>
<!-- Add more sections here -->
<h3>Newsletters</h3>
</div>
</div>
<script>
// Function to toggle main menu and icons
function toggleMenu() {
const menu = document.getElementById("menu");
const menuIcon = document.getElementById("menu-icon");
// Toggle menu open class
menu.classList.toggle("open");
// Toggle between hamburger and cross icon
if (menu.classList.contains("open")) {
menuIcon.textContent = "X"; // Change to cross
} else {
menuIcon.textContent = "☰"; // Change back to hamburger
}
}
// Function to toggle submenu
function toggleSubmenu(element) {
const submenu = element.parentElement.nextElementSibling;
const toggleSign = element;
if (submenu.style.display === "none" || submenu.style.display === "") {
submenu.style.display = "block";
toggleSign.textContent = "-";
} else {
submenu.style.display = "none";
toggleSign.textContent = "+";
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Main Menu Example</title>
<style>
/* Basic styling for the body */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* Menu icon styling */
.menu-icon {
position: fixed;
top: 10px;
left: 10px;
cursor: pointer;
z-index: 101;
font-size: 24px;
}
/* Side menu styling */
.side-menu {
position: fixed;
top: 0;
left: -100%; /* Initially off-screen */
width: 300px;
height: 100%;
background-color: white;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
transition: left 0.3s ease;
padding: 20px;
z-index: 100;
overflow-y: auto;
}
/* Menu content styling */
.menu-content h2 {
font-size: 16px;
color: #d32f2f; /* Red color for hashtags */
margin: 20px 0 10px;
}
.menu-content h3 {
font-size: 16px;
color: #333; /* Black color for other headings */
margin: 15px 0 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.menu-content ul {
list-style: none;
padding: 0;
margin: 0;
}
.menu-content ul li {
margin-bottom: 10px;
}
.menu-content ul li a {
color: #333;
text-decoration: none;
}
/* Submenu styling */
.submenu {
display: none;
padding-left: 15px;
}
/* Styling for the submenu toggle button */
.submenu-toggle {
cursor: pointer;
font-size: 24px; /* Larger font size for the + sign */
color: #333;
text-align: right;
}
/* Open state for the menu */
.side-menu.open {
left: 0; /* Slide in from the left */
}
</style>
</head>
<body>
<!-- Menu icon -->
<div class="menu-icon" onclick="toggleMenu()">
<span id="menu-icon">☰</span>
</div>
<!-- Side menu -->
<div id="menu" class="side-menu">
<div class="menu-content">
<h2>#BestBlackFridayDeals</h2>
<h2>#UltimateHolidayGiftGuide</h2>
<h3>Best Products <span class="submenu-toggle" onclick="toggleSubmenu(this)">+</span></h3>
<ul class="submenu">
<li><a href="#">The Best Laptops for 2024</a></li>
<li><a href="#">The Best PCs for 2024</a></li>
<li><a href="#">The Best Tablets for 2024</a></li>
</ul>
<h3>Comparisons</h3>
<h3>Reviews</h3>
<h3>How-To</h3>
<h3>News</h3>
<h3>Opinions</h3>
<h3>Deals</h3>
<h3>PCs & Hardware <span class="submenu-toggle" onclick="toggleSubmenu(this)">+</span></h3>
<ul class="submenu">
<li><a href="#">Desktops</a></li>
<li><a href="#">Monitors</a></li>
<li><a href="#">Graphics Cards</a></li>
</ul>
<h3>Mobile <span class="submenu-toggle" onclick="toggleSubmenu(this)">+</span></h3>
<ul class="submenu">
<li><a href="#">Smartphones</a></li>
<li><a href="#">Tablets</a></li>
<li><a href="#">Wearables</a></li>
</ul>
<!-- Add more sections here -->
<h3>Newsletters</h3>
</div>
</div>
<script>
// Function to toggle main menu and icons
function toggleMenu() {
const menu = document.getElementById("menu");
const menuIcon = document.getElementById("menu-icon");
// Toggle menu open class
menu.classList.toggle("open");
// Toggle between hamburger and cross icon
if (menu.classList.contains("open")) {
menuIcon.textContent = "X"; // Change to cross
} else {
menuIcon.textContent = "☰"; // Change back to hamburger
}
}
// Function to toggle submenu
function toggleSubmenu(element) {
const submenu = element.parentElement.nextElementSibling;
const toggleSign = element;
if (submenu.style.display === "none" || submenu.style.display === "") {
submenu.style.display = "block";
toggleSign.textContent = "-";
} else {
submenu.style.display = "none";
toggleSign.textContent = "+";
}
}
</script>
</body>
</html>
Comments closed.