一步步教大家编写酷炫的导航栏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 相关文章推荐
javascript mouseover、mouseout停止事件冒泡的解决方案
Apr 07 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
javascript设计模式之工厂模式示例讲解
Mar 04 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
JS跨域问题详解
Nov 25 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
js实现一个简单的MVVM框架示例
Jan 15 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 Javascript
原生JS实现烟花效果
Mar 10 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
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
Yii框架使用魔术方法实现跨文件调用功能示例
2017/05/20 PHP
php实现保存周期为1天的购物车类
2017/07/07 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
网页常用特效代码整理
2006/06/23 Javascript
JQuery中的$.getJSON 使用说明
2011/03/10 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
python下函数参数的传递(参数带星号的说明)
2010/09/19 Python
解决Python print输出不换行没空格的问题
2018/11/14 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
2016/07/08 HTML / CSS
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
会话Bean的种类
2013/11/07 面试题
开业典礼主持词
2014/03/21 职场文书
老公爱的承诺书
2014/03/31 职场文书
反四风对照检查材料
2014/09/22 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
学生抄袭作业的检讨书
2014/10/02 职场文书
教师党员整改措施
2014/10/24 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
员工自我工作评价
2015/03/06 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
vue实现移动端div拖动效果
2022/03/03 Vue.js
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android