將 Masterpage 從 hover 轉換為 onclick 以獲取下拉菜單
[英]Convert Masterpage from hover to onclick for the dropdown menus
問題描述
我只是在學習這一切，所以請耐心等待。 我創建了一個母版頁，現在通過將鼠標懸停在下拉菜單上打開。 有沒有辦法可以通過單擊而不是將鼠標懸停在它們上來將此項目轉換為打開菜單和子菜單。 我查看了有關此主題的多個帖子，但無法讓它們中的任何一個起作用。 該項目目前沒有 javascript，我從未嘗試過 javascript，所以如果可以避免使用 java，那就太好了。 如果沒有，那么你能指出我那個方向嗎？
這是我的母版頁（只是其中的一小部分）
<!DOCTYPE html>
<html>
<head runat="server">
<title>Union County Dispatch Website</title>
<link rel="stylesheet" href="MenuStyle.css" />
<style>
body {
background-color:gainsboro;
background-size:cover;
background-attachment:fixed;
}
</style>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<nav>
<div><img src="~/img/logo2011transparent4.png" runat="server" /></div>
<label class="toggle" for="drop">Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li><a href="#">Main Menu</a>
<ul>
<li><a href="#">911 Calltaking Polices</a>
<ul>
<li><a href="<%=ResolveUrl("~/County_Polices/Cty_911_calls.aspx")%>">911 For County Police</a></li>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Berkeley_Heights/BH_911_calls.aspx")%>">911 For Berkeley Heights</a></li>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Cranford/Cr_911_calls.aspx")%>">911 For Cranford</a></li>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Fanwood/Fa_911_calls.aspx")%>">911 For Fanwood</a></li>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Garwood/Ga_911_calls.aspx")%>">911 For Garwood</a></li>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Kean/Kean_911_calls.aspx")%>">911 For Kean Univ.</a><li>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Kenilworth/Ke_911_calls.aspx")%>">911 For Kenilworth</a></li>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Roselle_Park/RP_911_calls.aspx")%>">911 For Roselle Park</a></li>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Scotch_Plains/Sc_911_calls.aspx")%>">911 For Scotch Plains</a></li>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Winfield/Wi_911_calls.aspx")%>">911 For Winfield</a></li>
</ul>
<li><a href="#">CAD Searches</a>
<ul>
<li><a href="<%=ResolveUrl("~/Sql_Searches/Phone_System_Search.aspx")%>">CAD Search For Backup Phone #'s List</a>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Sql_Searches/Cancellation_Codes.aspx")%>">CAD Search For Cancellation Codes</a>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Sql_Searches/Dispoisiton_Code_Search.aspx")%>">CAD Search For Disposition Codes</a>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Sql_Searches/Hospital_Search.aspx")%>">CAD Search For Hospital Codes And Phone Numbers</a>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Sql_Searches/Skill_search.aspx")%>">CAD Search For Officers Special Skills/Training</a></li>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Sql_Searches/Out_Of_Service_Codes.aspx")%>">CAD Search For Out Of Service Codes</a></li>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Sql_Searches/Personnel_Search.aspx")%>">CAD Search For Personnel ID And Cell #'s</a></li>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Sql_Searches/Powerline_Command_Search.aspx")%>">CAD Search For Powerline Commands</a></li>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Sql_Searches/FireEMS_Problem_Natures.aspx")%>">CAD Search For Problem Nature Codes For Fire/EMS</a></li>
<li><a href="#"></a></li>
<li><a href="<%=ResolveUrl("~/Sql_Searches/Law_Problem_Natures.aspx")%>">CAD Search For Problem Nature Codes For Law</a></li>
</ul>
</ul>
<li><a href="<%=ResolveUrl("~/Default.aspx")%>">Home</a>
</ul>
<ul class="nav navbar-nav">
<li style="padding-top: 1px; padding-left: 20px;"><asp:TextBox runat="server" ID="TxtSearch" CssClass="form-control" Font-Size="Medium" Width="200px" OnTextChanged="TxtSearch_TextChanged"></asp:TextBox></li>
<li style="padding-top: 1px; padding-left: 8px;"><asp:Button runat="server" ID="BtSearch" Text="Search" CssClass="btn" OnClick="BtSearch_Click" Font-Bold="True" Font-Size="Medium" /></li>
</ul>
</nav>
<br />
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
這是我的 css 代碼：
nav {
top: 0;
left: 0;
position: fixed;
width: 100%;
background-color: rgba(0,0,0,0.6);
}
nav ul {
float: left;
padding: 0;
margin: 0;
position: relative;
list-style: none;
}
nav ul li {
display: inline-block;
float: left;
position: relative;
}
nav a {
display: block;
padding: 3px 15px;
color: white;
font-size: 17px;
font-weight: bold;
text-decoration: none;
font-family: Arial;
}
nav a:hover {
background-color: white;
color: gray;
}
nav ul ul {
display: none;
position: absolute;
width: 300px;
top: 26px;
}
nav ul li:hover > ul {
display: inherit;
}
nav ul ul li {
float: none;
display: list-item;
position: relative;
background-color: rgba(0,0,0,0.6);
}
nav ul ul ul {
display: none;
position: absolute;
left: 300px;
top: 0px;
max-height: 1000%;
overflow-y: auto;
}
nav ul ul ul li {
float: none;
display: list-item;
position: relative;
}
.toggle, [id^=drop] {
display: none;
}
@media all and (max-width:600px) {
.menu {
display: none;
}
.toggle {
display: block;
color: white;
background-color: rgba(0,0,0,0.6);
text-decoration: none;
padding: 20px;
}
.toggle:hover {
background-color: white;
color: dimgray;
}
#logo {
display: block;
float: none;
}
[id^=drop]:checked + ul {
display: block;
}
nav ul li {
display: block;
width: 100%
}
nav ul ul {
float: none;
position: static;
}
nav ul ul ul {
float: none;
position: absolute;
}
}
1 個解決方案
解決方案1
0 2021-04-07 14:09:05
刪除nav a:hover { background-color: white; color: gray; }nav a:hover { background-color: white; color: gray; }
從 hover 到 onclick 的下拉菜單
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.