How we can create a segmented control interaction using JavaScript? Solution: See this Segmented Control With JavaScript and CSS, List Based Segmented Control.
Previously I have shared pure CSS segmented control, but this program is a little more creative and based on JavaScript and CSS. Basically, segmented control is a linear set of two or more options. It looks like a button group, but it can be created using div, list, span, etc and exactly it is not a button group. The segmented control has multiple options but it is an active effect that can be a solid color, gradient or background. It will slide and move to the selected item.
Today you will learn to create a list based segmented control. Basically, there is a rounded-corner bar with 3 options and by default, the first one is selected. The selected item has a solid white color background, and when you will click and choose another then the solid color background with shift and slide to that. The slide and shift feature has a cool animation to creating a good interaction design.
So, Today I am sharing a Segmented Control With JavaScript and CSS. There I have used HTML to creating the layout, CSS for styling the elements and functions are based on JavaScript. There I have used the only JavaScript, not use any JS library like jquery or something. You can use this program on your website after link placement.
If you are thinking now how this program actually is, then see the preview given below.
Preview Of List Based Segment Control
See this video preview to getting an idea of how this segment control looks like.
Now you can see this program visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
Segmented Control With JavaScript and CSS Source Code
Before sharing source code, let’s talk about it. First I have created the main div with an ID name container and placed a list inside it. Inside the list, I have placed 3 texts as list items and 2 divs for the active and slide effect. Also in the HTML file, I have linked other files like CSS, JavaScript, and jQuery CDN.
Now using CSS I have placed all the elements in the right place, as you can see in the preview. With CSS first I gave basic values like width, height, position, etc to the elements. After that, I gave color values and the layout based on the grid display. There I have used calc( ) command to calculated and pass exact values.
JavaScript handling the active and slide feature in this program. First JS fetched elements using document.querySelector command and stored in conts. There I have used JS if{} else{} statements and declared the conditions, and used let command for functioning. Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First file for HTML, second for CSS, and the third file for JavaScript.
Follow the steps to creating this program without any trouble.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Segmented Control Interaction | Webdevtrick.com</title> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css'> <link rel="stylesheet" href="style.css"> </head> <body> <div id="container"> <ul> <li>About</li> <li>Contact</li> <li>Pricing</li> <div class="focus first"></div> <div class="focus second"></div> </ul> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.1.1/gsap.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
* { box-sizing: border-box; margin: 0; padding: 0; } body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background: #ff3636; overflow: hidden; } #container { width: 350px; height: 350px; display: grid; place-items: center; } #container ul { position: relative; width: 350px; height: 50px; display: grid; grid-template-columns: repeat(3, 1fr); border-radius: 35px; background: rgba(255, 255, 255, 0.65); box-shadow: 0 12.5px 10px rgba(0, 0, 0, 0.08), 0 100px 80px rgba(0, 0, 0, 0.03); overflow: hidden; } #container ul li { list-style: none; display: grid; place-items: center; font-family: "montserrat"; color: #ff3636; z-index: 10; cursor: pointer; } #container ul .focus { position: absolute; left: 0; top: 0; width: calc(100% / 3); height: 100%; border-radius: 35px; background: #fff; box-shadow: 0 12.5px 10px rgba(0, 0, 0, 0.015), 0 100px 80px rgba(0, 0, 0, 0.03); } #container ul .focus.second { left: calc(-100% / 3); } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
console.clear(); const liContainer = document.querySelector("ul"); const liEls = [...document.querySelectorAll("ul li")]; const slideEl_1 = document.querySelector(".focus.first"); const slideEl_2 = document.querySelector(".focus.second"); gsap.defaults({ ease: "ease.inOut", }); let tl = gsap.timeline(); let liRect = liContainer.getBoundingClientRect(); let slideEl_1_DefaultWidth = slideEl_1.getBoundingClientRect().width; let slideEl_1_DefaultLeft = slideEl_1.getBoundingClientRect().left; let slideEl_2_DefaultLeft = slideEl_2.getBoundingClientRect().left; let startPosIndex = 1; let reachedEnd = false; let activeIndex = startPosIndex; let animationDuration = 0.2; liEls.forEach((el, index) => { let elRect = el.getBoundingClientRect(); el.addEventListener("mousedown", () => { if (reachedEnd && index + 1 == startPosIndex) { tl.to(slideEl_1, animationDuration, { left: `${liRect.width}px` }); tl.to( slideEl_2, animationDuration, { left: `${elRect.left - liRect.left}px` }, `-=${animationDuration}` ); tl.set( slideEl_1, { left: `${slideEl_1_DefaultLeft - liRect.left}px` }, `+=${animationDuration}` ); tl.set( slideEl_2, { left: `${slideEl_2_DefaultLeft - liRect.left}px` }, `+=${animationDuration}` ); } let timesWidth = index + 1 - activeIndex + 1 <= 0 ? 1 : index + 1 - activeIndex + 1; activeIndex = index + 1; tl.to(slideEl_1, animationDuration, { width: `${timesWidth * slideEl_1_DefaultWidth}px` }); if (index + 1 != startPosIndex || reachedEnd == false) { tl.to(slideEl_1, animationDuration, { left: `${elRect.left - liRect.left}px`, width: `${slideEl_1_DefaultWidth}px`, }); } if (index + 1 == liEls.length) { reachedEnd = true; } else { reachedEnd = false; } }); }); |
That’s It. Now you have successfully created Segmented Control With JavaScript and CSS, List Based Segmented Control. If you have any doubt or question then comment down below.
Thanks For Visiting, Keep Visiting.
Bhai…Website ka template banao na simple ek damn…CSS aur HTML ko use kar ke..Us me navigation bar hona chahiye bas banaoge…??
ok, sure. you can check out some web templates previously I have shared – https://webdevtrick.com/tag/web-template/