jQuery弹出深色系层菜单
低调奢华jQuery弹出层菜单,使用新版的jQuery库,兼容多种浏览器。Demo展示:
http://hovertree.com/texiao/layer/3/
本特效可以作为网站的引导页,使用jQuery实现导航菜单,鼠标悬停,在右侧倾斜而出,可以关闭。大图可以选用深色的图片。
效果图如下:
代码如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>弹出层导航 - 何问起</title><base target="_blank" /><link type="text/css" href="http://hovertree.com/texiao/layer/3/css/index.css" rel="stylesheet"> <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ function anim(duration){ $('#hovertreemin').animate( {height: 'toggle'}, {duration: duration} ); } $('#hover'+'treeclose').on("mouseover",function() { $('#hov'+'ertreeminbar').hide(); anim(60); });$('#hover'+'treemin').on("click", function () { anim(60); $('#hovertreeminbar').show(); }) }); </script></head><body> <div class="hovertreebj"><img src="http://hovertree.com/hvtimg/bjafje/7o1qq4ge.gif" /></div><div id="hovertreeminbar"><a id="hovertreeclose" target="_self" href="javascript:;"><img src="http://hovertree.com/texiao/layer/3/images/wd02.png" /></a></div><div id="hovertreemin" style="display:none;position:absolute;top:0;right:0px;"> <div class="box-nav-bj"><img style="right:0px; top:0px;" src="http://hovertree.com/texiao/layer/3/images/wd06.png" /></div> <ul class="box-nav"> <li><a href="http://hovertree.com/about/">关于我们</a></li> <li><a href="http://hovertree.com/menu/webfront/">产品展示</a></li> <li><a href="http://hovertree.com/h/bjaf/l3c6nm7b.htm">案例展示</a></li> <li><a href="http://hovertree.com/menu/zixun/">新闻中心</a></li> <li><a href="http://hovertree.com/h/bjaf/rnqpxtsq.htm">新闻资讯</a></li> <li><a href="http://hovertree.com/h/bjaf/meihua.htm">联系我们</a></li> </ul> <img src="http://hovertree.com/texiao/layer/3/images/wd07.png" alt="丝带"/> <div class="box-phone"> <p>公司主页:</p> <p>hwq2.com</p> </div> </div><div class="box-dibu"> <div class="box-dibu1"> <p>网站引导页</p> <p>何问起,分享网页特效,前端知识,题库代码等。<a href="http://hovertree.com/h/bjaf/yindaoye.htm">原文</a> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a></p> </div> <div class="box-dibu2"> <a href="http://hovertree.com/map/"><img src="http://hovertree.com/texiao/layer/3/images/wd04.png" /></a> <a href="http://hovertree.com/about/"><img src="http://hovertree.com/texiao/layer/3/images/wd05.png" /></a> </div> </div></body> </html>
转自:http://hovertree.com/h/bjaf/yindaoye.htm
推荐:http://www.cnblogs.com/roucheng/p/welcome.html
特效库:http://www.cnblogs.com/roucheng/p/texiao.html
转载于:https://www.cnblogs.com/roucheng/p/layermenu.html
jQuery弹出深色系层菜单相关推荐
- JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...
- html 弹出层插件,jQuery弹出层插件(原创)
插件描述:简约的jQuery弹出层插件 更新时间:2020-01-17 23:37:28 更新说明:版本v4.3.0 1.修复最大化可拖动.改变大小的问题 2.去除对于图片的依赖 3.更新拖动插件 4 ...
- jQuery弹出层登录和全屏注册表单
jQuery弹出层登录和全屏注册表单,这是一款很漂亮的jQuery登录和注册表单,点击登录时弹出一个登录窗口并伴随动画效果,注册页面则是全屏显示,非常时尚的jQuery表单. 代码: <!DOC ...
- jquery 弹出遮罩层
jquery 弹出遮罩层 点击层关闭 转载于:https://blog.51cto.com/ming358721/423505
- jbox弹窗_强大的jquery弹出层插件jBox
jBox是一款功能强大的jquery弹出层插件.jBox插件可以用来创建tooltips提示框.模态窗口.图片画廊等多种效果. 使用方法 在页面中引入jBox.all.min.css.jquery和j ...
- js ajax 点击遮罩层,jQuery弹出遮罩层效果完整示例
本文实例讲述了jQuery弹出遮罩层效果.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition ...
- Jquery弹出层插件ThickBox的使用方法
这篇文章主要介绍了Jquery弹出层插件ThickBox的使用方法,需要的朋友可以参考下 thickbox是jQuery的一个插件,其作用是弹出对话框.网页框,使用户体验度更加愉悦,下面就来简单介绍它 ...
- jquery弹出插件
对于jquery弹出插件,想起自己刚学习js那会,在实习的时候做过一个,唉,做工太粗浅了. 点击看效果demo (function($, window, document,undefined){ va ...
- Jquery 弹出对话框插件xcConfirm.js
Jquery 弹出对话框插件xcConfirm.js,感觉很方便使用,使用方法如下: <!DOCTYPE html> <html><head><meta ch ...
最新文章
- 深度学习之单目深度估计:无监督学习篇
- Arch Linux 指南——安装基本系统
- IT技术文章示例(附源码)
- .Net 操作MSMQ
- 笔记-项目干系人管理-管理干系人参与
- VC++ 删除当前读取行 代码
- Spring+Quartz实现定时任务
- python相对路径找不到文件_Python相对路径从子文件夹导入
- -bash: belts.awk: command not found
- java json转xml_关于JSON与XML的区别比较
- Android:沉浸式状态栏(一)工具类
- ajax跨域请求jsonp
- %@ include file=%与jsp:include page=/
- 许久未见,归来仍是少年?
- python系统开发_证券交易系统设计与开发
- python编程大赛队名_同行——团队展示
- 伊朗 2018 ICPC区域赛 A : Iranian ChamPions Cup
- 社团管理系统网站(php+mysql)
- matlab实现图片锐化处理
- logo是啥_logo是什么意思