首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

一步步教大家编写酷炫的导航栏js+css实现

Posted in Javascript onMarch 14, 2016

一步一步的学习制作导航栏，文章末尾再做个综合页面，分享给大家一个炫酷的导航栏供大家参考，具体内容如下

1.当前页面高亮显示的导航栏

首先是HTML代码,很简单,ul+li实现菜单

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>导航栏一</title>
</head>
<body>
  <header class="header">
    <div class="nva">
      <ul class="list">
        <li><a href="Android.html">Android</a></li>
        <li><a href="C++.html">C++</a></li>
        <li><a href="IOS.html">IOS</a></li>
        <li><a href="Java.html">Java</a></li>
        <li><a href="Ruby.html">Ruby</a></li>
      </ul>
    </div>
  </header>
<h1>首页</h1>
</body>
</html>

基本效果:

一步步教大家编写酷炫的导航栏js+css实现

接下来设置CSS属性,这里要注意标签a是行级元素,所以需要用display转成块级元素,这个很常用,还有就是line-height的常见用法

*{ margin:0; padding: 0; }
a{ text-decoration: none; }
.nva{ width: 100%; height: 40px; margin-top: 70px; background-color: #222; }
.list{ width: 80%; height: 40px; margin: 0 auto; list-style-type: none; }
.list li{ float: left; }
.list li a{ padding: 0 30px; color: #aaa; line-height: 40px; display: block; }
.list li a:hover{ background:#333; color:#fff; }
.list li a.on{ background:#333; color:#fff; }
h1{ margin: 20px auto; text-align: center; }

实现的效果:

一步步教大家编写酷炫的导航栏js+css实现

最后就是JS动态添加定位效果了
js里面这样考虑,页面跳转就会有链接,根据链接的后缀来匹配属性,匹配则更改样式即可达到想要的效果
需要注意的就是如何获取URL,如何从URL里面查找出href信息

$(function(){
  //当前链接以/分割后最后一个元素索引
  var index = window.location.href.split("/").length-1;
  //最后一个元素前四个字母,防止后面带参数
  var href = window.location.href.split("/")[index].substr(0,4);
 
  if(href.length>0){
    //如果匹配开头成功则更改样式
    $(".list li a[href^='"+href+"']").addClass("on");
    //[attribute^=value]：匹配给定的属性是以某些值开始的元素。
  }else {
    //默认主页高亮
    $(".list li a[href^='index']").addClass("on");
  }
});

效果图

一步步教大家编写酷炫的导航栏js+css实现

2.划入自动切换的导航条

在1的基础上,修改一下HTMLa标签内容,然后通过CSS设置动画效果

<ul class="list">
        <li><a href="index01.html">
        <b>首页</b>
        <i>Index</i>
        </a></li>
        <li><a href="Android.html">
          <b>Android</b>
          <i>安卓</i>
        </a></li>
        <li><a href="C++.html">
          <b>C++</b>
          <i>谁加加</i>
        </a></li>
        <li><a href="IOS.html">
          <b>IOS</b>
          <i>苹果</i>
        </a></li>
        <li><a href="Java.html">
          <b>Java</b>
          <i>爪哇</i>
        </a></li>
        <li><a href="Ruby.html">
          <b>Ruby</b>
          <i>如八一</i>
        </a></li>
      </ul>

CSS实现动画效果,首先把b和i标签都设置为块级元素,这样的话就可以垂直分布,再给a设置一个transition,所谓的动画,就是划入后改变把a上移,再给a加个边框好观察,看下图

一步步教大家编写酷炫的导航栏js+css实现

最后想实现效果,就给包裹菜单的div设置一个溢出隐藏属性即可

*{ margin:0; padding: 0; }
a{ text-decoration: none; }
.nva{ width: 100%; height: 40px; margin-top: 70px; background-color: #222; overflow: hidden; }
.list{ width: 80%; height: 40px; margin: 0 auto; list-style-type: none; }
.list li{ float: left; }
.list li a{ padding: 0 30px; color: #aaa; line-height: 40px; display: block; transition: 0.3s; }
              .list b,.list i{ display: block; }
.list li a:hover{ margin-top: -40px; background:#333; color:#fff; }
.list li a.on{ background:#333; color:#fff; }
h1{ margin: 20px auto; text-align: center; }

一步步教大家编写酷炫的导航栏js+css实现

也可以采用JQ来实现,代码如下

$(function () {
  $(".list a").hover(function () {
    //stop是当执行其他动画的时候停止当前的
    $(this).stop().animate({
      "margin-top": -40
    }, 300);
  }, function () {
    $(this).stop().animate({
      "margin-top": 0
    }, 300);
  });
});

3.弹性子菜单实现

首先子菜单使用div包裹,里面都是a标签,如下

<li><a href="Android.html">
  <b>Android</b>
</a>
  <div class="down">
    <a href="#">子菜单1</a>
    <a href="#">子菜单2</a>
    <a href="#">子菜单3</a>
    <a href="#">子菜单4</a>
  </div>
</li>

接下来设置样式,既然是子菜单,就要脱离文档页面,所以使用absolute属性,使用这个属性那么父容器就要是relative

*{ margin:0; padding: 0; }
a{ text-decoration: none; }
.nva{ width: 100%; height: 40px; margin-top: 70px; background-color: #222; position: relative; }
.list{ width: 80%; height: 40px; margin: 0 auto; list-style-type: none; }
.list li{ float: left; }
.list li a{ padding: 0 30px; color: #aaa; line-height: 40px; display: block; transition: 0.3s; }
.list b{ display: block; }
.list li a:hover{ background:#333; color:#fff; }
.list li a.on{ background:#333; color:#fff; }
.list .down{ position: absolute; top: 40px; background-color: #222; /*display: none;*/ }
.list .down a{ color: #aaa; padding-left: 30px; display: block; }
h1{ margin: 20px auto; text-align: center; }

如下效果:

一步步教大家编写酷炫的导航栏js+css实现

接下来使用JQ和easing插件来控制动画
find方法一般用来查找操作元素的后代元素的

$(function () {
  $(".list li").hover(function () {
    //这里使用了easing插件
    $(this).find(".down").stop().slideDown({duration:1000,easing:"easeOutBounce"});
  }, function () {
    $(this).find(".down").stop().slideUp({duration:1000,easing:"easeOutBounce"});
  });
});

效果,图片录制不太好,实际上都是弹性动画的。

一步步教大家编写酷炫的导航栏js+css实现

以上就是本文的全部内容，希望对大家的学习有所帮助。

一步步教大家编写酷炫的导航栏js+css实现

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
JQuery页面的表格数据的增加与分页的实现
Dec 10 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 Javascript
通过点击jqgrid表格弹出需要的表格数据
Dec 02 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 Javascript
Jquery Easyui搜索框组件SearchBox使用详解（19）
Dec 17 Javascript
js原生代码实现轮播图的实例讲解
Jul 28 Javascript
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 Javascript
Vue.js watch监视属性知识点总结
Nov 11 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
Jul 23 Javascript
Element InputNumber计数器的使用方法
Jul 27 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 #Javascript
基于javascript html5实现3D翻书特效
Mar 14 #Javascript
php基于redis处理session的方法
Mar 14 #Javascript
使用javascript插入样式
Mar 14 #Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
Mar 14 #Javascript
javascript实现数组去重的多种方法
Mar 14 #Javascript
javascript实现PC网页里的拖拽效果
Mar 14 #Javascript
阿联酋购物网站(26) 智利购物网站(5) 新西兰购物网站(42) 土耳其购物网站(10) 波兰购物网站(52) 斯洛伐克购物网站(7) 泰国购物网站(30) 奥地利购物网站(28) 沙特阿拉伯购物网站(9) 捷克购物网站(26)
You might like
PHP面向对象程序设计之类常量用法实例
2014/08/20 PHP
PHP curl使用实例
2015/07/02 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
js this函数调用无需再次抓获id，name或标签名
2014/03/03 Javascript
javascript中加号(+)操作符的一些神奇作用
2014/06/06 Javascript
angularjs的一些优化小技巧
2014/12/06 Javascript
JS实现单行文字不间断向上滚动的方法
2015/01/29 Javascript
jQuery里filter()函数与find()函数用法分析
2015/06/24 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
ES6新数据结构Set与WeakSet用法分析
2017/03/31 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
详解JS函数防抖
2020/06/05 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
使用Python中的线程进行网络编程的入门教程
2015/04/15 Python
浅谈Python中chr、unichr、ord字符函数之间的对比
2016/06/16 Python
django表单实现下拉框的示例讲解
2018/05/29 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
python协程之动态添加任务的方法
2019/02/19 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
python程序控制NAO机器人行走
2019/04/29 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
国税会议欢迎词
2014/01/16 职场文书
员工安全责任书范本
2014/07/24 职场文书
网吧七夕活动策划方案
2014/08/31 职场文书
怎样写离婚协议书
2014/09/10 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
免职通知
2015/04/23 职场文书
百善孝为先：关于孝道的经典语录
2019/10/18 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python