c# - 将导航栏变成带有汉堡图标的调整大小的菜单栏

Question

当页面缩小时，我需要帮助将导航栏变成带有汉堡图标的导航栏。我希望它与缩小页面时 bankofamerica.com 网站的内容相似。我正在使用的代码如下。

目前，导航栏只是一个蓝色栏，其中的链接在页面缩小时会被压缩。我无法理解如何解决导航栏需要的 MultiView 部分。

任何帮助，将不胜感激。

 <asp:ContentPlaceHolder ID="scriptsContentPlaceHolder" runat="server"></asp:ContentPlaceHolder>
        <nav class="nav-extended blue darken-2">
            <div class="nav-wrapper">
                <asp:LinkButton ID="logoButton" runat="server" class="brand-logo" OnClick="logoButton_Click"><img runat="server" src="~/Images/logo.png" /></asp:LinkButton>
                <asp:MultiView ID="menuMultiView" runat="server">
                    <asp:View ID="limitedMenu" runat="server">
                        <ul class="right">
                            <li>
                                <asp:HyperLink ID="limitedMenuContactUsLink" runat="server" Text="<%$ Resources:Global, ContactUs %>" NavigateUrl="~/Contact/ContactUs.aspx"></asp:HyperLink>
                            </li>
                            <li>
                                <asp:LoginStatus ID="limitedMenuLoginStatus" runat="server" CssClass="loginStatus" LoginText="<%$ Resources:Global, SignIn %>" LogoutText="<%$ Resources:Global, SignOut %>" LogoutAction="Redirect" LogoutPageUrl="~/Authentication/LogoutPage.aspx" OnLoggingOut="loginStatus_LoggingOut" />
                            </li>
                        </ul>
                    </asp:View>
                    <asp:View ID="fullMenu" runat="server">
                        <ul class="right">
                            <li>
                                <asp:HyperLink ID="homeLink" runat="server" Text="<%$ Resources:Global, Home %>" NavigateUrl="~/Dashboard/Home.aspx"></asp:HyperLink></li>
                            <li>
                                <asp:HyperLink ID="cmsLink" runat="server" Text="<%$ Resources:Global, Insights %>" NavigateUrl="~/CMS/ManageStudents.aspx"></asp:HyperLink></li>
                            <li>
                                <asp:HyperLink ID="workshopsLink" runat="server" Text="<%$ Resources:Global, ELearning %>" NavigateUrl="~/Workshops/Home.aspx"></asp:HyperLink></li>
                            <li>
                                <asp:HyperLink ID="resourcesLink" runat="server" Text="<%$ Resources:Global, Resources %>" NavigateUrl="~/Resources/Objectives.aspx"></asp:HyperLink></li>
                            <li id="adminLi" runat="server">
                                <a class="dropdown-button" data-activates="adminDropDown" href="#!">
                                    <%: Resources.Global.Administration %><i class="material-icons right">arrow_drop_down</i>
                                </a>
                            </li>
                            <li id="settingsLi" runat="server">
                                <a class="dropdown-button" data-activates="settingsDropDown" href="#!">Manage Settings<i class="material-icons right">arrow_drop_down</i>
                                </a>
                            </li>
                            <li id="dashboardLi" runat="server">
                                <a class="dropdown-button" data-activates="dashboardDropDown" href="#!">
                                    <%: Resources.Global.Dashboards %><i class="material-icons right">arrow_drop_down</i>
                                </a>
                            </li>
                            <li id="reportsLi" runat="server">
                                <a class="dropdown-button" data-activates="reportsDropDown" href="#!">Reports<i class="material-icons right" style="width: 38px">arrow_drop_down</i>
                                </a>
                            </li>
                            <li>
                                <asp:HyperLink ID="profileLink" runat="server" Text="<%$ Resources:Global, Profile %>" NavigateUrl="~/Dashboard/Profile.aspx"></asp:HyperLink>
                            </li>
                            <li>
                                <asp:HyperLink ID="FAQ" runat="server" Text="<%$ Resources:Global, Support %>" NavigateUrl="~/Dashboard/Faq.aspx"></asp:HyperLink>
                            </li>
                            <li>
                                <asp:LoginStatus ID="loginStatus" runat="server" CssClass="loginStatus" LogoutText="<%$ Resources:Global, SignOut %>" LogoutAction="Redirect" LogoutPageUrl="~/Authentication/LogoutPage.aspx" OnLoggingOut="loginStatus_LoggingOut" />
                            </li>
                        </ul>
                    </asp:View>
                </asp:MultiView>
                <div class="clearfix"></div>
                <asp:ContentPlaceHolder ID="breadcrumbContentPlaceHolder" runat="server">
                </asp:ContentPlaceHolder>
            </div>
        </nav>

标签： c#asp.net