原生js代码点击按钮从页面上下左右弹出导航菜单层



359 1433 478



特效描述:页面弹出菜单层 导航菜单 上下左右弹出,点击按钮从上下左右弹出的导航菜单

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />

2. 引入JS

<script type="text/javascript" src="js/classie.js"></script>
<script type="text/javascript" src="js/classie.js"></script>

3. HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Blueprint:点击按钮从上下左右弹出的导航菜单</title>
<!--必要样式-->
</head>
<body class="cbp-spmenu-push">
<div class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
	<h3>源码网</h3>
	<a href="http://www.dijiuzhanzhang.com/">js特效代码</a>
	<a href="http://www.dijiuzhanzhang.com/">网站常用代码</a>
	<a href="http://www.dijiuzhanzhang.com/">教程文章</a>
	<a href="http://www.dijiuzhanzhang.com/">热门cms</a>
	<a href="http://www.dijiuzhanzhang.com/">网页小图标</a>
	<a href="http://www.dijiuzhanzhang.com/">帮助中心</a>
	<a href="http://www.dijiuzhanzhang.com/">域名/主机</a>
</div>
<div class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
	<h3>114源码网</h3>
	<a href="http://www.dijiuzhanzhang.com/">js特效代码</a>
	<a href="http://www.dijiuzhanzhang.com/">网站常用代码</a>
	<a href="http://www.dijiuzhanzhang.com/">教程文章</a>
	<a href="http://www.dijiuzhanzhang.com/">热门cms</a>
	<a href="http://www.dijiuzhanzhang.com/">网页小图标</a>
	<a href="http://www.dijiuzhanzhang.com/">帮助中心</a>
	<a href="http://www.dijiuzhanzhang.com">域名/主机</a>
</div>
<div class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-top" id="cbp-spmenu-s3">
	<h3>114源码网</h3>
	<a href="http://www.dijiuzhanzhang.com/">js特效代码</a>
	<a href="http://www.dijiuzhanzhang.com/">网站常用代码</a>
	<a href="http://www.dijiuzhanzhang.com/">教程文章</a>
	<a href="http://www.dijiuzhanzhang.com/">热门cms</a>
	<a href="http://www.dijiuzhanzhang.com/">网页小图标</a>
	<a href="http://www.dijiuzhanzhang.com/">帮助中心</a>
	<a href="http://www.dijiuzhanzhang.com/">域名/主机</a>
</div>
<div class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom" id="cbp-spmenu-s4">
	<h3>114源码网</h3>
	<a href="http://www.dijiuzhanzhang.com/">js特效代码</a>
	<a href="http://www.dijiuzhanzhang.com/">网站常用代码</a>
	<a href="http://www.dijiuzhanzhang.com/">教程文章</a>
	<a href="http://www.dijiuzhanzhang.com/">热门cms</a>
	<a href="http://www.dijiuzhanzhang.com/">网页小图标</a>
	<a href="http://www.dijiuzhanzhang.com/">帮助中心</a>
	<a href="http://www.dijiuzhanzhang.com/">域名/主机</a>
</div>
<div class="container">
	<div style="height:75px;"></div>
	<div class="main">
		<section>
			<h2>遮罩弹出</h2>
			<!-- Class "cbp-spmenu-open" gets applied to menu -->
			<button id="showLeft">显示/隐藏 左侧遮罩弹出</button>
			<button id="showRight">显示/隐藏 右侧遮罩弹出</button>
			<button id="showTop">显示/隐藏 顶部遮罩弹出</button>
			<button id="showBottom">显示/隐藏 底部遮罩弹出</button>
		</section>
		<section class="buttonset">
			<h2>推送弹出</h2>
			<!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
			<button id="showLeftPush">显示/隐藏 左侧推送弹出</button>
			<button id="showRightPush">显示/隐藏 右侧推送弹出</button>
		</section>
	</div>
</div>
<script type="text/javascript">
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
	menuRight = document.getElementById( 'cbp-spmenu-s2' ),
	menuTop = document.getElementById( 'cbp-spmenu-s3' ),
	menuBottom = document.getElementById( 'cbp-spmenu-s4' ),
	showLeft = document.getElementById( 'showLeft' ),
	showRight = document.getElementById( 'showRight' ),
	showTop = document.getElementById( 'showTop' ),
	showBottom = document.getElementById( 'showBottom' ),
	showLeftPush = document.getElementById( 'showLeftPush' ),
	showRightPush = document.getElementById( 'showRightPush' ),
	body = document.body;
showLeft.onclick = function() {
	classie.toggle( this, 'active' );
	classie.toggle( menuLeft, 'cbp-spmenu-open' );
	disableOther( 'showLeft' );
};
showRight.onclick = function() {
	classie.toggle( this, 'active' );
	classie.toggle( menuRight, 'cbp-spmenu-open' );
	disableOther( 'showRight' );
};
showTop.onclick = function() {
	classie.toggle( this, 'active' );
	classie.toggle( menuTop, 'cbp-spmenu-open' );
	disableOther( 'showTop' );
};
showBottom.onclick = function() {
	classie.toggle( this, 'active' );
	classie.toggle( menuBottom, 'cbp-spmenu-open' );
	disableOther( 'showBottom' );
};
showLeftPush.onclick = function() {
	classie.toggle( this, 'active' );
	classie.toggle( body, 'cbp-spmenu-push-toright' );
	classie.toggle( menuLeft, 'cbp-spmenu-open' );
	disableOther( 'showLeftPush' );
};
showRightPush.onclick = function() {
	classie.toggle( this, 'active' );
	classie.toggle( body, 'cbp-spmenu-push-toleft' );
	classie.toggle( menuRight, 'cbp-spmenu-open' );
	disableOther( 'showRightPush' );
};
function disableOther( button ) {
	if( button !== 'showLeft' ) {
		classie.toggle( showLeft, 'disabled' );
	}
	if( button !== 'showRight' ) {
		classie.toggle( showRight, 'disabled' );
	}
	if( button !== 'showTop' ) {
		classie.toggle( showTop, 'disabled' );
	}
	if( button !== 'showBottom' ) {
		classie.toggle( showBottom, 'disabled' );
	}
	if( button !== 'showLeftPush' ) {
		classie.toggle( showLeftPush, 'disabled' );
	}
	if( button !== 'showRightPush' ) {
		classie.toggle( showRightPush, 'disabled' );
	}
}
</script>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 二级导航菜单 文字提示框 下拉导航菜单 提示框/弹出层 竖直导航菜单 layer 图标导航菜单 lightbox 固定导航菜单 侧边导航菜单 Tooltip工具提示框 树形导航菜单 浮动提示框 网址导航菜单 html5弹窗动画 导航菜单插件 文字导航菜单 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 弹出层拖动 窗口提示框 导航菜单导航条

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到