[tdc_zone type=”tdc_content”][vc_row full_width=”” flex_layout=”eyJhbGwiOiJyb3ciLCJwaG9uZSI6ImNvbHVtbiJ9″ flex_vert_align=”eyJhbGwiOiJjZW50ZXIiLCJwaG9uZSI6ImZsZXgtc3RhcnQifQ==” tdc_css=”eyJhbGwiOnsibWFyZ2luLXJpZ2h0IjoiMCIsIm1hcmdpbi1sZWZ0IjoiMCIsImRpc3BsYXkiOiIifSwibGFuZHNjYXBlIjp7ImRpc3BsYXkiOiIifSwibGFuZHNjYXBlX21heF93aWR0aCI6MTE0MCwibGFuZHNjYXBlX21pbl93aWR0aCI6MTAxOSwicG9ydHJhaXQiOnsiZGlzcGxheSI6IiJ9LCJwb3J0cmFpdF9tYXhfd2lkdGgiOjEwMTgsInBvcnRyYWl0X21pbl93aWR0aCI6NzY4fQ==” gap=”eyJhbGwiOiI1MCIsInBvcnRyYWl0IjoiMzAiLCJsYW5kc2NhcGUiOiI0MCJ9″][vc_column width=”1/2″ tdc_css=”eyJhbGwiOnsicGFkZGluZy10b3AiOiIzMCIsInBhZGRpbmctcmlnaHQiOiI0MCIsInBhZGRpbmctYm90dG9tIjoiNDAiLCJwYWRkaW5nLWxlZnQiOiI0MCIsIndpZHRoIjoiNDAlIiwiYmFja2dyb3VuZC1jb2xvciI6IiNlYzM1MzUiLCJjb250ZW50LWgtYWxpZ24iOiJjb250ZW50LWhvcml6LWNlbnRlciIsImRpc3BsYXkiOiIifSwibGFuZHNjYXBlIjp7InBhZGRpbmctdG9wIjoiMjAiLCJwYWRkaW5nLXJpZ2h0IjoiMzAiLCJwYWRkaW5nLWJvdHRvbSI6IjMwIiwicGFkZGluZy1sZWZ0IjoiMzAiLCJkaXNwbGF5IjoiIn0sImxhbmRzY2FwZV9tYXhfd2lkdGgiOjExNDAsImxhbmRzY2FwZV9taW5fd2lkdGgiOjEwMTksInBvcnRyYWl0Ijp7InBhZGRpbmctdG9wIjoiMTAiLCJwYWRkaW5nLXJpZ2h0IjoiMjAiLCJwYWRkaW5nLWJvdHRvbSI6IjI1IiwicGFkZGluZy1sZWZ0IjoiMjAiLCJkaXNwbGF5IjoiIn0sInBvcnRyYWl0X21heF93aWR0aCI6MTAxOCwicG9ydHJhaXRfbWluX3dpZHRoIjo3NjgsInBob25lIjp7Im1hcmdpbi1ib3R0b20iOiIzMCIsIndpZHRoIjoiMTAwJSIsImRpc3BsYXkiOiIifSwicGhvbmVfbWF4X3dpZHRoIjo3Njd9″][tdm_block_column_title title_text=”TmV3cyUyMFdlZWslM0NiciUzRU1hZ2F6aW5lJTIwUFJP” title_tag=”h3″ title_size=”tdm-title-sm” tds_title1-f_title_font_family=”653″ tds_title1-f_title_font_size=”eyJhbGwiOiIyNCIsInBvcnRyYWl0IjoiMTgifQ==” tds_title1-f_title_font_weight=”700″ tds_title1-f_title_font_transform=”” tds_title1-title_color=”#ffffff” tds_title1-f_title_font_line_height=”1.1″ content_align_horizontal=”content-horiz-center” tdc_css=”eyJhbGwiOnsibWFyZ2luLWJvdHRvbSI6IjEwIiwiZGlzcGxheSI6IiJ9LCJsYW5kc2NhcGUiOnsiZGlzcGxheSI6IiJ9LCJsYW5kc2NhcGVfbWF4X3dpZHRoIjoxMTQwLCJsYW5kc2NhcGVfbWluX3dpZHRoIjoxMDE5LCJwb3J0cmFpdCI6eyJtYXJnaW4tYm90dG9tIjoiNSIsImRpc3BsYXkiOiIifSwicG9ydHJhaXRfbWF4X3dpZHRoIjoxMDE4LCJwb3J0cmFpdF9taW5fd2lkdGgiOjc2OH0=”][vc_single_image media_size_image_height=”464″ media_size_image_width=”696″ image=”29184″ height=”200″ tdc_css=”eyJhbGwiOnsibWFyZ2luLXJpZ2h0IjoiYXV0byIsIm1hcmdpbi1ib3R0b20iOiIzMCIsIm1hcmdpbi1sZWZ0IjoiYXV0byIsImRpc3BsYXkiOiIifSwicG9ydHJhaXQiOnsibWFyZ2luLWJvdHRvbSI6IjIwIiwiZGlzcGxheSI6IiJ9LCJwb3J0cmFpdF9tYXhfd2lkdGgiOjEwMTgsInBvcnRyYWl0X21pbl93aWR0aCI6NzY4fQ==”][tdm_block_button button_size=”tdm-btn-sm” button_display=”tdm-block-button-inline” tdc_css=”eyJhbGwiOnsiZGlzcGxheSI6IiJ9LCJwb3J0cmFpdCI6eyJtYXJnaW4tbGVmdCI6IjYiLCJkaXNwbGF5IjoiIn0sInBvcnRyYWl0X21heF93aWR0aCI6MTAxOCwicG9ydHJhaXRfbWluX3dpZHRoIjo3NjgsImxhbmRzY2FwZSI6eyJkaXNwbGF5IjoiIn0sImxhbmRzY2FwZV9tYXhfd2lkdGgiOjExNDAsImxhbmRzY2FwZV9taW5fd2lkdGgiOjEwMTl9″ tds_button1-background_color=”#ffffff” tds_button1-background_hover_color=”rgba(255,255,255,0.9)” tds_button1-border_radius=”3″ tds_button1-f_btn_text_font_family=”653″ tds_button1-f_btn_text_font_transform=”uppercase” tds_button1-f_btn_text_font_weight=”600″ tds_button1-f_btn_text_font_size=”eyJhbGwiOiIxMyIsInBvcnRyYWl0IjoiMTIifQ==” button_padding=”eyJhbGwiOiIxMnB4IDE0cHgiLCJwb3J0cmFpdCI6IjEwcHggMTJweCJ9″ tds_button1-f_btn_text_font_spacing=”eyJhbGwiOiIwLjUiLCJwb3J0cmFpdCI6IjAifQ==” button_text=”Subscribe Now” tds_button1-text_color=”#ec3535″ tds_button1-text_hover_color=”#000000″ button_url=”plans/”][/vc_column][vc_column width=”1/2″ tdc_css=”eyJhbGwiOnsid2lkdGgiOiI2MCUiLCJkaXNwbGF5IjoiIn0sImxhbmRzY2FwZSI6eyJkaXNwbGF5IjoiIn0sImxhbmRzY2FwZV9tYXhfd2lkdGgiOjExNDAsImxhbmRzY2FwZV9taW5fd2lkdGgiOjEwMTksInBvcnRyYWl0Ijp7ImRpc3BsYXkiOiIifSwicG9ydHJhaXRfbWF4X3dpZHRoIjoxMDE4LCJwb3J0cmFpdF9taW5fd2lkdGgiOjc2OCwicGhvbmUiOnsid2lkdGgiOiIxMDAlIiwiZGlzcGxheSI6IiJ9LCJwaG9uZV9tYXhfd2lkdGgiOjc2N30=”][tdm_block_column_title title_tag=”h3″ title_size=”tdm-title-sm” tds_title1-f_title_font_family=”653″ tds_title1-f_title_font_weight=”700″ tds_title1-f_title_font_size=”eyJhbGwiOiIzMiIsImxhbmRzY2FwZSI6IjMwIiwicG9ydHJhaXQiOiIyNiJ9″ tds_title1-title_color=”#000000″ tdc_css=”eyJhbGwiOnsibWFyZ2luLWJvdHRvbSI6IjEwIiwiZGlzcGxheSI6IiJ9LCJsYW5kc2NhcGUiOnsiZGlzcGxheSI6IiJ9LCJsYW5kc2NhcGVfbWF4X3dpZHRoIjoxMTQwLCJsYW5kc2NhcGVfbWluX3dpZHRoIjoxMDE5LCJwb3J0cmFpdCI6eyJkaXNwbGF5IjoiIn0sInBvcnRyYWl0X21heF93aWR0aCI6MTAxOCwicG9ydHJhaXRfbWluX3dpZHRoIjo3NjgsInBob25lIjp7ImRpc3BsYXkiOiIifSwicGhvbmVfbWF4X3dpZHRoIjo3Njd9″ tds_title1-f_title_font_spacing=”-1″ tds_title1-f_title_font_line_height=”1″ title_text=”Q29tcGFueQ==”][td_block_list_menu menu_id=”176″ list_padding=”0″ item_space=”eyJhbGwiOiI4IiwicG9ydHJhaXQiOiI1In0=” f_list_font_family=”653″ f_list_font_weight=”500″ f_list_font_size=”eyJhbGwiOiIxNSIsInBvcnRyYWl0IjoiMTQifQ==” menu_color=”#000000″ menu_hover_color=”#ec3535″ tdc_css=”eyJhbGwiOnsibWFyZ2luLWJvdHRvbSI6IjE1IiwiZGlzcGxheSI6IiJ9LCJwb3J0cmFpdCI6eyJkaXNwbGF5IjoiIn0sInBvcnRyYWl0X21heF93aWR0aCI6MTAxOCwicG9ydHJhaXRfbWluX3dpZHRoIjo3NjgsInBob25lIjp7Im1hcmdpbi1ib3R0b20iOiIyNSIsImRpc3BsYXkiOiIifSwicGhvbmVfbWF4X3dpZHRoIjo3Njd9″ f_list_font_line_height=”1.6″][/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.