以下是 jquery侧边划出导航菜单特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery侧边划出导航菜单</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
<!--
/*Start slide out box*/
div.box_button {
height: 50px;
width: 50px;
text-align: center;
vertical-align: middle;
float: left;
cursor: help;
}
div.box_main {
height: auto;
background-color: #EEE;
float: left;
border-top-width: thin;
border-right-width: thin;
border-left-width: thin;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #4D4D4D;
border-right-color: #4D4D4D;
border-left-color: #4D4D4D;
}
div.box_wrap {
width: auto;
float: left;
clear: both;
height: auto;
position: absolute;
left: -1px;
top: 50px;
}
div.content {
padding: 10px;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
/*End slide out box*/
/*Start drop down menu*/
ul#menu, ul#menu ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 15em;
width: 300px;
}
ul#menu a {
display: block;
text-decoration: none;
}
#menu li a img {
margin-right: 5px;
}
ul#menu li {
width: 300px;
}
ul#menu li a {
color: #333;
background-color: #eeeeee;
font-family: Arial, Helvetica, sans-serif;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #333;
font-size: 36px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
/*End drop down menu*/
-->
</style>
<script type="text/javascript">
$(document).ready(function () {
$(".box_main").hide();
$('#menu ul').hide();
$('#menu li a').click(function () {
$(this).next().slideToggle('normal');
});
$('#box_link').toggle(
function () {
$('.box_main').show(function () {
$('.box_main').animate({
width: '300'
}, 500);
});
$('#box_img').attr("src", "close.png");
},
function () {
$('.box_main').animate({
width: "0"
}, 500, function () {
$('.box_main').hide();
$('#box_img').attr("src", "qm.png");
});
});
});
</script>
</head>
<body>
<div class="box_wrap">
<div class="box_main">
<ul id="menu">
<li>
<a href="#"><img src="faq.png" width="32" height="32" border="0" /><span>FAQ</span></a>
<ul>
<div class="content">
<p>
<strong>Q</strong>. What is this?<br />
<strong>A</strong>. A cool side bar for your website.
</p>
<p>
<strong>Q</strong>. How does it work.<br />
<strong>A</strong>. It uses CSS & jQeuery.
</p>
<p>
<strong>Q</strong>. Who made it?<br />
<strong>A</strong>. Dave Earley did - <a style="font-size:16px; border:none;" href="http://www.baidu.com">www.baidu.com</a><br />
<br />
</p>
</div>
</ul>
</li>
<li>
<a href="#"><img src="contact.png" width="32" height="32" border="0" />Contact Us</a>
<ul>
<div class="content">
<form id="form1" name="form1" method="post" action="">
<label>
Name<br />
<input type="text" name="textfield" id="textfield" />
<br />
Email
<br />
</label>
<label>
<input type="text" name="textfield2" id="textfield2" />
<br />
Message
<br />
<textarea name="textarea" id="textarea" cols="20" rows="3"></textarea>
<br />
</label>
<label>
<input type="submit" name="button" id="button" value="Submit" />
</label>
</form>
</div>
</ul>
<a href="#"><img src="about.png" width="32" height="32" border="0" />About Us</a>
<ul>
<div class="content">
<p><strong>This is some about text.</strong></p>
<p>
This is some about text. This is some about text. This is some about text.
This is some about text. This is some about text.
</p>
<p>
This is some about text. This is some about text.
This is some about text. This is some about text. This is some about text. This is some about text.
</p>
</div>
</ul>
</li>
<li>
<a href="#"><img src="links.png" width="32" height="32" border="0" />Useful Links</a>
<ul>
<li><a style="font-size:18px;" href="http://www.baidu.com/">Yahoo!</a></li>
<li><a style="font-size:18px;" href="http://www.baidu.com/">Google</a></li>
<li><a style="font-size:18px;" href="http://www.baidu.com/">Ask.com</a></li>
<li><a style="font-size:18px;" href="http://www.baidu.com">Dave Earley's Blog</a></li>
</ul>
</li>
</ul>
</div>
<div class="box_button">
<a style="display:block;" href="#" id="box_link">
<img id="box_img" src="qm.png" width="50" height="50" border="0" />
</a>
</div>
</div>
</body>
</html>
分享到QQ
分享到微博
微信扫一扫
