ASP.NET，C# -创建一个带有asp链接按钮的导航下拉菜单栏

下面是主要代码

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="Webwite1.Site1" %>
<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
    <meta charset = "UTF-8" />
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
    <script src="bootstrap/js/bootstrap.js"></script>
    <link rel = "stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://kit.fontawesome.com/99d54f1718.js"></script>
    <link href="css/customstylesheet.css" rel="stylesheet" />

    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        
       
        <div>
            <nav class="navbar navbar-expand-lg navbar-lg" style="background-color: #e3f2fd;">
                <a class="navbar-brand" href="homepage.aspx">
                    <img src="imgs/books.png" width="30" height="30" />
                    Website Test
                </a>

                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                 <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="homepage.aspx">Home</a>
                        </li>
     
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Internships</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Research</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Jobs</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Clubs</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Social</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#">MyPages</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Other</a>
                        </li>
                       
                    </ul>

                    <ul class="navbar-nav">
                        <li class="nav-item active">
                            <asp:LinkButton class="nav-link" ID="LinkButton4" runat="server" OnClick="LinkButton4_Click">View Books</asp:LinkButton>
                        </li>
                        
                        <li class="nav-item active">
                            <asp:LinkButton class="nav-link" ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">User Login</asp:LinkButton>
                        </li>
                        <li class="nav-item active">
                            <asp:LinkButton class="nav-link" ID="LinkButton2" runat="server" OnClick="LinkButton2_Click">Sign Up
                            </asp:LinkButton>
                        </li>
                        <li class="nav-item active">
                            <asp:LinkButton class="nav-link" ID="LinkButton3" runat="server" OnClick="LinkButton3_Click" Visible="False">Logout</asp:LinkButton>
                        </li>

                        <li class="nav-item active">
                            <asp:LinkButton class="nav-link" ID="LinkButton7" runat="server" OnClick="LinkButton7_Click" Visible="False">Hello user</asp:LinkButton>

                        </li>
                    </ul>
                </div>

            </nav>
        </div>

        <!-- Main Content Placeholder -->
        <div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <!-- Main Content Placeholder -->

         <!-- Footer -->
        <footer>
            <div id="footer1" class="container-fluid">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                        <p>
                            <center><asp:LinkButton class="footerlinks" ID="LinkButton6" runat="server" OnClick="LinkButton6_Click">Admin Login</asp:LinkButton></center>
                            &nbsp;
                         
                            <asp:LinkButton class="footerlinks" ID="LinkButton11" runat="server" OnClick="LinkButton11_Click" Visible="False">Author Management</asp:LinkButton>
                            &nbsp;
                            <asp:LinkButton class="footerlinks" ID="LinkButton12" runat="server" OnClick="LinkButton12_Click" Visible="False">Publisher Management</asp:LinkButton>
                            &nbsp;
                            <asp:LinkButton class="footerlinks" ID="LinkButton8" runat="server" OnClick="LinkButton8_Click" Visible="False">Book Inventory</asp:LinkButton>
                            &nbsp;
                            <asp:LinkButton class="footerlinks" ID="LinkButton9" runat="server" OnClick="LinkButton9_Click" Visible="False">Book Issuing</asp:LinkButton>
                            &nbsp;
                             <asp:LinkButton class="footerlinks" ID="LinkButton10" runat="server" OnClick="LinkButton10_Click" Visible="False">Member Management</asp:LinkButton>
                            &nbsp;

                        </p>

                    </div>

                </div>
            </div>
            <div id="footer3" class="container-fluid">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                        <p>
                            <asp:LinkButton class="footerlinks" ID="LinkButton5" runat="server" OnClick="LinkButton5_Click">About Us</asp:LinkButton>
                            &nbsp;
                            <asp:LinkButton class="footerlinks" ID="LinkButton13" runat="server" OnClick="LinkButton13_Click">Version History</asp:LinkButton>
                            &nbsp;
                            <asp:LinkButton class="footerlinks" ID="LinkButton14" runat="server" OnClick="LinkButton14_Click">Contact Information</asp:LinkButton>
                            &nbsp;
                            <asp:LinkButton class="footerlinks" ID="LinkButton15" runat="server" OnClick="LinkButton15_Click">Donate</asp:LinkButton>
                            &nbsp;
                            <asp:LinkButton class="footerlinks" ID="LinkButton16" runat="server" OnClick="LinkButton16_Click">Report Issues</asp:LinkButton>
                            &nbsp;

                            
                        </p>
                    </div>
                 </div>
           </div>

            <div id="footer2" class="container-fluid">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 text-center">
                        <p style="color:whitesmoke">Text</p>
                    </div>
                </div>
            </div>
                 
        </footer>
        <!-- ./Footer -->

    </form>
