jQuery+css3侧边栏导航菜单
效果体验：http://hovertree.com/texiao/jquery/37/
代码如下：
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery和CSS3炫酷按钮点击波特效 - 何问起</title><base target="_blank" /> <!--主要样式-->
<style type="text/css">
* {
margin: 0;
padding: 0;
}
/*hovertreenav styles*/
.hovertreenav ul {
background: white;
border-top: 6px solid hsl(180, 40%, 60%);
width: 200px;
margin: 5em auto;
} .hovertreenav ul li {
list-style-type: none;
/*relative positioning for list items along with overflow hidden to contain the overflowing ripple*/
position: relative;
overflow: hidden;
} .hovertreenav ul li a {
font: normal 14px/28px Montserrat;
color: hsl(180, 40%, 40%);
display: block;
padding: 10px 15px;
text-decoration: none;
cursor: pointer; /*since the links are dummy without href values*/
/*prevent text selection*/
user-select: none;
/*static positioned elements appear behind absolutely positioned siblings(.ink in this case) hence we will make the links relatively positioned to bring them above .ink*/
position: relative;
} /*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/
.hovertreenav .ink {
display: block;
position: absolute;
background: hsl(180, 40%, 80%);
border-radius: 100%;
transform: scale(0);
}
/*animation effect*/
.hovertreenav .ink.animate {
animation: ripple 0.65s linear;
} @keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
transform: scale(2.5);
}
}
</style> <!--[if IE]>
<script src="http://hovertree.com/texiao/html5/4/html5shiv.min.js"></script>
<![endif]--> </head>
<body style="background:#D1EFFE;"> <div class="hovertreenav">
<ul>
<li><a href="http://hovertree.com">何问起</a></li>
<li><a href="http://hovertree.com/menu/bootstrap/">Bootstrap</a></li>
<li><a href="http://hovertree.com/menu/jquery/">jQuery</a></li>
<li><a href="http://hovertree.com/menu/webfront/">web前端</a></li>
<li><a href="http://hovertree.com/h/bjaf/kqud99m6.htm">CSS3动画</a></li>
<li><a href="http://hovertree.com/h/bjaf/mcpnogp6.htm">HTML5红包</a></li>
<li><a>点我有水波</a></li>
</ul>
</div> <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.12.1.min.js"></script>
<script type="text/javascript">
//jQuery time
var parent, ink, d, x, y;
$(".hover"+"treenav ul li a").click(function(e){
parent = $(this).parent();
//create .ink element if it doesn't exist
if(parent.find(".ink").length == 0)
parent.prepend("<span class='ink'></span>"); ink = parent.find(".ink");
//incase of quick double clicks stop the previous animation
ink.removeClass("animate"); //set size of .ink
if(!ink.height() && !ink.width())
{
//use parent's width or height whichever is larger for the diameter to make a circle which can cover the entire element.
d = Math.max(parent.outerWidth(), parent.outerHeight());
ink.css({height: d, width: d});
} //get click coordinates
//logic = click coordinates relative to page - parent's position relative to page - half of self height/width to make it controllable from the center;
x = e.pageX - parent.offset().left - ink.width()/2;
y = e.pageY - parent.offset().top - ink.height()/2; //set the position and add class .animate
ink.css({top: y+'px', left: x+'px'}).addClass("animate");
})
</script> </body>
</html>
web前端汇总:http://www.cnblogs.com/jihua/p/webfront.html
jQuery+css3侧边栏导航菜单的更多相关文章
- 近20个绚丽实用的jQuery/CSS3侧边栏菜单（转载）
http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...
- 20款jquery下拉导航菜单特效代码分享
20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...
- 一款基于jquery的侧边栏导航
之前为大家介绍了好多导航菜单,今天给大家分享一款基于jquery的侧边栏导航.这款导航侧边滑出,适合放在手机网页或webapp.一看下实现的效果图: 在线预览 源码下载 实现的代码. html代码 ...
- 基于jQuery垂直多级导航菜单代码
基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <ul class="ce&q ...
- 19款绚丽实用的jQuery/CSS3侧边栏菜单
jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单 ...
- jQuery垂直二级导航菜单代码
http://www.sucaihuo.com/js/395.html 分享一个简单的垂直二级菜单导航. HTML <div id="my_menu" class=&qu ...
- 两种思想实现基于jquery的延时导航菜单，可做延时触发器！
1. 函数式 html如下: <div class="box"> <ul class="clear-fix"> <li class ...
- 大爱jQuery，10美女模特有用jQuery/CSS3插入（集成点免费下载）
整合下载地址:http://download.csdn.net/detail/yangwei19680827/7343001 jQuery真的是一款非常犀利的Javascript框架,利用jQuery ...
- jquery和css3实现滑动导航菜单
效果预览:http://keleyi.com/keleyi/phtml/html5/15/ 有都中颜色可供选择,请使用支持HTML5/CSS3的浏览器访问. HTML源代码: <!DOCTYPE ...
随机推荐
- C语言可以开发哪些项目？
C语言是我们大多数人的编程入门语言,对其也再熟悉不过了,不过很多初学者在学习的过程中难免会出现迷茫,比如:不知道C语言可以开发哪些项目,可以应用在哪些实际的开发中--,这些迷茫也导致了我们在学习的过程 ...
- java.IO输入输出流：过滤流：buffer流和data流
java.io使用了适配器模式装饰模式等设计模式来解决字符流的套接和输入输出问题. 字节流只能一次处理一个字节,为了更方便的操作数据,便加入了套接流. 问题引入:缓冲流为什么比普通的文件字节流效率高? ...
- 超全面的.NET GDI+图形图像编程教程
本篇主题内容是.NET GDI+图形图像编程系列的教程,不要被这个滚动条吓到,为了查找方便,我没有分开写,上面加了目录了,而且很多都是源码和图片~ (*^_^*) 本人也为了学习深刻,另一方面也是为了 ...
- 二叉树的递归实现(java)
这里演示的二叉树为3层. 递归实现,先构造出一个root节点,先判断左子节点是否为空,为空则构造左子节点,否则进入下一步判断右子节点是否为空,为空则构造右子节点. 利用层数控制迭代次数. 依次递归第二 ...
- Centos 7.0 安装Mono 3.4 和 Jexus 5.6
2013-07-26 写过一篇<CentOS 6.3下 安装 Mono 3.2 和Jexus 5.4>,CentOS 7在CentOS 6的基础上有很大的调整,本文是这篇文章的更新,主要介 ...
- APP技术演化的路
谈起APP,大家都太熟悉不过了,今天想谈谈这么多年技术演化的路. 早期一些大公司就开始做一些APP了,例如facebook.google等国外的公司就已经开发这个技术路线,那个时候的APP数量很少,基 ...
- JS模块化开发：使用SeaJs高效构建页面
一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就 ...
- ASP.NET Web API 过滤器创建、执行过程(二)
ASP.NET Web API 过滤器创建.执行过程(二) 前言 前面一篇中讲解了过滤器执行之前的创建,通过实现IFilterProvider注册到当前的HttpConfiguration里的服务容器 ...
- JavaScript 精粹
数据类型 JavaScript 是 弱类型 语言,但并不是没有类型,JavaScript可以识别下面 7 种不同类型的值: 基本数据类型 Boolean Number String null unde ...
- ABP(现代ASP.NET样板开发框架)系列之22、ABP展现层——导航栏设置
点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之22.ABP展现层——导航栏设置 ABP是“ASP.NET Boilerplate Project (ASP.NE ...