Segmented Control
How do I make an segmented control?
Based off of Luke Wroblewski's tweet: http://bit.ly/1iIUH3A. What is a segmented control? How do you make a segmented control? This script and codes were developed by Travis Arnold on 12 September 2022, Monday.
Segmented Control - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Segmented Control</title> <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:300);
body { background: #33B0E3; margin: 0; padding: 0;
}
ul { position: relative; margin: 125px auto 0; padding: 0; text-align: center;
}
li { display: inline-block; list-style: none; border: 2px solid #0F90C0; cursor: pointer;
}
li:nth-of-type(1) { border-radius: 3px 0 0 3px; border-right: none;
}
li:nth-of-type(3) { border-radius: 0 3px 3px 0; border-left: none;
}
button { position: relative; z-index: 1; text-transform: uppercase; margin: 0; padding: 8px 12px; font-family: 'Open Sans', sans-serif; letter-spacing: 1px; border: none; background: transparent; color: #fff; cursor: pointer;
}
button:focus { outline: none;
}
.highlight { position: absolute; top: 0; display: block; width: 1px; height: 30px; background: #0F90C0; transform-origin: 0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <ul> <li><button>Following</button></li><li><button>Top</button></li><li><button>Recent</button></li><li class="highlight"></li>
</ul> <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:300);
body { background: #33B0E3; margin: 0; padding: 0;
}
ul { position: relative; margin: 125px auto 0; padding: 0; text-align: center;
}
li { display: inline-block; list-style: none; border: 2px solid #0F90C0; cursor: pointer;
}
li:nth-of-type(1) { border-radius: 3px 0 0 3px; border-right: none;
}
li:nth-of-type(3) { border-radius: 0 3px 3px 0; border-left: none;
}
button { position: relative; z-index: 1; text-transform: uppercase; margin: 0; padding: 8px 12px; font-family: 'Open Sans', sans-serif; letter-spacing: 1px; border: none; background: transparent; color: #fff; cursor: pointer;
}
button:focus { outline: none;
}
.highlight { position: absolute; top: 0; display: block; width: 1px; height: 30px; background: #0F90C0; transform-origin: 0;
}
Segmented Control - Script Codes JS Codes
////////////////////////////////
// Highlight Buttons
var $highlight = $('.highlight');
function translate(obj) { var $this = obj.addClass('active'), width = $this.width(), margin = $this.outerWidth(true) - $this.outerWidth(), position = $this.offset().left + margin/2; $highlight.css({ width: parseInt(width) + 'px', transform: 'translate(' + parseInt(position) + 'px' + ')' });
}
// add transition after page load
$(window).on('load resize', function() { // wait a little bit to add transition so we don't see on page load setTimeout(function() { $highlight.css({ transition: 'all .5s' }); }, 100); // load highlight on active control translate($('li:first-child'));
});
// switch to active control on click
$('li:not(.highlight)').on('click', function() { $('li').removeClass('active'); translate($(this));
});
Developer | Travis Arnold |
Username | souporserious |
Uploaded | September 12, 2022 |
Rating | 4.5 |
Size | 3,497 Kb |
Views | 28,336 |
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!
Name | Size |
Expose - a responsive jQuery modal plugin | 3,754 Kb |
Trix Custom Toolbar | 3,356 Kb |
Simplistic WYSIWYG Editor | 3,740 Kb |
Credit Card CSS3 Animation | 5,511 Kb |
Instagram Style HTML5 Video Player | 3,902 Kb |
React Media Player Demo | 3,798 Kb |
Offset Animation Mixin | 3,382 Kb |
React Checkbox MultiSelect | 6,915 Kb |
React Measure Demo | 3,718 Kb |
React Paper Ripple | 5,312 Kb |
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!
Name | Username | Size |
Next Word Predictor | Rfalor | 2,776 Kb |
Slider for stackoverflow | KKOKU | 3,222 Kb |
Tab Menus | Zephyr | 3,180 Kb |
Social Profiles | Lachlanjc | 1,939 Kb |
JQuery AJAX reddit Exercise | Btholt | 1,777 Kb |
Hexagons | Ashmind | 4,360 Kb |
Hoi hoi | JohnTheCat | 7,248 Kb |
Sass Get Function | Lukewatts | 2,155 Kb |
Mega Menu by Joni | Asakasinsky | 3,171 Kb |
Angular Sandbox | Alexgurrola | 1,616 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!