jQuery 实现扁平式小清新导航


Posted in jQuery onJuly 07, 2020

效果图

jQuery 实现扁平式小清新导航

1.html部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>index</title>
  <link rel="stylesheet" href="css/style.css" rel="external nofollow" >
</head>

<body>

<!-- 导航nav -->
<ul id="navigation">
<li class="home"><a href=""><span>Home</span></a></li>
<li class="about"><a href=""><span>About</span></a></li>
<li class="search"><a href=""><span>Search</span></a></li>
<li class="photos"><a href=""><span>Photos</span></a></li>
<li class="rssfeed"><a href=""><span>Rss Feed</span></a></li>
<li class="podcasts"><a href=""><span>Podcasts</span></a></li>
<li class="contact"><a href=""><span>Contact</span></a></li>
</ul>
<div class="info"> </div>

<script src='https://libs.baidu.com/jquery/1.7.1/jquery.min.js'></script>
<script src="js/script.js"></script>
</body>
</html>

2.CSS部分

ul#navigation {
 position:fixed;
 margin:0;
 padding:0;
 top:0;
 right:10px;
 list-style:none;
 z-index:999999;
 width:721px
}
ul#navigation li {
 width:103px;
 display:inline;
 float:left
}
ul#navigation li a {
 display:block;
 float:left;
 margin-top:-2px;
 width:100px;
 height:25px;
 background-color:#e7f2f9;
 background-repeat:no-repeat;
 background-position:50% 10px;
 border:1px solid #bddcef;
 -moz-border-radius:0 0 10px 10px;
 -webkit-border-bottom-right-radius:10px;
 -webkit-border-bottom-left-radius:10px;
 -khtml-border-bottom-right-radius:10px;
 -khtml-border-bottom-left-radius:10px;
 text-decoration:none;
 text-align:center;
 padding-top:80px;
 opacity:.7;
 filter:alpha(opacity=70)
}
ul#navigation li a:hover {
 background-color:#cae3f2
}
ul#navigation li a span {
 letter-spacing:2px;
 font-size:11px;
 color:#60acd8;
 text-shadow:0 -1px 1px #fff
}
ul#navigation .home a {
 background-image:url(../images/home.png)
}
ul#navigation .about a {
 background-image:url(../images/id_card.png)
}
ul#navigation .search a {
 background-image:url(../images/search.png)
}
ul#navigation .podcasts a {
 background-image:url(../images/ipod.png)
}
ul#navigation .rssfeed a {
 background-image:url(../images/rss.png)
}
ul#navigation .photos a {
 background-image:url(../images/camera.png)
}
ul#navigation .contact a {
 background-image:url(../images/mail.png)
}
a.dry {
 position:absolute;
 bottom:15px;
 left:15px;
 text-align:left;
 font-size:12px;
 color:#ccc;
 text-transform:uppercase;
 text-decoration:none
}

3.js部分

$(function() {

  var d=300;

  $('#navigation a').each(function(){

    $(this).stop().animate({

      'marginTop':'-80px'

    },d+=150);

  });



  $('#navigation > li').hover(

  function () {

    $('a',$(this)).stop().animate({

      'marginTop':'-2px'

    },200);

  },

  function () {

    $('a',$(this)).stop().animate({

      'marginTop':'-80px'

    },200);

  }

);

});

图片素材如下

jQuery 实现扁平式小清新导航

以上就是jQuery 实现扁平式小清新导航的详细内容,更多关于jQuery 导航的资料请关注三水点靠木其它相关文章!

jQuery 相关文章推荐
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
jQuery实现开关灯效果
Aug 02 jQuery
jQuery 动态粒子效果示例代码
Jul 07 #jQuery
jQuery实现简单飞机大战
Jul 05 #jQuery
jQuery实现简单日历效果
Jul 05 #jQuery
jQuery实现飞机大战小游戏
Jul 05 #jQuery
jquery实现上传图片功能
Jun 29 #jQuery
jQuery实时统计输入框字数及限制
Jun 24 #jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 #jQuery
You might like
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
详解PHP中foreach的用法和实例
2016/10/25 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
FusionCharts图表显示双Y轴双(多)曲线
2012/11/22 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
2013/06/08 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
JS按字节截取字符长度实例
2013/11/20 Javascript
JavaScript事件委托用法分析
2015/01/24 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
2017/04/11 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
详解webpack2异步加载套路
2018/09/14 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
python使用Berkeley DB数据库实例
2014/09/26 Python
python应用文件读取与登录注册功能
2019/09/23 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
详解Flask前后端分离项目案例
2020/07/24 Python
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
市场营销专业毕业生自荐信
2013/11/02 职场文书
事业单位绩效考核实施方案
2014/03/27 职场文书
抽样调查项目计划书
2014/04/24 职场文书
汽车专业求职信
2014/06/05 职场文书
汇报材料怎么写
2014/12/30 职场文书
2016年十一促销广告语
2016/01/28 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL