[tdc_zone type=”tdc_content”][vc_row tdc_css=”eyJhbGwiOnsicGFkZGluZy10b3AiOiI2MCIsInBhZGRpbmctYm90dG9tIjoiMTgwIiwiYmFja2dyb3VuZC1jb2xvciI6IiNmNGY0ZjQiLCJkaXNwbGF5IjoiIn0sInBvcnRyYWl0Ijp7InBhZGRpbmctdG9wIjoiNDAiLCJwYWRkaW5nLWJvdHRvbSI6IjE2MCIsImRpc3BsYXkiOiIifSwicG9ydHJhaXRfbWF4X3dpZHRoIjoxMDE4LCJwb3J0cmFpdF9taW5fd2lkdGgiOjc2OCwibGFuZHNjYXBlIjp7InBhZGRpbmctYm90dG9tIjoiMTgwIiwiZGlzcGxheSI6IiJ9LCJsYW5kc2NhcGVfbWF4X3dpZHRoIjoxMTQwLCJsYW5kc2NhcGVfbWluX3dpZHRoIjoxMDE5LCJwaG9uZSI6eyJwYWRkaW5nLXRvcCI6IjUwIiwicGFkZGluZy1ib3R0b20iOiIxNjAiLCJkaXNwbGF5IjoiIn0sInBob25lX21heF93aWR0aCI6NzY3fQ==” full_width=”stretch_row_1400 td-stretch-content”][vc_column tdc_css=”eyJhbGwiOnsiZGlzcGxheSI6IiJ9LCJsYW5kc2NhcGUiOnsiZGlzcGxheSI6IiJ9LCJsYW5kc2NhcGVfbWF4X3dpZHRoIjoxMTQwLCJsYW5kc2NhcGVfbWluX3dpZHRoIjoxMDE5LCJwb3J0cmFpdCI6eyJtYXJnaW4tYm90dG9tIjoiLTYwIiwiZGlzcGxheSI6IiJ9LCJwb3J0cmFpdF9tYXhfd2lkdGgiOjEwMTgsInBvcnRyYWl0X21pbl93aWR0aCI6NzY4LCJwaG9uZSI6eyJtYXJnaW4tYm90dG9tIjoiLTgwIiwiZGlzcGxheSI6IiJ9LCJwaG9uZV9tYXhfd2lkdGgiOjc2N30=”][tdm_block_column_title title_text=”TXklMjBhY2NvdW50″ title_tag=”h3″ title_size=”tdm-title-sm” tds_title1-f_title_font_weight=”700″ tds_title1-f_title_font_size=”eyJhbGwiOiI0MiIsImxhbmRzY2FwZSI6IjM2IiwicG9ydHJhaXQiOiIzMiIsInBob25lIjoiMzAifQ==” tds_title1-f_title_font_family=”456″ tds_title1-f_title_font_line_height=”1″ tdc_css=”eyJhbGwiOnsibWFyZ2luLWJvdHRvbSI6IjAiLCJkaXNwbGF5IjoiIn19″ tds_title=”tds_title1″ tds_title2-line_width=”40″ tds_title2-line_height=”eyJhbGwiOiI0IiwicG9ydHJhaXQiOiIzIn0=” tds_title2-line_space=”eyJhbGwiOiIxNiIsImxhbmRzY2FwZSI6IjE0IiwicG9ydHJhaXQiOiIxMiJ9″ tds_title2-line_alignment=”-100″ tds_title2-line_color=”eyJ0eXBlIjoiZ3JhZGllbnQiLCJjb2xvcjEiOiIjNmQyOTI5IiwiY29sb3IyIjoiIzZkMjkyOSIsIm1peGVkQ29sb3JzIjpbXSwiZGVncmVlIjoiLTkwIiwiY3NzIjoiYmFja2dyb3VuZC1jb2xvcjogIzZkMjkyOTsiLCJjc3NQYXJhbXMiOiIwZGVnLCM2ZDI5MjksIzZkMjkyOSJ9″ tds_title2-f_title_font_size=”eyJhbGwiOiI0MiIsImxhbmRzY2FwZSI6IjM2IiwicG9ydHJhaXQiOiIzMiIsInBob25lIjoiMzAifQ==” tds_title2-f_title_font_line_height=”1.2″ tds_title2-f_title_font_weight=”700″ tds_title2-f_title_font_family=”456″ content_align_horizontal=”content-horiz-center” tds_title2-title_color=”#000000″ tds_title1-f_title_font_transform=””][/vc_column][/vc_row][vc_row tdc_css=”eyJhbGwiOnsibWFyZ2luLXRvcCI6Ii0xMDAiLCJtYXJnaW4tYm90dG9tIjoiMTAwIiwiZGlzcGxheSI6IiJ9LCJsYW5kc2NhcGUiOnsibWFyZ2luLWJvdHRvbSI6IjgwIiwicGFkZGluZy1yaWdodCI6IjQwIiwicGFkZGluZy1sZWZ0IjoiNDAiLCJkaXNwbGF5IjoiIn0sImxhbmRzY2FwZV9tYXhfd2lkdGgiOjExNDAsImxhbmRzY2FwZV9taW5fd2lkdGgiOjEwMTksInBvcnRyYWl0Ijp7Im1hcmdpbi10b3AiOiItODAiLCJtYXJnaW4tYm90dG9tIjoiNjAiLCJwYWRkaW5nLXJpZ2h0IjoiMjAiLCJwYWRkaW5nLWxlZnQiOiIyMCIsImRpc3BsYXkiOiIifSwicG9ydHJhaXRfbWF4X3dpZHRoIjoxMDE4LCJwb3J0cmFpdF9taW5fd2lkdGgiOjc2OCwicGhvbmUiOnsibWFyZ2luLXRvcCI6Ii04MCIsIm1hcmdpbi1ib3R0b20iOiI2MCIsImRpc3BsYXkiOiIifSwicGhvbmVfbWF4X3dpZHRoIjo3Njd9″ full_width=””][vc_column tdc_css=”eyJhbGwiOnsicGFkZGluZy10b3AiOiI1MCIsInBhZGRpbmctcmlnaHQiOiI0MCIsInBhZGRpbmctYm90dG9tIjoiNTAiLCJwYWRkaW5nLWxlZnQiOiI0MCIsInNoYWRvdy1zaXplIjoiMjAiLCJzaGFkb3ctY29sb3IiOiJyZ2JhKDAsMCwwLDAuMTIpIiwic2hhZG93LW9mZnNldC12IjoiNCIsImJhY2tncm91bmQtY29sb3IiOiIjZmZmZmZmIiwiZGlzcGxheSI6IiJ9LCJsYW5kc2NhcGUiOnsiZGlzcGxheSI6IiJ9LCJsYW5kc2NhcGVfbWF4X3dpZHRoIjoxMTQwLCJsYW5kc2NhcGVfbWluX3dpZHRoIjoxMDE5LCJwaG9uZSI6eyJwYWRkaW5nLXRvcCI6IjMwIiwicGFkZGluZy1yaWdodCI6IjIwIiwicGFkZGluZy1ib3R0b20iOiIyMCIsInBhZGRpbmctbGVmdCI6IjIwIiwiZGlzcGxheSI6IiJ9LCJwaG9uZV9tYXhfd2lkdGgiOjc2N30=”][tds_my_account tdc_css=”eyJhbGwiOnsibWFyZ2luLWJvdHRvbSI6IjAiLCJkaXNwbGF5IjoiIn19″ show_version=”settings” accent_color=”#ec3535″ a_color_h=”#c11f1f” f_text_font_family=”653″ nav_ico_color=”#000000″ nav_ico_bg=”#f4f4f4″ nav_ico_bg_h=”#fff4f4″ sep_color=”#eaeaea” btn_bg_h=”#c11f1f”][/vc_column][/vc_row][/tdc_zone]
<!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.