菜单按下去时颜色需要更换,下拉菜单需要更具有立体感

This commit is contained in:
Van 2014-11-05 15:09:39 +08:00
parent c804921da1
commit 591e04ae3c
3 changed files with 11 additions and 4 deletions

View File

@ -72,6 +72,7 @@
width: 320px; width: 320px;
z-index: 21; z-index: 21;
display: none; display: none;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
} }
.frame li { .frame li {
@ -84,9 +85,11 @@
color: #999; color: #999;
} }
.frame li:hover { .frame li:hover,
.menu > ul > li > span.selected {
background-color: #3875D7; background-color: #3875D7;
color: #FFF; color: #FFF;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
} }
.frame li.disabled:hover { .frame li.disabled:hover {

View File

@ -5,6 +5,7 @@ var menu = {
// 点击子菜单后消失 // 点击子菜单后消失
$(".frame li").click(function () { $(".frame li").click(function () {
$(this).closest(".frame").hide(); $(this).closest(".frame").hide();
$(".menu > ul > li > a, .menu > ul> li > span").removeClass("selected");
}); });
}, },
disabled: function (list) { disabled: function (list) {
@ -22,13 +23,16 @@ var menu = {
$(".menu > ul > li > a, .menu > ul> li > span").click(function () { $(".menu > ul > li > a, .menu > ul> li > span").click(function () {
var $it = $(this); var $it = $(this);
$it.next().show(); $it.next().show();
$(".menu > ul > li > a, .menu > ul> li > span").removeClass("selected");
$(this).addClass("selected");
$(".menu > ul > li > a, .menu > ul> li > span").unbind(); $(".menu > ul > li > a, .menu > ul> li > span").unbind();
$(".menu > ul > li > a, .menu > ul> li > span").mouseover(function () { $(".menu > ul > li > a, .menu > ul> li > span").mouseover(function () {
$(".frame").hide(); $(".frame").hide();
var $it = $(this); $(this).next().show();
$it.next().show(); $(".menu > ul > li > a, .menu > ul> li > span").removeClass("selected");
$(this).addClass("selected");
}); });
}); });
} }

View File

@ -436,7 +436,7 @@ var wide = {
if (!($(event.target).closest(".frame").length > 0 || event.target.className === "frame")) { if (!($(event.target).closest(".frame").length > 0 || event.target.className === "frame")) {
$(".frame").hide(); $(".frame").hide();
$(".menu > ul > li > a, .menu > ul> li > span").unbind("mouseover"); $(".menu > ul > li > a, .menu > ul> li > span").unbind("mouseover").removeClass("selected");
menu.subMenu(); menu.subMenu();
} }
}); });