SFMC环境下双颜色状态导航栏开发技术支持请求

Got it, let's get your dual-state navigation bar working perfectly in SFMC. Since SFMC requires all code (HTML, CSS, JS) to be bundled together, I've combined everything into a single block and adjusted it to meet all your requirements. Here's the breakdown and final code:

Key Adjustments Made: #

• Page-specific active states: Added logic to automatically set the blue "active" state based on which page the user is on (Home for the homepage, Employer for its page).
• Consistent hover behavior: Every navigation item (including dropdown buttons) turns blue on hover, and reverts to its correct state (green for non-active items, blue for the current page's item) when the mouse moves away.
• Fixed mobile responsiveness: Ensured dropdowns work properly when the menu is collapsed on small screens.
• Optional toggle for requirement 1: Included a commented section if you truly want the Home item to switch back to green after hovering away on the homepage (note this conflicts slightly with the "current page" indicator in requirement 3, so I made it optional).

Final Integrated Code (Ready for SFMC): #

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        body { 
            margin: 0; 
            font-family: Arial, Helvetica, sans-serif; 
        } 
        .topnav { 
            overflow: hidden; 
            background-color: #47a23f; 
        } 
        .topnav a { 
            float: left; 
            font-size: 16px; 
            color: white; 
            text-align: center; 
            padding: 14px 16px; 
            text-decoration: none;
            background-color: #47a23f;
            transition: background-color 0.3s ease;
        } 
        .dropdown .dropbtn { 
            font-size: 16px; 
            border: none; 
            outline: none; 
            color: white; 
            padding: 14px 16px; 
            background-color: inherit; 
            font-family: inherit; 
            margin: 0;
            transition: background-color 0.3s ease;
        } 
        .dropdown { 
            float: left; 
            overflow: hidden; 
        } 
        .topnav a:hover, .dropdown:hover .dropbtn { 
            background-color: #005da6; 
        } 
        .topnav a.active { 
            background-color: #005da6; 
            color: white; 
        } 
        .topnav .icon { 
            display: none; 
        } 
        .dropdown-content { 
            display: none; 
            position: absolute; 
            background-color: #47a23f; 
            min-width: 160px; 
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
            z-index: 1; 
        } 
        .dropdown-content a { 
            float: none; 
            color: #fff; 
            padding: 12px 16px; 
            text-decoration: none; 
            display: block; 
            text-align: left; 
        } 
        .dropdown-content a:hover { 
            background-color: #003150; 
            color: #fff; 
        } 
        .dropdown:hover .dropdown-content { 
            display: block; 
            color: #fff; 
        } 
        @media screen and (max-width: 600px) { 
            .topnav a:not(:first-child) { 
                display: none; 
            } 
            .topnav a.icon { 
                float: right; 
                display: block; 
            } 
        } 
        @media screen and (max-width: 600px) { 
            .topnav.responsive { 
                position: relative; 
            } 
            .topnav.responsive .icon { 
                position: absolute; 
                right: 0; 
                top: 0; 
            } 
            .topnav.responsive a { 
                float: none; 
                display: block; 
                text-align: left; 
            }
            .topnav.responsive .dropdown {
                float: none;
                display: block;
                width: 100%;
            }
            .topnav.responsive .dropdown-content {
                position: relative;
            }
        }
    </style>
</head>
<body>
    <div class="topnav" id="myTopnav"> 
        <a href="#home" id="home-link">Home</a> 
        <div class="dropdown"> 
            <button class="dropbtn">Workforce <i class="fa fa-caret-down"></i> </button> 
            <div class="dropdown-content"> 
                <a target="_blank" href="https://myactivehealth.com/Portal/PreRegistrations/Index">Request to enroll</a> 
                <a target="_blank" href="https://www.myactivehealth.com/Portal/Registration/RegistrationStep1?IsoAuthDPRequest=False">Create an account</a> 
                <a target="_blank" href="https://www.myactivehealth.com/Portal/PortalLogin.aspx?SupplierURL=15571">Log in</a> 
            </div> 
        </div> 
        <a href="#employer" id="employer-link">Employer</a> 
        <div class="dropdown"> 
            <button class="dropbtn">Injured Workers <i class="fa fa-caret-down"></i> </button> 
            <div class="dropdown-content"> 
                <a target="_blank" href="https://www.myactivehealth.com/Portal/Registration/RegistrationStep1?IsoAuthDPRequest=False">Create an account</a> 
                <a target="_blank" href="https://www.myactivehealth.com/Portal/PortalLogin.aspx?SupplierURL=15571">Log in</a> 
            </div> 
        </div> 
        <a href="javascript:void(0);" class="icon" onclick="myFunction()"> 
            <i class="fa fa-bars"></i> 
        </a> 
    </div>

    <script>
        // Mobile menu toggle
        function myFunction() { 
            var x = document.getElementById("myTopnav"); 
            if (x.className === "topnav") { 
                x.className += " responsive"; 
            } else { 
                x.className = "topnav"; 
            } 
        }

        // Set active state based on current page
        function setActiveNav() {
            const currentUrl = window.location.href;
            const homeLink = document.getElementById('home-link');
            const employerLink = document.getElementById('employer-link');

            // Adjust these conditions to match your actual SFMC page URLs
            if (currentUrl.includes('#home') || currentUrl.endsWith('/') || currentUrl.includes('homepage')) {
                homeLink.classList.add('active');
            } else if (currentUrl.includes('#employer') || currentUrl.includes('employer')) {
                employerLink.classList.add('active');
                homeLink.classList.remove('active');
            }
        }

        // Optional: Uncomment this to make Home turn green after hovering away on the homepage
        /*
        document.getElementById('home-link').addEventListener('mouseleave', function() {
            const currentUrl = window.location.href;
            if (currentUrl.includes('#home') || currentUrl.endsWith('/') || currentUrl.includes('homepage')) {
                this.classList.remove('active');
            }
        });
        */

        // Initialize active state when the page loads
        window.onload = setActiveNav;
    </script>
</body>
</html>

Quick Notes for SFMC: #

• Paste this entire code block into your SFMC Content Builder (as a Custom HTML block).
• Update the URL conditions in the setActiveNav() function to match your actual page URLs (e.g., replace #home with your homepage's real path in SFMC).
• If you want to implement the exact requirement 1 (Home turns green after hovering away on the homepage), just uncomment the commented mouseleave event listener in the script section.

内容的提问来源于stack exchange，提问作者a293446