使用Javascript开发sliding-nav带滑动条效果的导航插件

2024-03-30 22:56:08

本文介绍如何使用纯Javascript来开发一款简单的JS插件，本插件可以实现鼠标悬停在导航上时，下方的滑动条自动从当前菜单滑动到所选菜单当中去。

本项目的源代码寄宿于GitHub，记得点小星星哦：

https://github.com/dosboy0716/sliding-nav

一、前言

效果如下图：

二、使用方法

本插件只需要如下的三步，就可以在您的项目中使用：

1、在</body>标记结束前，引用sliding-nav.js文件

2、在需要滑动条的菜单容器上加类名 sliding-nav，当前项使用类名：active

3、使用属性来定定外观:sn-color="颜色" sn-radius="圆度" sn-height="高度"

<script src="/path/to/sliding-nav.js"></script>
<ul class="nav sliding-nav" sn-color="#F00" sn-radius="0px" sn-height="3px">
 <li class="active">菜单项1</li>
 <li>菜单项2</li>
 <li>菜单项3</li>
<ul>

三、开发过程

1. 模型示例

导航菜单一般使用上图的层次型结构，外层容器使用<ul> 标记，菜单项使用<li>标记，假设如果要显示黄色小横条，如何定位很重要。

经过分析，虽然在视觉上小横条位于UL之内，为了不破坏原来导航的样式，小黄条必须使用absolute的绝对定位，并且初始位置与ul标记相同。

因此，我们把小横条插入<ul>标记的前面，如上面的小灰点，它就是小横条的初始位置即(left=0,top=0)的位置。

那么我们如何让小条看起来在菜单项的正下方呢？

把小条的top属性赋值为菜单项的高度（即offsetHeight属性），
把小条的left属性赋值为菜单项的左边距（即offsetLeft属性）

实现上面的功能可以使用如下的代码：

function init() {

 var navs = document.getElementsByClassName('sliding-nav');

 for (var i = 0; i < navs.length; i++) {

  //创建一个DIV与当前导航竖向对齐
  var indi = document.createElement("div");
  indi.id = "slna-indicator"

  indi.style.borderRadius = navs[i].getAttribute("sn-radius") || "0px"
  indi.style.height = navs[i].getAttribute("sn-height") || "3px"
  indi.style.backgroundColor = navs[i].getAttribute("sn-color") || "#F00"

  indi.style.position = "absolute"
  indi.style.transition = "0.5s"

  //查找当前子菜单项,如果有类名active或者是selected就视为当前项，如果没有使用第1项
  var selected = navs[i].getElementsByClassName('active')
  if (selected.length == 0) {
   selected = navs[i].getElementsByClassName('selected')
  }
  if (selected.length == 0) {
   selected = navs[i].children
  }

  if (selected.length == 0) {
   throw Error('Sorry, Navigation bar has no item at all!');
  }

  selected = selected[0];

  indi.style.width = selected.offsetWidth + "px";
  indi.style.top = selected.offsetHeight + "px";
  indi.style.left = selected.offsetLeft + "px";
  navs[i].parentElement.insertBefore(indi, navs[i]);

  //未完成，下面插入代码以绑定事件

 }

}

如上的代码构建了初始化函数init()，此函数：

查找所有含有类名sliding-nav的标记，并且按照上面的方法，在前面插入div标记充当“指示条”，并且查找“活动”的菜单项，找到后通过这个菜单项的各个属性给“指示条”定位。

2、事件与动画

我们把"指示条"div 标记transition属性设置成了0.5s，那么只要在事件里直接设置该div的如下:

left属性就可以实现"指示条"的移动
width属性就可以设置"指示条"的宽度

所以可以在如上的代码末尾，插入如下的代码实现事件与动画：

for (var j = 0; j < navs[i].children.length; j++) {

   hover(navs[i].children[j], function(e, elem) {

    indi.style.width = elem.offsetWidth + "px";
    indi.style.left = elem.offsetLeft + "px";

   });

   //移出导航就恢复默认
   hover(navs[i], null, function(e, elem) {
    indi.style.width = selected.offsetWidth + "px";
    indi.style.left = selected.offsetLeft + "px";
   });

  }

其中代码，用到了自定义函数hover，该函数类似于实现hover事件，JS原生只有mouseover和mouseout事件。

