首页
所有分类
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 相关文章推荐
Flex通过JS获取客户端IP和计算机名的实例代码
Nov 21 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
关于function类中定义变量this的简单说明
May 28 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
jquery实现转盘抽奖功能
Jan 06 Javascript
jQuery实现大图轮播
Feb 13 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
Mar 28 jQuery
详解在Angularjs中ui-sref和$state.go如何传递参数
Apr 24 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 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) 菲律宾购物网站(13) 波兰购物网站(52) 卡塔尔购物网站(3) 沙特阿拉伯购物网站(9) 匈牙利购物网站(11) 秘鲁购物网站(1) 斯洛伐克购物网站(7) 新西兰购物网站(42) 智利购物网站(5)
You might like
实用函数10
2007/11/08 PHP
PHP获取类中常量，属性，及方法列表的方法
2009/04/09 PHP
DEDE采集大师官方留后门的删除办法
2011/01/08 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
PHP实现读取文件夹及批量重命名文件操作示例
2019/04/15 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
深入理解JavaScript系列（35）：设计模式之迭代器模式详解
2015/03/03 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
2016/08/23 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
elementUI 设置input的只读或禁用的方法
2018/10/30 Javascript
原生JS使用Canvas实现拖拽式绘图功能
2019/06/05 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
Vue 修改网站图标的方法
2020/12/31 Vue.js
Python每天必学之bytes字节
2016/01/28 Python
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
python 接口_从协议到抽象基类详解
2017/08/24 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
Python中的集合介绍
2019/01/28 Python
Python统计文本词汇出现次数的实例代码
2020/02/27 Python
python对XML文件的操作实现代码
2020/03/27 Python
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
缴纳养老保险的证明
2014/01/10 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
党性分析自查总结
2014/10/14 职场文书
2014年防汛工作总结
2014/12/08 职场文书
校车司机安全责任书
2015/05/11 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
公司转让协议书
2016/03/19 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书
QT与javascript交互数据的实现
2021/05/26 Javascript
mysql sock 文件解析及作用讲解
2022/07/15 MySQL