Segmented control

Developer
Mitch Pruitt
Size
3,759 Kb
Views
22,264
  1. Segmented control Previews
  2. Segmented control HTML Codes
  3. Segmented control CSS Codes
  4. Segmented control JS Codes

How do I make an segmented control?

Just like on the iPhone but not!. What is a segmented control? How do you make a segmented control? This script and codes were developed by Mitch Pruitt on 08 November 2022, Tuesday.

Segmented control Previews
IQ Test

Segmented control - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Segmented control</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
.container { width: 30rem; height: 45rem; margin: 6rem auto; padding: 0 2rem 2rem; border: 1px solid; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 1.5rem; position: relative; overflow: hidden;
}
.article-container { display: flex; position: absolute; transition: .5s all ease-in-out;
}
article { width: 30rem; flex-shrink: 0; margin-right: 4rem;
}
article:last-child { margin-right: 0;
}
.text { line-height: 2rem;
}
.numeral { margin: auto auto 2rem; width: 8rem; height: 8rem; font-size: 5rem; text-align: center; line-height: 8rem; border: 1px dotted black; border-radius: 50%;
}
.control { margin: auto; text-align: center; padding: 2rem 0 3rem;
}
input[type="radio"] { margin: 0; appearance: none; width: 3rem; height: 2rem; border: 1px solid black; border-radius: .25rem 0 0 .25rem; transition: .25s all ease-in-out;
}
input[type="radio"]:last-child { border-left: 0; border-radius: 0 .25rem .25rem 0;
}
input[type="radio"]:checked { background: black;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <section class="container"> <form class="control"> <input type="radio" name="view" value="left"><input type="radio" name="view" value="right"> </form> <div class="article-container"> <article class="left"> <p class="numeral">1</p> <p class="text">Locavore hashtag synth, plaid gluten-free direct trade tousled. Twee church-key meggings, kogi High Life cornhole craft beer gastropub locavore paleo Truffaut. Post-ironic pug photo booth, cornhole chillwave beard Wes Anderson fashion axe leggings McSweeney's paleo meh Thundercats. Fingerstache heirloom jean shorts, occupy letterpress messenger bag keffiyeh Marfa pickled readymade bitters farm-to-table ennui. American Apparel pork belly iPhone, Vice mustache heirloom tote bag jean shorts four loko lomo.</p> </article> <article class="right"> <p class="numeral">2</p> <p class="text">Locavore hashtag synth, plaid gluten-free direct trade tousled. Twee church-key meggings, kogi High Life cornhole craft beer gastropub locavore paleo Truffaut. Post-ironic pug photo booth, cornhole chillwave beard Wes Anderson fashion axe leggings McSweeney's paleo meh Thundercats. Fingerstache heirloom jean shorts, occupy letterpress messenger bag keffiyeh Marfa pickled readymade bitters farm-to-table ennui.</p> </article> </div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Segmented control - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
.container { width: 30rem; height: 45rem; margin: 6rem auto; padding: 0 2rem 2rem; border: 1px solid; font-family: 'Open Sans', sans-serif; font-weight: 300; font-size: 1.5rem; position: relative; overflow: hidden;
}
.article-container { display: flex; position: absolute; transition: .5s all ease-in-out;
}
article { width: 30rem; flex-shrink: 0; margin-right: 4rem;
}
article:last-child { margin-right: 0;
}
.text { line-height: 2rem;
}
.numeral { margin: auto auto 2rem; width: 8rem; height: 8rem; font-size: 5rem; text-align: center; line-height: 8rem; border: 1px dotted black; border-radius: 50%;
}
.control { margin: auto; text-align: center; padding: 2rem 0 3rem;
}
input[type="radio"] { margin: 0; appearance: none; width: 3rem; height: 2rem; border: 1px solid black; border-radius: .25rem 0 0 .25rem; transition: .25s all ease-in-out;
}
input[type="radio"]:last-child { border-left: 0; border-radius: 0 .25rem .25rem 0;
}
input[type="radio"]:checked { background: black;
}

Segmented control - Script Codes JS Codes

$(document).ready(function() { $("input:radio[name='view']").click(function() { var value = $(this).val(); if (value == "right") { $(".article-container").css("left","-32rem"); } else { $(".article-container").css("left","2rem"); } });
});
Segmented control - Script Codes
Segmented control - Script Codes
Home Page Home
Developer Mitch Pruitt
Username mitchdot
Uploaded November 08, 2022
Rating 3
Size 3,759 Kb
Views 22,264
Do you need developer help for Segmented control?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mitch Pruitt (mitchdot) Script Codes
Name
A Pen by Mitch Pruitt
Sooper cool article header image
Off-screen navigation
Image caption overlay
Animated camera focus ring
Image header overlay
ASCII triangle image overlay
Zoomy image rollover
Sample project gallery
Flexbox quote box
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!