<!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.