隐藏菜单,直到一个框悬停
问题描述:
我有一个浮动在页面右侧的手风琴风格的菜单。它占用了很多空间,我想找到一种方法来隐藏它。隐藏菜单,直到一个框悬停
我怎样才能让橙色的盒子放在它的位置,每当徘徊,菜单出现。
例:
我的菜单:http://jsfiddle.net/4dHYq/
HTML:
<ul class="menu">
<li class="item1"><a href="#">ABOUT US</a>
<ul>
<li class="subitem1"><a href="#">About Us</a></li>
<li class="subitem2"><a href="#">Strange “Stuff”</a></li>
<li class="subitem3"><a href="#">Automatic Fails</a></li>
<li class="subitem1"><a href="#">Cute Kittens</a></li>
<li class="subitem2"><a href="#">Strange “Stuff”</a></li>
<li class="subitem3"><a href="#">Automatic Fails</a></li>
</ul>
</li>
<li class="item2"><a href="#">ACADEMICS</a>
<ul>
<li class="subitem1"><a href="#">Cute Kittens</a></li>
<li class="subitem2"><a href="#">Strange “Stuff”</a></li>
<li class="subitem3"><a href="#">Automatic Fails</a></li>
</ul>
</li>
<li class="item3"><a href="#">RESOURCES</a>
<ul>
<li class="subitem1"><a href="#">Cute Kittens</a></li>
<li class="subitem2"><a href="#">Strange “Stuff”</a></li>
<li class="subitem3"><a href="#">Automatic Fails</a></li>
</ul>
</li>
<li class="item4"><a href="#">DEPARTMENTS</a>
<ul>
<li class="subitem1"><a href="#">Cute Kittens</a></li>
<li class="subitem2"><a href="#">Strange “Stuff”</a></li>
<li class="subitem3"><a href="#">Automatic Fails</a></li>
</ul>
</li>
<li class="item5"><a href="#">FAQs</a>
<ul>
<li class="subitem1"><a href="#">Cute Kittens</a></li>
<li class="subitem2"><a href="#">Strange “Stuff”</a></li>
<li class="subitem3"><a href="#">Automatic Fails</a></li>
</ul>
</li>
</ul>
CSS:
body {
font-size: 100%;
background:#cccccc;
}
a {
text-decoration: none;
}
ul, ul ul {
margin: 0;
padding: 0;
list-style: none;
}
.menu {
float: right;
width: 300px;
height: auto;
}
.menu > li > a {
background-color: #f36f21;
border-bottom: 1px solid #444;
width: 100%;
height: 2.75em;
line-height: 2.75em;
text-indent: 2.75em;
display: block;
position: relative;
color: #fff;
}
.menu ul li a {
background: #fff;
border-bottom: 1px solid #efeff0;
width: 100%;
height: 2em;
line-height: 2em;
text-indent: 2em;
display: block;
position: relative;
color: #444;
}
.menu ul li:last-child a {
border-bottom: 1px solid #444;
}
.menu > li > a:hover, .menu > li > a.active {
background-color: #444;
border-bottom: 1px solid #f36f21;
}
.menu > li > a.active {
border-bottom: 1px solid #f36f21;
}
.menu > li > a:before {
font-size: 36px;
height: 1em;
width: 1em;
position: absolute;
left: 0;
top: 50%;
margin: -.5em 0 0 0;
}
.menu > li > ul li a:before{
content: '▶';
font-size: 8px;
color: #bcbcbf;
position: absolute;
width: 1em;
height: 1em;
top: 0;
left: -2.7em;
}
.menu > li > ul li:hover a,
.menu > li > ul li:hover a span,
.menu > li > ul li:hover a:before {
color: #444;
}
答
应用的通用类隐藏(显示:无;)到你的菜单UL与核实。在这个分区内放置一个Span,它将作为您的菜单的接入点。
然后,您可以添加以下代码:
$('.menuAccess').hover(function() {
$('.menu').removeClass('hide');
}, function() {
$('.menu').addClass('hide');
});
+0
这太好了。谢谢丹尼尔。 – Chaddly 2013-04-10 12:07:33
答
$('.menu').hide();
$('#hm').hover(function(){
$('.menu').show();
},function(){
$('.menu').hide();
});
嗯,你有没有问一个问题。 – 2013-04-09 20:19:11
对不起。修订。 – Chaddly 2013-04-09 20:25:11