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轻松实现无缝轮播效果
Mar 22 jQuery
jQuery实现动态添加、删除按钮及input输入框的方法
Apr 27 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
php字符串操作常见问题小结
2016/10/11 PHP
php实现往pdf中加数字签名操作示例【附源码下载】
2018/08/07 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
Add Formatted Data to a Spreadsheet
2007/06/12 Javascript
jQuery 使用手册(五)
2009/09/23 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
2010/03/31 Javascript
原生js 秒表实现代码
2012/07/24 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
超简单的微信小程序轮播图
2019/11/22 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
Python查看微信撤回消息代码
2018/06/07 Python
详解pandas.DataFrame中删除包涵特定字符串所在的行
2019/04/04 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
wxPython修改文本框颜色过程解析
2020/02/14 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
Marc O’Polo俄罗斯官方在线商店:德国高端时尚品牌
2019/12/26 全球购物
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
幼儿园教师国培感言
2014/02/02 职场文书
庆元旦广播稿
2014/02/10 职场文书
理财投资建议书
2014/03/12 职场文书
内衣营销方案
2014/03/15 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
MySQL新手入门进阶语句汇总
2022/09/23 MySQL