jquery打造一款侧边弹出的垂直导航

这是一款利用jquery动画特效和css打造的侧边弹出垂直导航，整个弹出过程比较流畅，而且代码很简单，如果你正在寻找一款带动画的垂直导航，那么可以试试这个。下面是在线demo

HTML源码：

100

101

102

103

104

105

106

107

108

109

110

111

112

<title>Jquery+CSS侧边弹出垂直导航</title>

<style type="text/css">

html, body, ul, li {

margin: 0;

padding: 0;

border: 0;

outline: 0;

vertical-align: baseline;

font-family: "Verdana","lucida sans",Sans-serif;

font-size: 12px;

}

html, body {

min-height: 100%;

color: #FFFFFF;

background-repeat: repeat-x;

background-position: top;

background-color: #161f2a;

}

ul.side_nav {

width: 200px;

float: left;

margin: 0;

padding: 0;

}

ul.side_nav li {

position: relative;

float: left;

margin: 0;

padding: 0;

display: inline;

}

ul.side_nav li a {

width: 165px;

border-top: 1px solid #3373a9;

border-bottom: 1px solid #003867;

padding: 10px 10px 10px 25px;

display: block;

color: #fff;

text-decoration: none;

background: #005094 url(sidenav_arrow.gif) no-repeat 5px 10px;

position: relative;

z-index: 2;

}

ul.side_nav li a:hover {

background-color: #2d353f;

}

ul.side_nav li div {

display: none;

position: absolute;

top: 2px;

left: 0;

width: 225px;

background: url(bubble_top.gif) no-repeat right top;

}

ul.side_nav li div p {

margin: 7px 0;

line-height: 1.3em;

padding: 0 5px 10px 30px;

color: #444;

background: url(bubble_btm.gif) no-repeat right bottom;

}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js

"></script>

<script language="javascript">

$(document).ready(function() {

$("ul.side_nav li").hover(function() {

$(this).find("div").stop()

.animate({ left: "210", opacity: 1 }, "fast")

.css("display", "block")

}, function() {

$(this).find("div").stop()

.animate({ left: "0", opacity: 0 }, "fast")

});

</script>

</head>

<body>

<ul class="side_nav">

<li>

<a href="www.corange.cn">Corange.cn</a>

<div><p>Go home!<Br />ASP</p></div>

</li>

<li>

<a href="#">About Me</a>

<div><p>Get to know me.</p></div>

</li>

<li>

<a href="#">Portfolio</a>

<div><p>Get to check out my featured work!</p></div>

</li>

<li>

<a href="#">Blog</a>

<div><p>Tutorials, articles and resources.</p></div>

</li>

<li>

<a href="#">Contact</a>

<div><p>Don't hesitate to drop me a line!</p></div>

</li>

<li>

<a href="#">Rss</a>

<div><p>News, Video and so on.</p></div>

</li>

</ul>

</body>

</html>

转载于:https://www.cnblogs.com/xiaochao12345/p/3631098.html

jquery打造一款侧边弹出的垂直导航相关推荐

php手机网站底部导航代码,jQuery微信手机端底部弹出导航菜单列表代码
jQuery微信手机端底部弹出导航菜单列表代码 jQuery微信手机端底部弹出导航菜单列表代码是一款网页底部点击按钮弹出浮动的图标菜单列表的手机特效. js代码 function showList() ...
基于jQuery点击圆形边框弹出图片信息
分享一款基于jQuery点击圆形边框弹出图片信息.这是一款鼠标经过图片转换成圆形边框,点击可弹出文字信息.效果图如下: 在线预览源码下载实现的代码. html代码: <div id=&q ...
Jquery 点击图片在弹出层显示大图
[转]Jquery 点击图片在弹出层显示大图使用jquery, 实现点击图片在弹出层显示大图,再次点击关闭,加入图片高宽和窗口高宽的大小判断. 效果图片: 1.点击前的效果: 2.点击后的效果: h ...
使用jquery的blockui插件显示弹出层
使用jquery的blockui插件显示弹出层 Posted on 2011-04-14 16:34 孤独者阅读(9975) 评论(0) 编辑收藏在做网站的开发过程中,可能需要使用弹出层,使用j ...
关于浏览器启动时弹出某网导航的处理办法
关于浏览器启动时弹出某网导航的处理办法现象在我们使用浏览器时,通常由于电脑中下载的某些流氓流氓流氓软件,将我们的浏览器主页强制设置成某一垃圾网址例如某网导航等等,为我们这些强迫症患者带来了极大的困 ...
一款基于jQuery外观优雅带遮罩弹出层对话框
今天我们要来分享一款基于jQuery的弹出层对话框插件,该插件包含多种对话框类型,比如提示框.确认框等.更为实用的是,这款jQuery对话框中的按钮事件也可以被我们所捕获,从而相应对话框按钮的各种事件 ...
html点击图片弹出大图特效代码,Jquery 点击图片在弹出层显示大图
使用jquery,实现点击图片在弹出层显示大图,再次点击关闭,加入图片高宽和窗口高宽的大小判断. 效果图片如下: 1.点击前的效果: 2.点击后的效果: html代码如下: 弹出层图片 Js代码如下: ...
jquery简单实现点击弹出层效果实例
先看效果图: 完整例子:  <div id="race"><a href="#">点击</ ...
jQuery引起的用layer弹出层上传文件不能获取文件名的解决(thinkphp5)
一.问题在用thinkphp5做到用layer弹出层上传文件过程中,一直不能成功.详细代码如下: HTML代码: <div id="importBox" v-show=&q ...

jquery打造一款侧边弹出的垂直导航

jquery打造一款侧边弹出的垂直导航相关推荐

最新文章

热门文章