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中map函数的两种方式
Apr 07 jQuery
jquery中$.fn和图片滚动效果实现的必备知识总结
Apr 21 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
jQuery treeview树形结构应用
Mar 24 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
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
PHP/HTML混写的四种方式总结
2017/02/27 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
jquery实现清新实用的网页菜单效果
2015/08/28 Javascript
JavaScript里 ==与===区别详解
2016/08/16 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
2017/03/03 Javascript
bootstrap table动态加载数据示例代码
2017/03/25 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
javascript实现的时间格式加8小时功能示例
2019/06/13 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
解决pyqt中ui编译成窗体.py中文乱码的问题
2016/12/23 Python
Python获取指定文件夹下的文件名的方法
2018/02/06 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
python实现websocket的客户端压力测试
2019/06/25 Python
Python解析json代码实例解析
2019/11/25 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
餐饮业创业计划书范文
2014/01/06 职场文书
大学生活动策划方案
2014/02/10 职场文书
《夸父追日》教学反思
2014/02/26 职场文书
少先队学雷锋活动月总结
2014/03/09 职场文书
结婚保证书(卖身契)
2015/02/26 职场文书
校长个人总结
2015/03/03 职场文书
幼儿园家长反馈意见
2015/06/03 职场文书