如何制作这个菜单，切换到汉堡包，然后切换到特定尺寸的屏幕

Question

我有这个菜单，不是由我制作的，带有引导程序和视觉工作室，它没有响应，所以我正在尽一切努力使其响应，我希望它能够在某个分辨率下切换，所以它是作为汉堡包完成的符号，有什么想法吗？

`

<ul class="f-cb">
    <li runat="server" id="Li1" visible="true" class="about-li">
        <a class="tit" href="/events_list.aspx" >Eventi</a>
    </li>
    <li runat="server" id="Distributori" visible="false" class="about-li">
        <a class="tit">Area Riservata</a> <%-- Area Riservata Distributori --%>
        <div class="con f-cb none">
            <div class="left">

                <a class="link-b ico_2" href="/DahuaTechDay" runat="server" id="menu_dsd"><i>Dahua HighTech Day</i></a>                    
                <a class="link-b ico_4" href="/AreaRiservata/DSD.aspx" runat="server" id="menu_dsdRecap" visible="false"><i>Dahua HighTech Day Summary</i></a>
                <a class="link-b ico_5" href="/AreaRiservata/test_home.aspx" runat="server" id="menu_Test" visible="false">Formazione e Test</a>
                <a class="link-b ico_5" href="/AreaRiservata/fatturatorebate.aspx" runat="server" id="menu_StatoRebateDist" visible="false">Fatturati e Rebate</a>
                <a class="link-b ico_5" href="/AreaRiservata/AccountWebAuth.aspx" runat="server" id="menu_AccountWebAuth" visible="false">Autorizzazioni Account WEB</a>                    
                
            </div>
        </div>
    </li>
    <li runat="server" id="UtilityLi" visible="false" class="about-li">
        <a class="tit">Utilities</a>
        <div class="con f-cb none">
            <div class="left"> 
                <a class="link-b ico_1" href="/Utilities/CheckDSD.aspx" runat="server"><span><i>- Riepilogo HighTech Day (vecchia gestione) -</i></span></a>                    
                <a class="link-b ico_1" href="/events_management.aspx" runat="server"><span>Riepilogo EVENTI (nuova gestione)</span></a>                    
                <a class="link-b ico_6" href="/Utilities/Accounting/CheckSeriale.aspx"><span>Check SERIAL NUMBER</span></a>                    
                <a class="link-b ico_1" href="/Utilities/Marketing/Form_Chiamate.aspx"><span>Form Chiamate PRIMO CONTATTO</span></a>                    
                <a class="link-b ico_1" href="/Utilities/Marketing/Riepilogo_Form_Chiamate.aspx"><span>Riepilogo Chiamate PRIMO CONTATTO</span></a>                    
                <a class="link-b ico_1" href="/print_certificates.aspx"><span>Stampa Attestati</span></a>       
                <a class="link-b ico_1" href="/cartello_area_videosorvegliata_lista.aspx"><span>Cartelli AREA VIDEOSORVEGLIATA (lista)</span></a>       
                <a class="link-b ico_1" href="/Utilities/TestFormazione_stato.aspx" runat="server" id="menu_FormazioneTest" visible="false"><span>Gestione Formazione e TEST</span></a>                    
                <a class="link-b ico_1" href="/Utilities/AccountWebVideotrend.aspx" runat="server" id="menu_AccountWebVDT" visible="false"><span>Gestione Account WEB (SQL Videotrend)</span></a>     
                <a class="link-b ico_1" href="/RegisterAdmin.aspx" runat="server" id="menu_AccountWebDS" visible="false"><span><i>- Gestione Account WEB (SQL Dahuaservice) -</i></span></a>     
                
            </div>
        </div>
    </li>

    <li runat="server" id="LiAreaRiservata" visible="false" class="about-li">
        <a class="tit" style="color:red;">Area Riservata (2)</a> 
        <div class="con f-cb none">
            <div class="left">
                <a class="link-b ico_2" style="margin-bottom:0px" href="/events_list.aspx" runat="server" id="AreaRiservata_EventiRegistrazione">EVENTI: registrazione</a>                    
                <a class="link-b ico_4" href="/events_management.aspx" runat="server" id="AreaRiservata_EventiGestione" visible="false">EVENTI: gestione</a>                    

                <a class="link-b ico_4" style="margin-bottom:0px" href="/prices_warehouse.aspx" runat="server" id="AreaRiservata_PrezziDisponibilita" visible="false">Prezzi e Magazzino</a>
                <a class="link-b ico_4" style="margin-bottom:0px" href="/shipping_docs.aspx" runat="server" id="AreaRiservata_DocumentiTrasporto" visible="false">Documenti di trasporto</a>
                <a class="link-b ico_4" style="margin-bottom:0px" href="/AreaRiservata/fatturatorebate.aspx" runat="server" id="AreaRiservata_FatturatiRebate" visible="false">Fatturati e rebate</a>
                <a class="link-b ico_4" href="/check_serialnumber.aspx" runat="server" id="AreaRiservata_ControlloSerialNumber" visible="false">Controllo SERIAL NUMBER</a>

                <a class="link-b ico_2" style="margin-bottom:0px" href="/AreaRiservata/test_home.aspx" runat="server" id="AreaRiservata_FormazioneTest">Formazione e TEST</a>                    
                <a class="link-b ico_4" href="/Utilities/TestFormazione_stato.aspx" runat="server" id="AreaRiservata_FormazioneTestGestione" visible="false">Formazione e TEST: gestione</a>
                
                <a class="link-b ico_2" style="margin-bottom:0px" href="/Utilities/Marketing/Form_Chiamate.aspx" runat="server" id="AreaRiservata_PrimoContattoForm">PRIMO CONTATTO: form</a>                    
                <a class="link-b ico_2" href="/Utilities/Marketing/Riepilogo_Form_Chiamate.aspx" runat="server" id="AreaRiservata_PrimoContattoRiepilogo">PRIMO CONTATTO: riepilogo</a>                    

                <a class="link-b ico_2" style="margin-bottom:0px" href="/print_certificates.aspx" runat="server" id="AreaRiservata_StampaAttestati">Stampa ATTESTATI</a>                    
                <a class="link-b ico_2" href="/Utilities/AccountWebVideotrend.aspx" runat="server" id="AreaRiservata_AccountWebGestione">ACCOUNT WEB: gestione</a>       
                
            </div>
        </div>
    </li>
</ul>

`

