Five minutes to make you a cute navigation slider!

This is the fourteenth day of my participation in Gwen Challenge

Hey! Hello everyone, today to take you to do a lovely 😊 slide navigation bar effect, this demo is very basic, but the use of the scene is very wide oh! As the front end of baymax, today hand in hand to teach you step by step to achieve it!

Implementation effect

Look! This slide effect is very interesting! This sliding effect I believe you must have thought about it!

The implementation process

1. Prepare

Although this control is small, not many functions, but we still need to analyze its structure, and the implementation of the function

Move the mouse over the corresponding list item and the line at the bottom will slide to the corresponding position
Click the corresponding list item and the background slider switches to the selected list item

<div class="slipNav">
    <nav>
        <a href="javascript:;" class="selected">Home page</a>
        <a href="javascript:;">my</a>
        <a href="javascript:;">contact</a>
        <a href="javascript:;">To subscribe to</a>
        <a href="javascript:;">management</a>
        <a href="javascript:;">Photo album</a>
        <! -- Bottom line -->
        <div class="line"></div>
        <! -- Background slider -->
        <div class="bgc"></div>
    </nav>
</div>
Copy the code

From the simple analysis above, we can write out the HTML structure, adding a line and slider 💞 to the basic list items

2. Use the CSS to modify the navigation bar

This part is very simple did not involve what rare attribute, believe clever lovely you certainly handy 💕

First of all, let’s make some adjustments to the navigation bar, add a background color to the navigation bar, at the same time, add a certain rounded corner, let the navigation bar looks round toot 😊, because the internal label behind the use of floating and positioning, so here need to clear floating oh!

.slipNav nav {
    position: relative;
    background-color: white;
    border-radius: 50px;
}

.slipNav nav::after {
    content: ' ';
    display: block;
    clear: both;
}
Copy the code

Tips: Remove floating three-piece sets to remember oh!

Let’s beautify each list item. Adjust font size and line height for optimal text 💦!

.slipNav a {
    position: relative;
    float: left;
    width: 150px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
    color: # 000;
    z-index: 1;
}
Copy the code

Let’s work on the bottom line and the background slider. Position it absolutely below the default selected text. The same goes for the background slider!

.line {
    position: absolute;
    top: 50px;
    left: 35px;
    /* The length and width of the line */
    height: 3px;
    width: 80px;
    background-color: #54a0ff;
    transition: all .3s;
}

.bgc {
    position: absolute;
    top: 0px;
    left: 25px;
    height: 50px;
    width: 100px;
    border-radius: 50px;
    background-color: rgb(84.126.233);
    transition: all .3s;
}
Copy the code

3. Use JS to achieve the function of line slider

During the beautify process above, we used absolute positioning for the lines and background slider, in order to control their position by controlling the left value below! Let’s implement it!

Implementation function: mouse into the corresponding list items, the bottom line will slide to the corresponding position

Since there are too many items in the navigation bar, it will be troublesome to find the corresponding element index later, so we first add a custom attribute data-index to all the list items to represent their index

let slipAll = document.querySelectorAll('.slipNav nav a');
// Add index to all a tags
for (let i = 0; i < slipAll.length; i++) {
    slipAll[i].setAttribute('data-index', i)
}
Copy the code

Next we calculate the left value of the line by listening to where the mouse moves in,

This is done through the event delegate, which calculates the left value by getting the index attribute of the trigger event. When the mouse moves out of the navigation bar, the line needs to return to the position of the original selected element because no other items are selected

// Mouse over the bottom line to follow
slipNav.addEventListener('mouseover'.function (e) {
    let target = e.target
    let len = 150 * target.dataset.index + 35;// Calculate the current left value
    line.style.left = len + 'px';
})
// The bottom line returns to its original position when the mouse moves out
slipNav.addEventListener('mouseleave'.function (e) {
    let selected = document.querySelector('.slipNav .selected')// The previously selected element
    let len = 150 * selected.dataset.index + 35 // The line returns to the position of the selected element
    line.style.left = len + 'px'
})
Copy the code

Note: Because of the transition properties in the CSS code, there is no mutation when changing the left value, but a sliding process.

Implementation function: Click the corresponding list item, the background slider will switch to the selected list item

