低调奢华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

jQuery弹出深色系层菜单的更多相关文章

  1. jquery弹出关闭遮罩层实例

    jquery弹出关闭遮罩层实例. 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" & ...

  2. jQuery弹出关闭遮罩层

    效果体验:http://keleyi.com/keleyi/phtml/jquery/9.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

  3. 分享一个JQuery弹出层插件

    JQuery插件TipsWindown 1.1 一个基于jQuery的弹出层.支持拖拽,支持内容为文字,图片,URL等!至于兼容性.在IE6下,弹出对像无法绝对固定.其他应该没啥大问题: 最新更新:( ...

  4. 转：jQuery弹出二级菜单

    <html> <head> <meta http-equiv="content-type" content="text/html; char ...

  5. JQuery弹出层，实现弹层切换，可显示可隐藏。

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  6. JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  7. JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮【转】

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  8. 基于jQuery弹出层图片动画查看代码

    分享一款基于jQuery弹出层图片动画查看代码是一款鼠标单击文字或图片内容放大显示且含圆角投影效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&q ...

  9. 【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件

    今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox.它除了能够展示图片之外,还可以展示 flash.iframe 内容.html 文本以及 ajax 调用,我们可以通过 css ...

随机推荐

  1. Reactive Extensions介绍

    Reactive Extensions(Rx)是对LINQ的一种扩展,他的目标是对异步的集合进行操作,也就是说,集合中的元素是异步填充的,比如说从Web或者云端获取数据然后对集合进行填充.Rx起源于M ...

  2. 领域驱动设计系列 (六)：CQRS

    CQRS是Command Query Responsibility Seperation(命令查询职责分离)的缩写. 世上很多事情都比较复杂,但是我们只要进行一些简单的分类后,那么事情就简单了很多,比 ...

  3. 接口自动化测试的"开胃小菜"---简单黑客攻击手段

    Web应用系统的小安全漏洞及相应的攻击方式 接口自动化测试的"开胃小菜" 1   写作目的 本文讲述一个简单的利用WebAPI来进行一次基本没有破坏力的“黑客”行为. 主要目的如下 ...

  4. 收集最好的Mac软件和使用方法

    MacBook 初体验 作者是刚从Windows下转到mac时写的,这篇文章对也主要介绍了Mac下开发环境的部署.软件的安装和卸载.常用快捷键.文件系统的介绍. http://liujiacai.ne ...

  5. 一个新人如何学习在大型系统中添加新功能和Debug

    文章背景: 今年七月份正式入职,公司主营ERP软件,楼主所在的组主要负责二次开发,使用的语言是Java. 什么叫二次开发呢?ERP软件的客户都是企业.而这些企业之间的情况都有所不同,一套标准版本的企业 ...

  6. 《Entity Framework 6 Recipes》中文翻译系列 (28) ------ 第五章 加载实体和导航属性之测试实体是否加载与显式加载关联实体

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 5-11  测试实体引用或实体集合是否加载 问题 你想测试关联实体或实体集合是否已经 ...

  7. spring4mvc返回json(bean,list,map)

    因为spring3和spring4的mvc在前端返回json所需要的jar包不一样,所以索性写一篇关于spring4mvc在前端返回json的博文. 首先,新建一个web项目,项目格式如图所示: co ...

  8. js动态给当前点击元素添加css类

    1.页面:

  9. Web API接口之FileReader

    Web API接口之FileReader *:first-child { margin-top: 0 !important; } body>*:last-child { margin-botto ...

  10. php模拟数据库常用操作效果

    test.php <?php header("Content-type:text/html;charset='utf8'"); error_reporting(E_ALL); ...