</body>
</html>

下面是主代码附带的CSS文件

.footerlinks {
    color: #ffffff;
    text-decoration: none !important;
}

.footerlinks:hover {
    color: #ffd800;
}

#footer2 {
    background: #0e47e3;
}

#footer3 {
    background: #40d90d;
}

#footer1 {
    background: #870ee3;
}

.badge-primary {
    color: #ebeef0;
    background-color: #B23CFD;
}

.card-body{
    min-height: 800px;
}

.short-context{
    min-height:400px;
}

在主要部分，有代码：查看书籍<asp:LinkButton class="nav-link" ID="LinkButton4" runat="server" OnClick="LinkButton4_Click">View Books</asp:LinkButton>
我正在尝试创建一个下拉菜单，其中有几个标记为A，B，C的响应按钮。一旦您将鼠标悬停在"查看图书"上，选项A，B和C应该会显示出来。
我知道如何在没有www.example.com按钮的普通HTML中执行此操作。ASP.net buttons.
有没有办法创建一个带有ASP按钮的下拉菜单？
非常感谢

我不知道“哪里”或“为什么”的混乱来自于关于asp.net控件，如按钮，或链接按钮与html标记？
我看不出这两个问题与这个问题有什么关系。
你有一个引导菜单。
所以，简单的问题是，我如何才能有一个下降下降触发自动悬停，而不是必须点击该菜单？
那么，就说这个菜单：
（我跳过了一些菜单，但你明白我的意思）。
所以这个：

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li><a runat="server" href="~/">Home</a></li>
        <li><a runat="server" href="~/About">About</a></li>
        <li><a runat="server" href="~/Contact">Contact</a></li>

        <li id="mAdmin" runat="server" class="dropdown"  ClientIDMode="Static">
            <a runat="server"  href="#" data-toggle="dropdown" 
                class="dropdown-toggle"
                >Auto Buttons Dropdown Test<span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a runat="server" href="~/SiteAdmin/Messages">Manage Portal Email Messages</a></li>
                <li><a runat="server" href="~/Staff/CurrentUsersS">Show Logged on users</a></li>
                <li><a runat="server" href="~/SiteAdmin/OneMonth">Month Logon Summary</a></li>

                <li><a runat="server" href="~/SiteAdmin/EditChoices">Change/Edit Issue tracker choices</a></li>
                <li><a runat="server" href="~/SiteAdmin/SetUp">Developer site settings</a></li>
                <li><a onclick="hasproof()">My Proofs - testing</a></li>
                <li><a runat="server" href="~/SiteAdmin/Issues">Issues Tracker and to-do list</a></li>
                <li><asp:LinkButton ID="LinkButton1" runat="server">LinkButton Test</asp:LinkButton></li>
            </ul>
        </li>

    </ul>
</div>

现在，最后一个选择是一个“典型”和“标准”和“普通简”的例子，下拉在一个引导菜单栏。（增益，零做asp.net）。
因此，以上结果如下：
(note我必须如何点击下拉菜单）。

但是，您可以让/设置/享受菜单在悬停时下拉。
只需将此样式添加到页面中

<style>
    .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0; /* remove the gap so it doesn't close */
    }
</style>

现在，我不必点击菜单-只需鼠标悬停将下拉菜单栏，所以它现在的工作方式/外观如下：

正如你的标记所示，你“已经”有了一些带有点击事件的链接按钮。这看起来也很不错。（你可以使用按钮，但是如果你像你的例子所示的那样使用链接按钮，菜单格式会更好地应用。你仍然会得到/拥有/可以/享受点击事件，所以它现在实际上只是一个asp.net按钮。）
所以，引导菜单，“自动下拉”的目标和需求，实际上是100%不依赖于这是ASP.NET的事实。
它仍然主要是html，和一个引导菜单，因此它并不真正关心你是否有一个标准的“a”链接，或链接按钮的菜单.然而，所有这些问题并没有改变简单的目标和问题：
我想在菜单栏中的下拉菜单，以自动扩大悬停。
将上述简单样式添加到该页面应该会触发，导致下拉菜单扩展，而无需单击添加/放置到菜单栏中的下拉菜单。

ASP.NET，C# -创建一个带有asp链接按钮的导航下拉菜单栏

1条答案

相关问题

热门标签

最新问答