首页 何问起 前端特效 htbtn-4 闪电 使用方法

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

posted @   roucheng  阅读(6017)  评论(0编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 使用C#创建一个MCP客户端
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示