Blog Archive -

No entry

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