垂直滑动/切换菜单
Vertical sliding / toggle menu
我想使用垂直滑动/切换菜单,请参阅下面我的代码,目前菜单切换只有当你点击+号,请参阅下面的代码。
我试图找出一种方法,当你点击类别名称如帖子和子菜单将打开(与+相同的功能),页面将转到帖子页面。当你点击+号时,函数和页面保持不变。
如何定位此任务?谢谢你的帮助/建议。
谢谢!
<html>
<head>
<style type="text/css">
body{background:#CCC;}
#container{margin:0 auto; background:white; border:1px solid #999; width:400px; padding:20px; -moz-border-radius:10px;-webkit-border-radius:10px; overflow:hidden;}
#menu {text-align:left;}
/*Toggle Area*/
#menu .toggle {float:right;width:9px; padding:5px; cursor:pointer; border-top:1px solid white; border-left:1px solid #E0E0E0; color:#999;}
#menu ul.navmenu li:first-child .toggle{border-width:0 0 0 1px;}
/*Menu Setup*/
#menu ul{padding:0; margin:0; width:150px;}
#menu ul ul{border:1px solid #CCC;overflow:hidden;}
#menu ul.navmenu li {margin:0; list-style:none;float:left;}
#menu ul.navmenu li li {float:none;}
/*Links*/
#menu ul.navmenu a, #menu ul.navmenu a:visited {text-decoration:none; padding:5px; display:block; color:#008FDD;}
#menu ul.navmenu ul.submenu a:hover{background:#FFF4D2; color:#333;}
/*Heading Outer div*/
#menu ul.navmenu .menutop{border:1px solid #CCC; border-width:0 1px; overflow:hidden; width:150px; background:#F9F9F9; }
/*Header Links*/
#menu ul.navmenu .menutop a{width:120px;float:left;margin:0 0 1px 0; border-top:1px solid white;}
/*Header Link Hover*/
#menu ul.navmenu .menutop a:hover{color:#333;}
/*Removes white border for the first header*/
#menu ul.navmenu li:first-child .menutop a {border-width:0px;}
/*Single Menu Width Fix*/
#menu ul.navmenu .menusingle a{width:140px;}
/*Border Radius and Special Border Width*/
#menu ul.navmenu li:first-child .menutop{border-width:1px 1px 0 1px; -moz-border-radius:5px 5px 0 0;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;}
#menu ul.navmenu li:last-child .menutop{border-width:0px 1px 1px 1px; -moz-border-radius:0 0 5px 5px; -webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;}
#menu ul.navmenu li:last-child ul.submenu{-moz-border-radius:0 0 5px 5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;}
#menu ul.navmenu li:last-child .menutop-open{-moz-border-radius:0;-webkit-border-radius:0px; border-width:0 1px;}
</style>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){
hideMenus();
$('.toggle').click(function(){
var menu = $(this);
hideMenus();
if (menu.hasClass('toggle-open')) {
menuHide(menu);
}else{
menuShow(menu);
}
});
});
function hideMenus(){
$('.toggle').each(function(){
menuHide($(this));
});
}
function menuHide(menu){
menu.removeClass('toggle-open').addClass('toggle-closed').empty('').append('+').parents('li').children('ul').slideUp(250);
menu.parent('.menutop').removeClass('menutop-open').addClass('menutop-closed');
}
function menuShow(menu){
menu.parent('.menutop').removeClass('menutop-closed').addClass('menutop-open');
menu.removeClass('toggle-closed').addClass('toggle-open').empty('').append('–').parents('li').children('ul').slideDown(250);
}
</script>
</head>
<body>
<div id="container">
<div id="menu">
<ul class="navmenu">
<li><div class="menutop"><a href="#">Posts</a><div class="toggle">+</div></div>
<ul class="submenu">
<li><a href="#">Add New</a></li>
<li><a href="#">Tags</a></li>
</ul>
</li>
<li><div class="menutop"><a href="#">Pages</a><div class="toggle">+</div></div>
<ul class="submenu">
<li><a href="#">Add New</a></li>
<li><a href="#">Edit</a></li>
</ul>
</li>
<li><div class="menutop menusingle"><a href="#">Comments</a></div></li>
<li><div class="menutop"><a href="#">Users</a><div class="toggle">+</div></div>
<ul class="submenu">
<li><a href="#">Manage</a></li>
<li><a href="#">Add New</a></li>
<li><a href="#">Profile</a></li>
</ul>
</li>
</ul>
</div></div>
</body>
</html>
这是我用来做到这一点的代码,除了我使用箭头图像代替+和-,但你应该能够修改它。希望能有所帮助!
编辑:我把下面的代码放到JSFiddle上,这样您就可以尝试了:http://jsfiddle.net/CrxAg/3/
HTML:<div id="menu">
<div class="submenublock" id="submenu1"><h3>Category1</h3>
<ul>
<li><a href="page.html">option1</a></li>
<li><a href="page.html">option2</a></li>
</ul>
</div>
<div class="submenublock" id="submenu2"><h3>Category2</h3>
<ul>
<li><a href="page.html">option1</a></li>
<li><a href="page.html">option2</a></li>
</ul>
</div>
</div>
JS:
$(document).ready(function(){
$('div.submenublock > ul').hide();
$("div.submenublock > h3").css("background", "url(images/menuarrowdown.gif) no-repeat right bottom");
$('div.submenublock > h3').click(function() {
$(this).next().slideToggle('fast',function(){
//set arrow depending on whether menu is shown or hidden
if ($(this).is(':hidden')) {
$(this).prev().css("background", "url(images/menuarrowdown.gif) no-repeat right bottom");
} else {
$(this).prev().css("background", "url(images/menuarrowup.gif) no-repeat right bottom");
}
return false;
});
});
/* change appearance of h3 element on hover to make it look like a link */
$('div.submenublock > h3').hover(over, out);
function over(event) {
$(this).find("a").css("color", "#663");
$(this).css("cursor", "pointer");
}
function out(event) {
$(this).find("a").css("color", "");
$(this).css("cursor", "default");
}
/*end hover code*/
});
相关文章:
- 悬停时展开垂直下拉菜单,而不是单击
- 如何创建具有第三级的垂直导航菜单
- 垂直菜单/导航 - WordPress/JSFiddle.
- 垂直菜单展开不适用于动态内容
- javascript+语义ui:垂直菜单与项目之间的对话框,如何
- 垂直菜单/导航自动滚动
- 如何使用jsf制作垂直菜单
- Jquery垂直下拉菜单
- 我有下面垂直菜单的jquery代码,当我悬停在apparels选项卡上时,我有两个选项卡作为apparels和化妆品
- 如何在单击子链接时停止垂直菜单的手风琴
- 垂直手风琴导航菜单
- 垂直菜单与砌体的奇怪行为
- CSS 更改样式垂直响应菜单
- 如何创建垂直导航菜单
- 垂直手风琴菜单溢出问题
- 如何使所有类别的垂直子菜单容器位置相同
- 如何制作垂直菜单,以便其他菜单随着其扩展而下降
- 如何或在哪里将javascript settimeout函数添加到CSS垂直下拉菜单
- jQuery手风琴鼠标悬停和鼠标退出垂直菜单的导航
- 如何使JavaScript菜单垂直显示