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实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
详解jQuery中的easyui
Sep 02 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jquery插件开发模式实例详解
Jul 20 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 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
我的论坛源代码(十)
2006/10/09 PHP
解析PHP中的file_get_contents获取远程页面乱码的问题
2013/06/25 PHP
php读取富文本的时p标签会出现红线是怎么回事
2014/05/13 PHP
20个最新的jQuery插件
2012/01/13 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
九种原生js动画效果
2015/11/11 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
2017/04/20 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
自定义vue组件发布到npm的方法
2018/05/09 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
2018/07/23 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
Python Web框架Flask中使用百度云存储BCS实例
2015/02/08 Python
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
Python实现简单过滤文本段的方法
2017/05/24 Python
python交互界面的退出方法
2019/02/16 Python
Pycharm debug调试时带参数过程解析
2020/02/03 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
学习Python爬虫的几点建议
2020/08/05 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
关于HTML5的22个初级技巧(图文教程)
2012/06/21 HTML / CSS
浅谈html5标签css3的常用样式
2016/10/20 HTML / CSS
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
合作经营协议书
2014/04/17 职场文书
2014年党支部学习材料
2014/05/19 职场文书
高中国旗下的演讲稿
2014/08/28 职场文书
学习焦裕禄同志为人民服务思想汇报
2014/09/10 职场文书
承诺函格式模板
2015/01/21 职场文书
个人收入证明范本
2015/06/12 职场文书