一步步教大家编写酷炫的导航栏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 相关文章推荐
对联广告js flash激活
Oct 19 Javascript
基于jquery的网页SELECT下拉框美化代码
Oct 28 Javascript
基于jquery中children()与find()的区别介绍
Apr 26 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
Sep 26 Javascript
js网页右下角提示框实例
Oct 14 Javascript
Javascript的表单与验证-非空验证
Mar 18 Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 Javascript
浅谈React + Webpack 构建打包优化
Jan 23 Javascript
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
详解vue配置后台接口方式
Mar 29 Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
Apr 29 Javascript
深入学习JavaScript中的bom
May 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
You might like
php巧获服务器端信息
2006/12/06 PHP
yii2安装详细流程
2018/05/23 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
jquery 事件执行检测代码
2009/12/09 Javascript
js 学习笔记(三)
2009/12/29 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
jQuery绑定事件的四种方式介绍
2016/10/31 Javascript
原生js实现瀑布流布局
2017/03/08 Javascript
JavaScript函数的4种调用方法实例分析
2019/03/05 Javascript
怎么使用javascript深度拷贝一个数组
2019/06/06 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
2020/11/09 jQuery
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
python实现字符串和日期相互转换的方法
2015/05/13 Python
Python中的集合类型知识讲解
2015/08/19 Python
Python实现视频下载功能
2017/03/14 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
Python基础之变量基本用法与进阶详解
2020/01/03 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
教你使用Canvas处理图片的方法
2017/11/28 HTML / CSS
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
瑞士男士时尚网上商店:Babista
2020/05/14 全球购物
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
卫校毕业生自我鉴定
2013/10/31 职场文书
小学后勤管理制度
2014/01/14 职场文书
八项规定整改方案
2014/02/21 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
官僚主义现象查摆问题整改措施
2014/10/04 职场文书
教师节感想
2015/08/11 职场文书
Python并发编程实例教程之线程的玩法
2021/06/20 Python