我的网站正在进行大规模的改造。我想为它添加更多功能,但我想我已经有点太过分了。
与我的问题相关的链接是:http://www.andrewryan.me/AndrewRyan/index.html
我顶部菜单的左侧有一个按钮。我做得很好漂亮而且纯粹是css。每当我使用菜单时,由于我离开了目标,因此必须遵循不确定性的路径并冒险关闭菜单或子菜单,这是非常烦人的。
我希望用户能够点击该按钮并打开导航菜单。从那里,用户可以将鼠标放在他们喜欢的任何地方,并且在他们点击元素外部或进行选择之前不会消失。还有一些我想要向右走的小节。那些也必须被点击,但是如果你将鼠标从子菜单上移开,这是唯一可以消失的东西。主菜单将保留。这是我到目前为止的代码,我尝试了多种方法,但它似乎没有用。我对jQuery或JavaScript几乎一无所知。
HTML:
<div id="navigation">
<ul id="nav">
<li><a href="#">Navigation</a>
<ul class="menu">
<li><a href="#">Professional</a>
<ul class="submenu">
<li><a href="#">Ambitions</a></li>
<li><a href="#">Resume</a></li>
<li><a href="#">Portfolio ></a></li>
</ul>
</li>
<li><a href="#">About Myself</a>
<ul class="submenu">
<li><a href="#">My Family</a></li>
<li><a href="#">Interests</a></li>
<li><a href="#">Scrap Book</a></li>
</ul>
</li>
<li><a href="#">Social Life</a>
<ul class="submenu">
<li><a href="#">Social Philosiphy</a></li>
<li><a href="#">My Networks ></a>
<ul class="submenu">
<li><a href="#" target="_blank">Facebook</a></li>
<li><a href="#" target="_blank">Google+</a></li>
<li><a href="#" target="_blank">Personal Tumblr</a></li>
<li><a href="#" target="_blank">YouTube</a></li>
<li><a href="#" target="_blank">Twitter</a></li>
<li><a href="#" target="_blank">Deviant Art</a></li>
<li><a href="#" target="_blank">Sound Cloud</a></li>
<li><a href="#" target="_blank">Github</a></li>
<li><a href="#" target="_blank">Diaspora</a></li>
<li><a href="#" target="_blank">MySpace</a></li>
<li><a href="#" target="_blank">about.me</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
CSS:
#navigation {
width:300px;
height:40px;
float:left;
margin-top:-4px;
}
#navigation a {
margin:0px auto;
color:#ccc;
outline:none;
z-index:5;
}
#nav {
padding:7px 6px 10px 0px;
background:none;
line-height: 100%;
display:inline-block;
}
#nav li {
margin:0 0 0 5px;
padding:0 0 0 0px;
float:left;
position:relative;
list-style:none;
}
#nav a {
border-radius:20px 25px 0 10px;
border-top:solid 3px #fff;
border-left:solid 3px #fff;
font-weight:bold;
color:#fff;
background:none;
text-decoration:none;
display:block;
padding:8px 20px;
}
/* hovers and current tabs */
#nav a:hover {
border-radius:10px;
background:none;
color:#ccc;
}
#nav .current a {
border-radius:20px 25px 0 10px;
background:none;
color:#ccc;
margin-bottom:0px;
border-top:solid 3px #ccc;
border-left:solid 3px #ccc;
}
#nav li:hover > a {
border-radius:20px 25px 0 10px;
background:none;
color: #ccc;
margin-bottom:0px;
border-top: solid 3px #ccc;
border-left:solid 3px #ccc;
}
#nav ul li:hover a, #nav li:hover li a {
background:none;
border:none;
color:#333;
border-top:solid 1px #dfdfdf;
}
#nav ul a:hover {
color:black !important;
}
/* dropdown */
#nav li:hover > ul {
display:block;
background-color:#fff;
border-radius:10px 10px 10px 10px;
}
/* level 2 list */
#nav ul {
display:none;
margin: 0;
padding:0;
width:150px;
position:absolute;
top:33px;
left:0;
background:#aaa;
border:solid 1px #b4b4b4;
}
#nav ul:hover {
background-color:#ddd;
}
#nav ul li {
z-index:5;
font-weight:bold;
float:none;
margin:0px;
padding:0px;
}
#nav ul a {
font-weight:normal;
}
答案 0 :(得分:1)
看看这个小提琴:http://jsfiddle.net/5h6Vp/3/
$(document).on('click', function(e){
if($(e.target).parents('#menu').length > 0){
/*click in #menu*/
}else if($(e.target).attr('id') == 'show'){
$('#menu').toggle();
}else{
$('#menu').hide();
}
});
将此代码用于子菜单:
$('#menu>ul>li').has('ul').on('click', function(e){
$('#menu>ul>li>ul').hide();
$(this).find('ul').show();
});
$('#menu>ul>li>ul').on('mouseleave', function(e){
$(this).hide();
});
$('#menu').on('mouseleave', function(e){
$('#menu>ul>li>ul').hide();
});
(我在粘贴代码之前写了这个答案,所以我的代码结构有点不同 - 但想法仍然相同)
答案 1 :(得分:0)
这是一个非常简单的点击导航菜单:
http://jsfiddle.net/jtbowden/WGVum/
代码很基本:
$('#navigation').on('click', 'a[href="#"]', function() {
$('#navigation ul').hide(); // Hide everything when we click
var submenu = $(this).next('ul'); // Find the associated sub-menu
submenu.parentsUntil('#navigation').andSelf().show(); // Show all hierarchy above
});
在这种情况下,我们只响应以#
作为href的点击。这也可以是一个类或任何其他属性。
如果您希望在单击其他位置时隐藏菜单,并在单击时切换子菜单,则可以使用以下代码:
$('#navigation').on('click', 'a[href="#"]', function() {
var submenu = $(this).next('ul');
$('#navigation ul').not(submenu).hide();
submenu.parentsUntil('#navigation', 'ul').show().end().toggle();
return false;
});
$(document).click(function() {
$('#navigation ul ul').hide();
});