浮雲雅築: [研究] 下拉選單 DropDown Menu (CSS)+ASP.NET Master Page 研究

[研究] 下拉選單 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>