Use Javascript to develop sliding-nav navigation plug-in with sliding bar effect

This article introduces how to use pure Javascript to develop a simple JS plug-in. This plug-in can make the slider below automatically slide from the current menu to the selected menu when the mouse hovers over the navigation.

The source code of this project is hosted on GitHub, please click the stars:

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

1. Introduction

The effect is as follows:

2. Usage

This plugin only requires the following three steps to use it in your project:

1. Before the end of the </body> tag, reference the sliding-nav.js file

2. Add the class name sliding-nav to the menu container that needs a slider, and the current item uses the class name: active

3. Use attributes to determine the appearance: sn-color="color" sn-radius="roundness" sn-height="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">Menu Item 1</li>
 <li>Menu Item 2</li>
 <li>Menu Item 3</li>
<ul>

3. Development Process

1. Model Example

Navigation menus generally use the hierarchical structure shown above. The outer container uses the <ul> tag, and the menu items use the <li> tag. If you want to display a small yellow horizontal bar, how to position it is important.

After analysis, although the small horizontal bar is visually located within the UL, in order not to destroy the original navigation style, the small yellow bar must use absolute positioning, and its initial position must be the same as the ul tag.

Therefore, we insert the small horizontal bar in front of the <ul> tag, as shown in the small gray dot above, which is the initial position of the small horizontal bar, that is, (left=0, top=0).

So how do we make the bar appear to be directly below the menu items?

• Assign the top property of the small bar to the height of the menu item (i.e. the offsetHeight property).
• Assign the left property of the small bar to the left margin of the menu item (i.e. the offsetLeft property)

To implement the above functions, you can use the following code:

function init() {
 
 var navs = document.getElementsByClassName('sliding-nav');
 
 for (var i = 0; i < navs.length; i++) {
 
 
  //Create a DIV to align vertically with the current navigation 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"
 
  //Find the current submenu item. If it has the class name active or selected, it is considered the current item. If not, use the first item 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]);
 
  //Unfinished, insert code below to bind events}
 
}

The above code constructs the initialization function init(), which:

Find all tags with the class name sliding-nav, and according to the above method, insert a div tag in front to act as an "indicator bar", and find the "active" menu item. After finding it, position the "indicator bar" through the various properties of this menu item.

2. Events and animations

We set the transition property of the "indicator bar" div tag to 0.5s, so we just need to set the div directly in the event as follows:

• The left attribute can realize the movement of the "indicator bar"
• The width attribute can set the width of the "indicator bar"

So you can insert the following code at the end of the above code to implement events and animations:

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";

   });

   //Restore default value when moving out of navigationhover(navs[i], null, function(e, elem) {
    indi.style.width = selected.offsetWidth + "px";
    indi.style.left = selected.offsetLeft + "px";
   });

  }

The code uses a custom function hover, which is similar to implementing a hover event. JS natively only has mouseover and mouseout events.

The function is to bind the mouse-in and mouse-out events to the DOM elements. For the specific implementation process, you can refer to the author's original code.

4. All original codes

All the original codes implemented in this article are as follows. I hope readers can make more optimized suggestions so that we can create a more beautiful front-end experience together.

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";

   });

   //Restore default value when moving out of navigationhover(navs[i], null, function(e, elem) {
    indi.style.width = selected.offsetWidth + "px";
    indi.style.left = selected.offsetLeft + "px";
   });

  }

This is the end of this article about using Javascript to develop a sliding-nav navigation plug-in with a slider effect. For more related js development of sliding-nav navigation bar plug-in content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!