When we mouse click on the list item, we need to select the current element, and the background block needs to be positioned in the current position! Same implementation method

// When the mouse clicks, the slider of the background color slides to the corresponding position
slipNav.addEventListener('click'.function (e) {
    let target = e.target;
    let bgc = document.querySelector('.bgc')
    // Exclusivity
    for (let i = 0; i < slipAll.length; i++) {
        slipAll[i].classList.remove('selected')
    }
    target.classList.add('selected');// Change the color by adding the class name
    let len = 150 * target.dataset.index + 25 // Calculate the background slider left value
    bgc.style.left = len + 'px';
})
Copy the code

The complete code

Need code can be directly copied oh!

<! DOCTYPEhtml>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: rgb(221.230.245);
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        .slipNav {
            width: 920px;
            margin: 100px auto;
        }

        .slipNav a {
            position: relative;
            float: left;
            width: 150px;
            line-height: 50px;
            text-align: center;
            font-size: 18px;
            color: # 000;
            z-index: 1;
        }

        .slipNav nav {
            position: relative;
            background-color: white;
            border-radius: 50px;
        }

        .slipNav nav::after {
            content: ' ';
            display: block;
            clear: both;
        }

        .slipNav nav :hover {
            color: #54a0ff;
        }

        .selected {
            color: white ! important;
        }

        .line {
            position: absolute;
            top: 50px;
            left: 35px;
            /* The length and width of the line */
            height: 3px;
            width: 80px;
            background-color: #54a0ff;
            transition: all .3s;
        }

        .bgc {
            position: absolute;
            top: 0px;
            left: 25px;
            /* The length and width of the line */
            height: 50px;
            width: 100px;
            border-radius: 50px;
            background-color: rgb(84.126.233);
            transition: all .3s;
        }
    </style>
</head>

<body>
    <div class="slipNav">
        <nav>
            <a href="javascript:;" class="selected">Home page</a>
            <a href="javascript:;">my</a>
            <a href="javascript:;">contact</a>
            <a href="javascript:;">To subscribe to</a>
            <a href="javascript:;">management</a>
            <a href="javascript:;">Photo album</a>
            <! -- Bottom line -->
            <div class="line"></div>
            <! -- Background slider -->
            <div class="bgc"></div>
        </nav>
    </div>
    <script>
        let line = document.querySelector('.line');
        let slipNav = document.querySelector('.slipNav nav');
        let slipAll = document.querySelectorAll('.slipNav nav a');
        // Add index to all a tags
        for (let i = 0; i < slipAll.length; i++) {
            slipAll[i].setAttribute('data-index', i)
        }
        // Mouse over the bottom line to follow
        slipNav.addEventListener('mouseover'.function (e) {
            let target = e.target
            let len = 150 * target.dataset.index + 35;// Calculate the current left value
            line.style.left = len + 'px';
        })
        // The bottom line returns to its original position when the mouse moves out
        slipNav.addEventListener('mouseleave'.function (e) {
            let selected = document.querySelector('.slipNav .selected')
            let len = 150 * selected.dataset.index + 35 // The line returns to the position of the selected element
            line.style.left = len + 'px'
        })
        // When the mouse clicks, the slider of the background color slides to the corresponding position
        slipNav.addEventListener('click'.function (e) {
            let target = e.target;
            let bgc = document.querySelector('.bgc')
            // Exclusivity
            for (let i = 0; i < slipAll.length; i++) {
                slipAll[i].classList.remove('selected')
            }
            target.classList.add('selected');// Change the color by adding the class name
            let len = 150 * target.dataset.index + 25 // Calculate the background slider left value
            bgc.style.left = len + 'px';
        })
    </script>
</body>

</html>
Copy the code

Oh! Done! 💛 is the demo above the complete code oh, interested in you can try oh! I believe there will be a harvest oh!

Five minutes to make you a cute navigation slider!

Implementation effect

The implementation process

1. Prepare

2. Use the CSS to modify the navigation bar

3. Use JS to achieve the function of line slider

The complete code

Related Posts

Installation of project development environment under WINDOWS10 operating system

CSS syntax rules and layout in one go

20 popular home page layouts, which do you prefer?