SUBMENU 的 CSS實現和 點擊判斷
SUBMENU 的 CSS實現和 點擊判斷javascript
點擊判斷基礎：css
使用 mouseup 事件來控制點擊除了SUBMENU-TITLE和SUBMENU-CONTENT其他文檔隱藏 全部SUBMENU 的操做。html
點擊判斷比較難以理解的部分：前端
點擊SUBMENU-TITLE 和 SUBMENU-CONTENT 從而實現菜單的顯示隱藏操做。java
給每個SUBMENU 添加 flag 屬性，用於判斷下拉菜單的狀態從而根據狀態作出相應的事件反映。jquery
-- 點擊事件瀏覽器
-- click submenu框架
-- judge flagide
-- flag == shown佈局
this hide
this.flag = hidden
-- flag == hidden
close all
all flag = hidden
this show
this.flag = shown
-- click other-place
close all
all flag = hidden
HTML 代碼段以下( 部分CSS 借鑑了一個老外的樣式)：
<!DOCTYPE html>
<html>
<head>
<title>dropdownMenu.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
.outBox {
margin: 200px auto 0 auto;
padding: 0;
width: 143px;
}
.dropdown {
color: #555;
margin: 0;
width: 143px;
position: relative;
height: 17px;
text-align: left;
width: 143px;
}
/* 這裏使用到了 CSS3 的一些技術好比 border-radius box-shadow 可是支持這些 CSS 屬性的瀏覽器目前在國內比較少，IE9+ 纔會有部分兼容 */
.submenu {
background: #fff;
position: absolute;
top: -12px;
left: -20px;
z-index: 100;
width: 135px;
display: none;
margin-left: 10px;
padding: 40px 0 5px;
border: 1px solid #6173a3;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(97, 115, 163, 0.45);
}
.dropdown li a {
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration: none;
}
.dropdown li a:hover {
background: #6173a3;
color: #FFFFFF;
text-decoration: none;
}
a.account {
font-size: 11px;
line-height: 16px;
color: #555555;
position: absolute;
z-index: 110;
display: block;
padding: 11px 0 0 20px;
height: 28px;
width: 121px;
margin: -11px 0 0 -10px;
text-decoration: none;
background: url(arrow.png) 116px 17px no-repeat;
cursor: pointer;
}
.root {
list-style: none;
margin: 0px;
padding: 0px;
font-size: 11px;
padding: 11px 0 0 0px;
border-top: 1px solid #dedede;
}
.submenus-li{
list-style: none;
width: 200px;
float: left;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".account").click(function() {
var flag = $(this).attr("flag");
if (flag == "shown") {
$(this).parent().find(".submenu").hide();
$(this).attr("flag", "hidden");
//$(this).parent().find(".submenu").slideUp(100);
} else {
$(".submenu").hide();
$(".account").attr("flag", "hidden");
$(this).parent().find(".submenu").show();
$(this).attr("flag", "shown");
//$(this).parent().find(".submenu").slideDown(100);
}
});
//Mouse click on sub menu
$(".submenu").mouseup(function() {
return false
});
//Mouse click on my account link
$(".account").mouseup(function() {
return false
});
//Document Click ，點擊別處隱藏菜單 ...
$(document).mouseup(function() {
$(".submenu").hide();
$(".account").attr("flag", "hidden");
});
});
</script>
</head>
<body>
<ul id="submenus">
<li class="submenus-li"><div class="dropdown">
<a class="account" flag="hidden">My Account</a>
<div class="submenu">
<ul class="root">
<li><a href="#Dashboard">Dashboard</a></li>
<li><a href="#Profile">Profile</a></li>
<li><a href="#settings">Settings</a></li>
<li><a href="#feedback">Send Feedback</a></li>
<li><a href="#feedback">Send Feedback</a></li>
<li><a href="#feedback">Send Feedback</a></li>
<li><a href="#feedback">Send Feedback</a></li>
<li><a href="#feedback">Send Feedback</a></li>
</ul>
</div>
</div></li>
<li class="submenus-li"><div class="dropdown">
<a class="account" flag="hidden">Your Account</a>
<div class="submenu">
<ul class="root">
<li><a href="#Dashboard">Dashboard</a></li>
<li><a href="#Profile">Profile</a></li>
<li><a href="#settings">Settings</a></li>
<li><a href="#feedback">Send Feedback</a></li>
<li><a href="#feedback">Send Feedback</a></li>
<li><a href="#feedback">Send Feedback</a></li>
<li><a href="#feedback">Send Feedback</a></li>
<li><a href="#feedback">Send Feedback</a></li>
</ul>
</div>
</div></li>
<li class="submenus-li"><div class="dropdown">
<a class="account" flag="hidden">Our Account</a>
<div class="submenu">
<ul class="root">
<li><a href="#Dashboard">Dashboard</a></li>
<li><a href="#Profile">Profile</a></li>
<li><a href="#settings">Settings</a></li>
<li><a href="#feedback">Send Feedback</a></li>
<li><a href="#feedback">Send Feedback</a></li>
<li><a href="#feedback">Send Feedback</a></li>
<li><a href="#feedback">Send Feedback</a></li>
<li><a href="#feedback">Send Feedback</a></li>
</ul>
</div>
</div></li>
</ul>
</body>
</html>
另外由於 submenu 的事件控制問題繼續來講下事件的相應判斷。
結論：
整個事件要分紅三段來進行處理
事件的產生
事件的冒泡
和事件的處理
1
首先事件的產生是獨立的
好比鼠標事件中的
mousedown
click
mouseup
這三個事件雖然有前後順序，可是都是獨立的事件
這些事件的冒泡和事件處理是不會由於其餘事件而產生改變的，事件的原子性 ...
2
使用委託的方式來進行事件處理的話
好比經過 delegate 的方式來進行事件委託
$(document).delegate("element","eventType","eventhandle");
這樣的方式來進行事件委託的話
事件確定是要冒泡到 document 以後纔會進行事件的處理的
3
事件的處理
事件的處理頗有意思
針對於一個事件好比 mouseup 事件
假如在父節點和子節點都進行了事件的監聽，可是在子節點進行事件處理的時候 return false 這樣會忽略父節點的事件處理,這個在上一篇日誌當中已經進行了說明，不清楚的同窗能夠去看下。
4
事件委託不會交叉處理
而是一個事件一個事件的進行處理
好比一個 click 事件，這個事件會觸發 3 個事件。
老是先處理 mouseup 而後再處理 click 這個可能和咱們想象中的有所區別
你可能認爲會先處理點擊元素的 mouseup click 而後是 document 的 mouseup click
可是再回憶咱們的原則 1 就豁然開朗了
事件自己就是分離的
從新制做變長的菜單,樣式方面比較醜陋，你們見諒
後來又從新制做了一個 SUBMENU 裏面使用了 ul li 來作定位操做，使用 dl dt dd 來完成內容的點擊擴展。而且使用不一樣寬度的 dt dd 來實現很不一樣通常的菜單樣式。下次再作擴展的話能夠把 dt 換成相對應的 img 便可。
後來製做的菜單詳細可見 dropmenuDesigned By Cherry 裏面有比較詳細的註釋了。裏面比較有意思的就是設置 position 爲 relative 來實現submenu dd 的覆蓋 dt 的操做。
<!DOCTYPE html>
<html>
<head>
<title>dropdownMenuByCherry.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
TIPS
1 在設計的使用使用 ul li 來進行基本框架的搭建 ul 只是做爲父元素容器存在沒有特殊意義
2 li 設置成 float left ，display block , 設置固定的寬度和高度(這裏要使之和 dt 的寬度和高度一致)
3 具體的下拉菜單的類容使用 dl dt dd 來作，dl 做爲 li 的子容器 dl 由於做爲 sub menu 子容器要始終顯示在最前端
4 dd 要設置背景色，用於遮蓋,固然也能夠不用遮蓋。
5 ul li dl 都是用來進行佈局的。實際的內容都在 dt dd 當中。
6 z-index 屬性對 static 流不起做用，因此須要設置 dt dd 爲 relative 從而完成菜單的覆蓋操做
-->
<style type="text/css">
html,body {
margin: 0;
padding: 0;
}
#head,#body,#footer {
margin: 0 auto;
}
#head,#footer {
font-size: 20px;
font-weight: bold;
text-align: center;
}
.ul-box{
margin: 0;
padding: 0;
height: 42px;
}
.ul-box .li-box{
margin: 5px;
list-style: none;
width: 30px;
float: left;
display: block;
height: 20px;
}
.ul-box .li-box dl {
margin: 0;
padding: 0 0 10px 0;
}
.ul-box .li-box dl dt{
padding: 0;
margin: 0;
width: 30px;
border: 1px solid red;
cursor: pointer;
position: relative;
z-index: 1;
}
.ul-box .li-box dl dd{
padding: 0;
margin: 0;
display: none;
width: 50px;
border: 1px solid red;
cursor: pointer;
background-color: white;
position: relative;
z-index: 999;
}
.ul-box .li-box dl dd:HOVER{
background-color: red;
color: white;
}
.clear{
clear: both;
border: 1px solid red;
}
</style>
<script type="text/javascript">
$(function(){
/* submenu 點擊彈出菜單事件 */
$("dt").click(function() {
var flag = $(this).attr("flag");
if (flag == "shown") {
$(this).parent().find("dd").hide();
$(this).attr("flag", "hidden");
//$(".submenu").slideUp(100);
} else {
$("dd").hide();
$("dt").attr("flag", "hidden");
$(this).parent().find("dd").show();
$(this).attr("flag", "shown");
//$(".submenu").slideDown(100);
}
});
//Mouse click on sub menu
$("dd").mouseup(function() {
return false
});
//Mouse click on my account link
$("dt").mouseup(function() {
return false
});
//Document Click ，點擊別處隱藏菜單 ...
$(document).mouseup(function() {
$("dd").hide();
$("dt").attr("flag", "hidden");
});
})
</script>
</head>
<body>
<div id="head">DropBox Designed By Cherry</div>
<div id="body">
<ul class="ul-box">
<li class="li-box">
<dl>
<dt flag="hidden">a</dt>
<dd>num_1</dd>
<dd>num_2</dd>
<dd>num_3</dd>
<dd>num_4</dd>
</dl>
</li>
<li class="li-box">
<dl>
<dt flag="hidden">b</dt>
<dd>num_2</dd>
<dd>num_3</dd>
<dd>num_4</dd>
<dd>num_5</dd>
</dl>
</li>
<li class="li-box">
<dl>
<dt flag="hidden">c</dt>
<dd>num_3</dd>
<dd>num_4</dd>
<dd>num_5</dd>
<dd>num_6</dd>
</dl>
</li>
</ul>
<div>--------------------------------------</div>
<div>--------------------------------------</div>
<ul class="ul-box">
<li class="li-box">
<dl>
<dt flag="hidden">d</dt>
<dd>num_1</dd>
<dd>num_2</dd>
<dd>num_3</dd>
<dd>num_4</dd>
</dl>
</li>
<li class="li-box">
<dl>
<dt flag="hidden">e</dt>
<dd>num_2</dd>
<dd>num_3</dd>
<dd>num_4</dd>
<dd>num_5</dd>
</dl>
</li>
<li class="li-box">
<dl>
<dt flag="hidden">f</dt>
<dd>num_3</dd>
<dd>num_4</dd>
<dd>num_5</dd>
<dd>num_6</dd>
</dl>
</li>
</ul>
</div>
<div id="footer">Cherry_OP@163.com</div>
</body>
</html>
相關文章
- 1. 判斷按鈕的點擊和擡起
- 2. UISegmentedControl判斷點擊第幾項
- 3. 判斷textView 點擊的某一行
- 4. Android 屏幕點擊手勢判斷
- 5. 判斷contextmenustrip子菜單點擊哪個
- 6. 判斷點擊區域算法
- 7. UGUI防止穿透和判斷點擊的是不是UI
- 8. ugui 點擊在ui和非ui的判斷
- 9. css實現「點擊查看更多」
- 10. jquery+css實現點擊下拉菜單
- 更多相關文章...
- • C# 判斷 - C#教程
- • Thymeleaf條件判斷 - Thymeleaf 教程
- • ☆基於Java Instrument的Agent實現
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 融合阿里雲，牛客助您找到心儀好工作
- 2. 解決jdbc(jdbctemplate)在測試類時不報錯在TomCatb部署後報錯
- 3. 解決PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE無法輸入中文
- 4. vue+ant design中關於圖片請求不顯示的問題。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解決IDEA用Maven創建的Web工程不能創建Java Class文件的問題
- 7. [已解決] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea讓java文件夾正常使用
- 9. Eclipse啓動提示「subversive connector discovery」
- 10. 帥某-技巧-快速轉帖博主文章（article_content）
歡迎關注本站公眾號,獲取更多信息
相關文章