函数作用是给DOM元素绑定鼠标移入和鼠标移出事件，具体实现的过程，可以看作者原代码。

四、所有原代码

本文实现的所有原代码如下，希望读者提出更加优化的建议，我们一起打造更加唯美的前端体验。

for (var j = 0; j < navs[i].children.length; j++) {

   hover(navs[i].children[j], function(e, elem) {

    indi.style.width = elem.offsetWidth + "px";
    indi.style.left = elem.offsetLeft + "px";

   });

   //移出导航就恢复默认
   hover(navs[i], null, function(e, elem) {
    indi.style.width = selected.offsetWidth + "px";
    indi.style.left = selected.offsetLeft + "px";
   });

  }

到此这篇关于使用Javascript开发sliding-nav带滑动条效果的导航插件的文章就介绍到这了,更多相关js 开发sliding-nav导航条插件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vuejs 切换导航条高亮(路由菜单高亮)的方法示例

我的GitHub前端经验总结,喜欢的话请点star:Thanks.: https://github.com/liangfengbo/frontend-develop vuejs导航条高亮我的做法: 用一个数组存导航条,用v-for循环它,这样可以减少代码,二可以使用它的下标来判断高亮,三还可以获取后端的导航信息来遍历重点是在:routerLink(index, path)函数,传入当前点击的下标,自定义一个下标,判断是否相等就用三元符号判断多给一个高亮样式如何解决刷新就不高亮或第一个高亮了,
仿客齐集首页导航条DIV+CSS+JS [代码实例]

作者子鼠客齐集首页的一个效果, 今天有人问我是怎么写的,于是晚上就又重写了一个; 顺便把那个布局再理一下: 你可以先看一下客齐集首页的效果:http://shanghai.kijiji.cn 我试着不用position:absolute的方法: 但写起来太难了: 后来还是用position:absolute了: 但在客齐集站上的是没有用的:真不知道当时是怎么写出来的:以下是效果图: 以下是布局部分复制代码代码如下: <div id="info"> <div
JS实现选中当前菜单后高亮显示的导航条效果

本文实例讲述了JS实现选中当前菜单后高亮显示的导航条效果.分享给大家供大家参考.具体如下: 这里演示选中当前菜单后,该菜单高亮显示,也就是说在不改变菜单CSS代码的情况下,用JavaScript去控制菜单的背景,如果该菜单项被点击后,将赋予它一个与众不同的背景颜色或背景图像,这样可以清淅的指引用户下在浏览的网站栏目,本菜单不需要动态语言的加入,简单方便而且效果好. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-cho-nav-gl-sho
JS组件Bootstrap导航条使用方法详解

导航条是在您的应用或网站中作为导航标头的响应式元组件. 1.默认的导航条导航条在移动设备上可以折叠(并且可开可关),且在可用的视口宽度增加时变为水平展开模式定制折叠模式与水平模式的阈值根据你所放在导航条上的内容的长度,也许你需要调整导航条进入折叠模式和水平模式的阈值.通过改变@grid-float-breakpoint变量的值或加入您自己的媒体查询CSS代码均可实现你的需求. 第一步: 最外面的容器nav标签,并添加nav-bar样式类,表示这里面属于导航条 <nav class="
CSS3+Js实现响应式导航条

今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大量的篇幅介绍了,主要看一下这个导航条该怎么做. 另外需要提到的是,ie6-ie8是不支持CSS3的Media Query的,因此对于ie6-ie8我们需要特殊处理,就让他们保持默认样式,这对于布局及样式上都要考虑到这一点. 首先看一下布局这一块,html代码如下: 复制代码代码如下: <div c
javascript实现的鼠标悬停时动态翻滚的导航条

动态翻滚的导航条 .clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden}.clear{display:inline-block}.clear{display:block} div#nav{height:32px; background:url(http://files.jb51.net/demoimg/200911/YL29.jpg) repeat-x} div#nav ul{
js实现横向拖拽导航条功能

效果如下: 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>div横向拖拽排序</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <style type="text/cs
使用Javascript开发sliding-nav带滑动条效果的导航插件