到目前为止，通过 CSS 和一些媒体查询，我已经减小了文件的大小，并且删除了邮件栏的部分，但我想切换它

@media screen and (max-width: 1453px) {     header .nav-box a.tit {         transition: color 0.3s;         width: 100%;         height: 100%;         color: rgb(51, 51, 51);         font-size: 13px;         display: block;     } } @media screen and (max-width: 1184px) {     #LabelMember {         display:none;     } }

Answer 1

要使菜单具有响应能力并将其变成特定分辨率的汉堡菜单（也称为切换菜单），您可以使用

HTML

、

CSS

和

JavaScript

的组合。以下是实现您的要求的分步方法：

HTML 结构： 首先，您需要更新 HTML 结构以包含汉堡菜单图标的按钮。将此按钮放置在现有

ul

元素之外。此按钮将用于在较小的屏幕上切换菜单。

<!-- Hamburger Menu Button -->
<button class="hamburger-btn">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
</button>

<!-- Your Existing Menu -->
<ul class="f-cb">
    <!-- ... Your menu items ... -->
</ul>

CSS： 设置汉堡菜单按钮的样式，并在较小的屏幕上默认隐藏菜单。

/* Hamburger Menu Button Styles */
.hamburger-btn {
    display: none; /* Hide by default on larger screens */
    /* Add styles for the hamburger icon (e.g., background, size, position, etc.) */
}

/* Media Query for Smaller Screens */
@media screen and (max-width: 768px) {
    /* Hide the original menu */
    ul.f-cb {
        display: none;
    }

    /* Show the hamburger menu button */
    .hamburger-btn {
        display: block;
    }

    /* Style the individual bars of the hamburger icon */
    .bar {
        /* Add styles for each bar (e.g., height, width, background color, spacing, etc.) */
    }
}

JavaScript： 单击汉堡包按钮时使用 JavaScript 切换菜单。您可以使用普通 JavaScript 或像 jQuery 这样的 JavaScript 库。这是一个使用纯 JavaScript 的示例：

document.addEventListener('DOMContentLoaded', function () {
    const menuButton = document.querySelector('.hamburger-btn');
    const menuList = document.querySelector('ul.f-cb');

    menuButton.addEventListener('click', function () {
        menuList.classList.toggle('show-menu');
    });
});

响应式移动菜单的 CSS： 使用 CSS 类定义移动菜单的样式（单击按钮时显示）。您可以使用 CSS 过渡来实现平滑的动画。

/* CSS for Mobile Menu (Initially hidden) */
ul.f-cb.show-menu {
    display: block;
    /* Add styles for the mobile menu (e.g., background color, positioning, animations, etc.) */
}

通过这些更改，默认情况下，您的菜单将在较小的屏幕上隐藏，并显示汉堡包按钮。单击该按钮将切换菜单的可见性，并记住自定义 CSS 和 JavaScript 代码以匹配您的设计和样式偏好。