jsをクリックしてポップアップし、左側の隠しメニューをクリックします.
3039 ワード
効果は図の通りです.
展開前:
展開後:
左マージンを設定することでメニューの表示を隠します.
ソース:
ソース:https://github.com/cc1218/TestSlideMenu
展開前:
展開後:
左マージンを設定することでメニューの表示を隠します.
ソース:
<html>
<head>
<title>SlideBar</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<style type="text/css">
#menuBar {
position: absolute;
left: -200px;
width: 226px;
top: 0px;
clip: rect()
}
#glider {
position: absolute;
left: 210px;
top: 0px;
width: 80px
}
.glideText {
font-size: 18px;
color: #E2E2E2;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif
}
#glidetextLink {
background: url(images/sidebar_icon.png) 0 0 no-repeat;
width: 26px;
height: 80px;
cursor:pointer;
}
</style>
<script language="JavaScript">
var pee = -200
var drec = 40;
var speed = 20;
var l = pee;
//This is the function that closes the menu
function Proj7GlideBack() {
l += drec;
document.getElementById('menuBar').style.left = l + 'px';
if (l < 0){
setTimeout('Proj7GlideBack()', speed);//setTimeout
} else {
document.getElementById('glidetextLink').onclick = moveIn;
}
}
//This is the function that opens the menu
function Proj7GlideOut() {
l -= drec;
document.getElementById('menuBar').style.left = l + 'px';
if (l > pee){
setTimeout('Proj7GlideOut()', speed);
} else {
document.getElementById('glidetextLink').onclick = moveOut;
}
}
function moveIn() {
Proj7GlideOut();
return false;
}
function moveOut() {
Proj7GlideBack();
return false;
}
<!--NNresizeFix Reloads the page to workaround a Netscape Bug-->
if (document.layers) {
origWidth = innerWidth;//innerWidth - ( ， )
origHeight = innerHeight;
}
function reDo() {
if (innerWidth != origWidth || innerHeight != origHeight)
location.reload();
}
if (document.layers)
onresize = reDo;
</script>
<div ID="menuBar" style="">
<div style="width:226px; height:80px;background: #fff000">test</div>
<span ID="glider" style="">
<div id="glidetextLink" href="javascript:;" class="glideText"
onClick="Proj7GlideBack(); return false" onFocus="if(this.blur)this.blur()">
</div>
</span>
</div>
</body>
</html>ソース:https://github.com/cc1218/TestSlideMenu