找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1917|回复: 0

[分享] SUBMENU 的 CSS实现和 点击判断

[复制链接]
发表于 2013-4-9 17:41:43 | 显示全部楼层 |阅读模式 来自 中国–北京–北京
SUBMENU CSS实现和 点击判断

点击判断基础:
使用 mouseup 事件来控制点击除了SUBMENU-TITLE和SUBMENU-CONTENT其余文档隐藏 所有SUBMENU 的操作。
点击判断比较难以理解的部分:
点击SUBMENU-TITLE 和 SUBMENU-CONTENT 从而实现菜单的显示隐藏操作。
给每一个SUBMENU 添加 flag 属性,用于判断下拉菜单的状态从而根据状态做出相应的事件反映。
-- 点击事件
-- click submenu
    -- judge flag
    -- 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 借鉴了一个老外的样式):
[code=Xml width=600px]<!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>[/code]

另外因为 submenu 的事件控制问题继续来说下事件的相应判断。
结论:
整个事件要分成三段来进行处理
事件的产生
事件的冒泡
和事件的处理

1

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号

关闭

站长推荐上一条 /1 下一条

QQ|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛 ( 豫ICP备2022021143号-1 )

GMT+8, 2024-11-5 15:49 , Processed in 0.034950 second(s), 8 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表