低调奢华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. APP漏洞扫描器之本地拒绝服务检测详解

    APP漏洞扫描器之本地拒绝服务检测详解 阿里聚安全的Android应用漏洞扫描器有一个检测项是本地拒绝服务漏洞的检测,采用的是静态分析加动态模糊测试的方法来检测,检测结果准确全面.本文将讲一下应用漏洞 ...

  2. 【腾讯Bugly干货分享】WebP原理和Android支持现状介绍

    本文来自于腾讯bugly开发者社区,未经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/582939577ef9c5b708556b0d 1.背景 目前网络中图片仍然是占 ...

  3. python 栈和队列（使用list实现）

    5.1.1. Using Lists as Stacks The list methods make it very easy to use a list as a stack, where the ...

  4. 当前不会命中断点。源代码与原始版本不同 (VS2012)

    遇到“当前不会命中断点.源代码与原始版本不同”的问题. 在网上查的类似: 一般studio会提示将“工具”,“选项”,“调试”,“要求源文件与原始版本完成匹配”去掉勾.但是这个配置去掉治标不治本,错误 ...

  5. ios crash的原因与抓取crash日志的方法

    首先我们经常会闪退的异常有哪些呢?crash的产生来源于两种问题:违反iOS策略被干掉,以及自身的代码bug. 1.IOS策略 1.1 低内存闪退 前面提到大多数crash日志都包含着执行线程的栈调用 ...

  6. Web APi之控制器选择Action方法过程（九）

    前言 前面我们叙述了关于控制器创建的详细过程,在前面完成了对控制器的激活之后,就是根据控制器信息来查找匹配的Action方法,这就是本节要讲的内容.当请求过来时首先经过宿主处理管道然后进入Web AP ...

  7. MyCAT常用分片规则之分片枚举

    MyCAT支持多种分片规则,下面测试的这种是分片枚举.适用场景,列值的个数是固定的,譬如省份,月份等. 在这里,需定义三个值,规则均是在rule.xml中定义. 1. tableRule 2. fun ...

  8. php后管理分类导航菜单

    <!DOCTYPE> <html> <head> <meta http-equiv="Content-type" content=&quo ...

  9. ar命令详解

    ar 命令 用途 维护链接编辑器使用的索引库. 语法 ar [  -c ] [  -l ] [  -g | -o ] [  -s ] [  -v ] [  -C ] [  -T ] [  -z ] { ...

  10. iOS 如何设置导航的滑动返回手势， 和系统饿一样

    iOS 7 滑动返回那些事儿 2014/05/17 Wei .entry-meta .entry-header 在智能机越来越普及,屏幕越做越大的当下,滑动返回手势已经成为了一个应用的标配功能,甚至可 ...