一步步教大家编写酷炫的导航栏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实现

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

Javascript 相关文章推荐
农历与西历对照
Sep 06 Javascript
一些常用的Javascript函数
Dec 22 Javascript
javascript new一个对象的实质
Jan 07 Javascript
javascript动态控制服务器控件实例
Sep 05 Javascript
js图片模糊切换显示特效的方法
Feb 17 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
Sep 17 Javascript
js自定义瀑布流布局插件
May 16 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
手把手教你使用vue-cli脚手架(图文解析)
Nov 08 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
Aug 28 Javascript
CocosCreator入门教程之网络通信
Apr 16 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
You might like
短波收音机简介
2021/03/01 无线电
window+nginx+php环境配置 附配置搭配说明
2010/12/29 PHP
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
php实现最简单的MVC框架实例教程
2014/09/08 PHP
重定向实现代码
2006/11/20 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
Javascript 键盘事件的组合使用实现代码
2012/05/04 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
Jquery实现顶部弹出框特效
2015/08/08 Javascript
深入理解ECMAScript的几个关键语句
2016/06/01 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
[59:48]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第一场 1月26日
2021/03/11 DOTA
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
python多重继承实例
2014/10/11 Python
Python import用法以及与from...import的区别
2015/05/28 Python
Python使用cx_Oracle调用Oracle存储过程的方法示例
2017/10/07 Python
解决Django中多条件查询的问题
2019/07/18 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
python实现二分类的卡方分箱示例
2019/11/22 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
英国游戏机和游戏购物网站:365games.co.uk
2018/06/18 全球购物
民间借贷协议书范本
2014/10/01 职场文书
2014学生会工作总结报告
2014/12/02 职场文书
2015大学生求职信范文
2015/03/20 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js