SUBMENU 的 CSS实现和点击判断

时间 2019-11-25

标签 submenu css 实现点击判断栏目 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 的事件控制问题继续来讲下事件的相应判断。

结论：

整个事件要分红三段来进行处理

事件的产生

事件的冒泡

和事件的处理

首先事件的产生是独立的

好比鼠标事件中的

mousedown

click

mouseup

这三个事件虽然有前后顺序，可是都是独立的事件

这些事件的冒泡和事件处理是不会由于其余事件而产生改变的，事件的原子性 ...

使用委托的方式来进行事件处理的话

好比经过 delegate 的方式来进行事件委托

$(document).delegate("element","eventType","eventhandle");

这样的方式来进行事件委托的话

事件确定是要冒泡到 document 以后才会进行事件的处理的

事件的处理

事件的处理颇有意思

针对于一个事件好比 mouseup 事件

假如在父节点和子节点都进行了事件的监听，可是在子节点进行事件处理的时候 return false 这样会忽略父节点的事件处理,这个在上一篇日志当中已经进行了说明，不清楚的同窗能够去看下。

事件委托不会交叉处理

而是一个事件一个事件的进行处理

好比一个 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>

SUBMENU 的 CSS实现和 点击判断

SUBMENU 的 CSS实现和点击判断