[研究] 下拉選單 DropDown Menu (CSS)+ASP.NET Master Page 研究
2019-07-23
2019-07-28 更新
參考
https://www.w3schools.com/css/css_dropdowns.asp
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.dropdown {
position: relative; /* 1.相對位置 */
display: inline-block; /* 2.區塊水平排列 */
}
.dropdown-content {
display: none; /* 預設隱藏、不顯示 */
position: absolute; /* 絕對位置*/
background-color: lightgray;
/*background-color: #f9f9f9;*/
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* offset-x | offset-y | blur-radius | spread-radius | color */
padding: 12px 16px; /* 上下內距、左右內距 */
/*padding: 12px 16px 12px 16px; */ /* 上 右 下 左 內距 */
/*padding: 12px 16px 12px; */ /* 上 左右 下 內距 */
/*padding: 12px; */ /* 四邊內距 */
z-index: 1;
}
.dropdown:hover .dropdown-content { /* 3.滑鼠徘迴到 dropdown 屬性的元素上時，
操作 dropdown-content 屬性的元素 */
display: block; /* 4.元素會以區塊方式呈現 */
}
</style>
</head>
<body>
<div class="dropdown">
<span>滑鼠移動到我上面</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
</body>
</html>
|
(下圖) 結果
********************************************************************************
把
<div class="dropdown">
<span>滑鼠移動到我上面</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div> |
改成
<div class="dropdown">
<span>滑鼠移動到我上面</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
<div class="dropdown-content">
<p>Hello World! 2</p>
</div>
</div> |
結果 Hello world! 沒顯示，顯示的是 Hello World! 2，這是因為使用絕對位置，所以後者覆蓋了前者。
********************************************************************************
把
.dropdown-content {
display: none; /* 預設隱藏、不顯示 */
position: absolute; /* 絕對位置*/
|
改成
.dropdown-content {
display: none; /* 預設隱藏、不顯示 */
position: relative; /* 相對位置 */
|
********************************************************************************
再修一下，放入 Master Page 中
Site1.Master
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="DropdownMenuNavigationBar.Site1" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<asp:HyperLink ID="HyperLink1" NavigateUrl="1.htm" runat="server">HyperLink 1</asp:HyperLink>
<asp:HyperLink ID="HyperLink2" NavigateUrl="2.htm" runat="server">HyperLink 2</asp:HyperLink>
<asp:HyperLink ID="HyperLink3" NavigateUrl="3.htm" runat="server">HyperLink 3</asp:HyperLink>
</div>
</li>
</ul>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
|
WebForm1.aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="DropdownMenuNavigationBar.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
</asp:Content>
|
WebForm1.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace DropdownMenuNavigationBar
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
HyperLink h1 = (HyperLink)Master.FindControl("HyperLink1");
h1.Visible = false;
}
}
} |
********************************************************************************
Site1.Master
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="DropdownMenuNavigationBar.Site1" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul>
<li class="dropdown">
<div class="dropbtn">D</div>
<ul class="dropdown-content">
<asp:HyperLink ID="HyperLink7" NavigateUrl="~/D-1.aspx" runat="server">D1</asp:HyperLink>
<asp:HyperLink ID="HyperLink8" NavigateUrl="~/D-2.aspx" runat="server">D2</asp:HyperLink>
<asp:HyperLink ID="HyperLink9" NavigateUrl="~/D-3.aspx" runat="server">D3</asp:HyperLink>
</ul>
</li>
<li class="dropdown">
<div class="dropbtn">E</div>
<ul class="dropdown-content">
<asp:HyperLink ID="HyperLink1" NavigateUrl="~/E-1.aspx" runat="server">E1</asp:HyperLink>
<asp:HyperLink ID="HyperLink2" NavigateUrl="~/E-2.aspx" runat="server">E2</asp:HyperLink>
<asp:HyperLink ID="HyperLink3" NavigateUrl="~/E-3.aspx" runat="server">E3</asp:HyperLink>
</ul>
</li>
</ul>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
|
(完)
相關
[研究] 下拉選單 DropDown Menu (jQuery + jQuery-UI) 研究
https://shaurong.blogspot.com/2019/07/dropdown-menu-jquery-jquery-ui.html
[研究] 下拉選單 DropDown Menu (CSS)+ASP.NET Master Page 研究
https://shaurong.blogspot.com/2019/07/dropdown-menu-cssaspnet-master-page.html
CSS Dropdowns
https://www.w3schools.com/css/css_dropdowns.asp
CSS3 Mega Drop Down Menu Tutorial
http://www.websitecodetutorials.com/code/css-nav-menus/css3-mega-drop-down-menu.php
