jQuery 实现扁平式小清新导航

网络编程 2024/5/2 佚名

3 2 1

效果图

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="/UploadFiles/2021-04-02/script.js">

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,扁平式导航

标签：

jQuery,导航,jQuery,扁平式小清新导航,jQuery,扁平式导航

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“jQuery 实现扁平式小清新导航”

jQuery 实现扁平式小清新导航

暂无“jQuery 实现扁平式小清新导航”评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新动态

2024年05月02日

jQuery 实现扁平式小清新导航

jQuery,导航,jQuery,扁平式小清新导航,jQuery,扁平式导航

JavaScript实现像雪花一样的Hexaflake分形

vue@cli3项目模板怎么使用public目录下的静态文件

评论“jQuery 实现扁平式小清新导航”

P70系列延期，华为新旗舰将在下月发布

更新动态

友情链接