Home /

About

7 Aug, 2024 Mustafa Bugti No Comments

Welcome

Your Premier Destination for Software Tutorials

Launched a successful online platform for software enthusiasts

Explore Mustafa Bugti’s journey in the world of software tutorials

Hosted webinars with industry experts to share insights and knowledge

Unlock the potential of CRM software with Mustafa Bugti’s guidance

Team

Get to Know the Faces Behind Mustafa Bugti

Sara Johnson

Content Creator

Alex Chen

Tech Guru

Emily Rodriguez

CRM Specialist

Michael Patel

Project Manager

Sophia Lee

Marketing Coordinator

David Brown

Editor-in-Chief

Proud Achievements text

Unlock Your Potential

Join Us Today

Join Now

Comments closed.

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

About

Welcome

Get to Know the Faces Behind Mustafa Bugti

Join Us Today

Share this:

Like this: