jQuery 实现扁平式小清新导航

更新时间：2020年07月07日 11:54:13 作者：陈莺莺呀

这篇文章主要介绍了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向上遍历DOM树之parents(),parent(),closest()之间的区别
这篇文章主要是对jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2013-12-12
jquery实现放大镜简洁代码(推荐)
这篇文章主要介绍了jquery实现放大镜简洁代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-06-06
Jquery下EasyUI组件中的DataGrid结果集清空方法
要求选择“地区”及“代维公司”后，刷新第一个DataGrid框体，下面为大家介绍下如何清空Jquery下EasyUI组件中的DataGrid结果集
2014-01-01
jQuery 表单验证扩展(三)
前些天写了两篇关于jQuery表单验证的文章，jQuery的插件还存在诸多问题，但是本人还在不断努力更新中。本篇文章主要介绍jQuery表单验证中输入文本内容的范围验证。
2010-10-10
jQuery中removeAttr()方法用法实例
这篇文章主要介绍了jQuery中removeAttr()方法用法,实例分析了removeAttr()方法的功能、定义及从匹配元素中移除相应属性的使用技巧,需要的朋友可以参考下
2015-01-01
jQuery之end()和pushStack()使用介绍
pushStack()方法在jQuery的DOM操作中被频繁的使用, 如在parent(), find(), filter()中, 当然还有其他许多类似的方法, 它们往往需要返回一个jQuery封装过的DOM结果集
2012-02-02
jQuery元素选择器用法实例
这篇文章主要介绍了jQuery元素选择器用法,通过一个简单的隐藏div元素实例讲述了元素选择器的用法,具有一定的参考借鉴价值,需要的朋友可以参考下
2014-12-12
jQuery 3 中的新增功能汇总介绍
本文带你了解了一遍 jQuery 3 将会带来的一些重大变化。或许你已经注意到了，这个版本是可能对你现有的项目产生太大的影响，因为没有引入太多许多重大更改。
2016-06-06
jQuery时间轴插件使用详解
本文给大家分享的是使用jQuery制作的模仿百度时间轴特效的代码，效果非常不错，有需要的小伙伴可以参考下。
2015-07-07
jQuery EasyUI Tab 选项卡问题小结
这篇文章主要介绍了jQuery EasyUI Tab 选项卡问题小结,在项目开发阶段很多朋友都遇到过此问题，其实解决办法很简单的，下面小编给大家分享下问题原因及解决办法，需要的朋友可以参考下
2016-08-08