低调奢华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. Logging with Log4net (二)

    log4net 是.net 的一款日志记录框架. 它提供了很多的方法来帮助记录日志: 使用起来也比较方便: 选中项目,点击右键,然后选择 Manage NuGet Packages... 安装log4 ...

  2. Nova PhoneGap框架 第八章 滚动条

    你可能会疑惑为什么滚动条这么常见的功能会在这里单独列出,但如果你有过PhoneGap开发经验的话,你就会发现要在Android 2.3 里面实现滚动条那真不是一件容易的事. 8.1 概述 目前主流的P ...

  3. Hadoop学习笔记—3.Hadoop RPC机制的使用

    一.RPC基础概念 1.1 RPC的基础概念 RPC,即Remote Procdure Call,中文名:远程过程调用: (1)它允许一台计算机程序远程调用另外一台计算机的子程序,而不用去关心底层的网 ...

  4. 新功能发布！Markdown写博客！

    有一种神奇的语言,它比html还简单,它巧妙地将内容与格式整合在一起--它就是Markdown. 现在我们实现了博客对Markdown的内置支持,可以让您轻松地在园子里用这个神奇的语言写博客! &qu ...

  5. C++的性能C#的产能?! - .Net Native 系列向导

    之前一文<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATIVE初窥> 获得很多朋友支持和鼓励,也更让我坚定做这项技术的推广者,希望能让更多的朋友了解这项技术,于是先从官方 ...

  6. oracle数据库的安装、配置与无残留卸载

    安装配置   :关闭专用网络防火墙 2 :以管理员身份运行安装文件 ——“setup.exe” 3 :设置口令    其中SYS 用户权限大于 SYSTEM 4 :先决条件检查,若验证成功,点击 ”下 ...

  7. 说说设计模式~大话目录(Design Pattern)

    回到占占推荐博客索引 设计模式(Design pattern)与其它知识不同,它没有华丽的外表,没有吸引人的工具去实现,它是一种心法,一种内功,如果你希望在软件开发领域有一种新的突破,一个质的飞越,那 ...

  8. jquery做一些小的特效

    在文本框里输入内容到添加到下拉列表里,移除下拉里的内容 1 <!DOCTYPE html> <html> <head> <meta charset=" ...

  9. Angularjs学习---官方phonecat实例学习angularjs step0 step1

    接下来一系列的文章都是学习https://docs.angularjs.org/tutorial的笔记,主要学习的angular-phonecat项目的实现,来介绍angularjs的使用. 1.下载 ...

  10. C#中通过反射方法获取控件类型和名称

    这个方法是简单的也是神奇的. 有木有想过,将自己项目中的所有类型,包括自定义类型的命名空间和名称全部获取出来? 有木有想过,有一种简便的方法可以自动化管理项目中的控件和窗体? 有木有想过... 首先, ...