本文介绍如何使用纯Javascript来开发一款简单的JS插件,本插件可以实现鼠标悬停在导航上时,下方的滑动条自动从当前菜单滑动到所选菜单当中去. 本项目的源代码寄宿于GitHub,记得点小星星哦: https://github.com/dosboy0716/sliding-nav 一.前言效果如下图: 二.使用方法本插件只需要如下的三步,就可以在您的项目中使用: 1.在</body>标记结束前,引用sliding-nav.js文件 2.在需要滑动条的菜单容器上加类名 sliding-na
jQuery实现带滑动条的菜单效果代码

本文实例讲述了jQuery实现带滑动条的菜单效果代码.分享给大家供大家参考.具体如下: 这是一款带滑动条的jQuery滑动菜单,菜单下边有一个蓝色的线条,鼠标移上哪里它就跟向哪里,可以指引当前菜单的位置,另外,动画效果是基于jquery的animate(),对此有兴趣学习的正好可参考下代码. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-move-buttom-line-style-codes/ 具体代码如下: <!DOCTYPE
jquery-file-upload 文件上传带进度条效果

jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传.取消.删除,上传前缩略图预览.列表显示图片大小,支持上传进度条显示:支持各种动态语言开发的服务器端. 效果图如下所示: html 部分 <div style="line-height:34px;margin-top:20px;"> <label style="float: left;font-size:14px">上传文件:</label> &l
基于fileUpload文件上传带进度条效果的实例(必看)

文件上传过程中,如果我们能看到进度条会更好,实现思路是服务器端用监听器实时监听进度并存入session,客户端异步请求服务器端获得上传进度,并进行效果渲染. 效果图: 服务器端servlet: public class UploadServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException
Android SeekBar实现滑动条效果

本文实例为大家分享了Android SeekBar实现滑动条效果的具体代码,供大家参考,具体内容如下 SeekBar是ProgressBar的一个子类,下面我们用一个可以改变并显示当前进度的拖动条例子来演示一下它的使用: 1.main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/
iOS实现双向滑动条效果

最近做项目,碰到一种双向滑动条,自己实现了一下,随便写一下思路,方便以后开发,避免重复写代码,以后粘贴就行了.封装了一下,代码如下: #import <UIKit/UIKit.h> typedef NSString* (^HLDoubleSlideViewSwitchStrBock)(CGFloat count); @interface HLDoubleSlideView : UIView @property(nonatomic,assign)CGFloat maxValue; @proper
iOS实现垂直滑动条效果

我们知道在 iOS 开发中,有一个控件经常用到,那就是滑动条(UISlider),可以满足我们滑动取值的需求.但是现在有一个需求,就是需要一个垂直的滑动条,而 UISlider 并不能设置为垂直滑动,所以我们就需要自己定义一个控件来实现垂直的要求. 整理之后,我们可以得出需要以下的基本需求: 可以上下滑动按钮可以自定义图片可以设置最小值可以设置最大值可以在滑动过程中获取实时的值可以在滑动结束时获取到最终的值可以设置进度背景色我们的实现原理就是实现一个自定义的 UIView,然后在上
高仿网易新闻顶部滑动条效果实现代码

这个是网易新闻的主界面,我们知道底部可以用tabhost实现,这个很容易,我们在其他软件中也会经常用到. 至于顶部的滑动条,个人感觉还是比较漂亮的所以今天也模仿了下,网易顶部滑动条的效果,由于初次模仿这种效果,可能有些地方还不够完美,不过基本已经实现,希望大家能够喜欢. 废话不多说,下面上代码: 首先是布局layout下的main.xml 复制代码代码如下: <?xmlversion="1.0"encoding="utf-8"?> <Relati
iOS Segment带滑动条切换效果

本文实例为大家分享了vue + element ui实现锚点定位的具体代码,供大家参考,具体内容如下 #import "ViewController.h" @interface ViewController () @property (nonatomic,strong) NSArray *arrTitle; @property (nonatomic,strong) UIView *flyBar; @end @implementation ViewController
PHP+Ajax无刷新带进度条图片上传示例

项目需求:1.PHP+Ajax无刷新带进度条图片上传,2.带进度条.所需插件:jquery.js,jquery.form.js. 最近在做一个手机web项目,需要用到Ajax上传功图片能,项目要求PHP无刷新上传图片,并且要带进度条,下面就来讲一下我的实现方法,先看效果图本示例需要使用的是jquery.js,jquery.form.js,demo里面包含有,你可以在文章下方进行下载. 第一步,建立前端页面index.html 此段是前端展示内容,这里需要说明的是由于input:file标签显示