Develop Reference

Making a slider with half-values

I have a slider that works well, but it only allows for whole number values. I need one of the sliders on the page to allow half-step increments (eg., 1, 1.5, 2, 2.5, 3). Is there an easy way to do this?
Here is the CSS:
.slider, .slider2 {
-webkit-appearance: none;
width: 100%;
height: 10px;
border-radius: 5px;
background: #999;
outline: none;
opacity: 1;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover, .slider2:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb, .slider2::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 35px;
height: 35px;
border-radius: 50%;
background: #fff;
cursor: pointer;
}
.slider::-moz-range-thumb, .slider2::-moz-range-thumb {
width: 35px;
height: 35px;
border-radius: 50%;
background: #fff;
cursor: pointer;
}
Here is the HTML:
<input name="newbelief" type="range" min="1" max="9" value="" class="slider2" id="newbelief">
Here is the javascript:
<script>
var slider = document.getElementById("oldbelief");
var output = document.getElementById("belief_value");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
var slider2 = document.getElementById("newbelief");
var output2 = document.getElementById("belief2_value");
output2.innerHTML = slider2.value;
slider2.oninput = function() {
output2.innerHTML = this.value;
}
</script>

I needed to add a "step" value to the form. So it should look like this:
<input name="newbelief" type="range" min="1" max="9" step="0.5" value="" class="slider2" id="newbelief">

About Javascript function - weather calculator -

I am making a weather calculator by using JS range slider in webpage. I am testing the add up function. The problem is at line 122,
the code:
outRest.innerHTML = add(outT, outH);
When I move the humidity bar, the add up result will not update. However, if I use the followimg code, it hasn't problem:
outRest.innerHTML = parseInt(outT) + parseInt(outH);
var slider = document.getElementById("TEMP");
var outputTemp = document.getElementById("tempC");
var outputTemp2 = document.getElementById("tempF");
var slider2 = document.getElementById("HUMD");
var outputHumd = document.getElementById("humd");
var outRest = document.getElementById("test");
var outT = slider.value;
var outH = slider2.value;
var add = parseInt(outT) + parseInt(outH);
outRest.innerHTML = add;
outputTemp.innerHTML = slider.value;
outputTemp2.innerHTML = roundUp(CF(slider.value), 2);
slider.oninput = function() {
outputTemp.innerHTML = this.value;
outputTemp2.innerHTML = roundUp(CF(this.value), 2);
outT = this.value;
outRest.innerHTML = parseInt(outT) + parseInt(outH);
}
outputHumd.innerHTML = slider2.value;
slider2.oninput = function() {
outputHumd.innerHTML = this.value;
outH = this.value;
outRest.innerHTML = add(outT, outH);
}
function CF(CF) {
rest = (CF * (9 / 5)) + 32
return rest
}
function roundUp(num, precision) {
precision = Math.pow(10, precision)
return Math.ceil(num * precision) / precision
}
function add(T, H) {
rest = parseInt(T) + parseInt(H)
return rest
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
</style><style>.slider2 {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider2::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider2::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
<h1>Calculator</h1>
<p>Drag the slider to display the current value.</p>
<div class="slidecontainer">
<input type="range" min="0" max="100" value="50" class="slider" id="TEMP">
<p>Temperature: <span id="tempC"></span> ℃ (<span id="tempF"></span> °F)</p>
</div>
<div class="slidecontainer">
<input type="range" min="0" max="100" value="50" class="slider2" id="HUMD">
<p>Humidity: <span id="humd"></span> %</p>
</div>
<div>
<p>Test: <span id="test"></span> %</p>
</div>

You are trying use add as a function,
outRest.innerHTML = add(outT, outH);
however it's a variable (You can remove this code).
var add = parseInt(outT) + parseInt(outH);
I can see that you have declared an add function already:
function add(T, H) {
rest = parseInt(T) + parseInt(H)
return rest
}
You can simply return the value if you have no other usage of that variable
function CF(CF) {
return (CF * (9 / 5)) + 32
}
function add(T, H) {
return parseInt(T) + parseInt(H);
}
Result:
var slider = document.getElementById("TEMP");
var outputTemp = document.getElementById("tempC");
var outputTemp2 = document.getElementById("tempF");
var slider2 = document.getElementById("HUMD");
var outputHumd = document.getElementById("humd");
var outRest = document.getElementById("test");
var outT = slider.value;
var outH = slider2.value;
//Remove this line
//var add = parseInt(outT) + parseInt(outH);
outRest.innerHTML = add;
outputTemp.innerHTML = slider.value;
outputTemp2.innerHTML = roundUp(CF(slider.value), 2);
slider.oninput = function() {
outputTemp.innerHTML = this.value;
outputTemp2.innerHTML = roundUp(CF(this.value), 2);
outT = this.value;
outRest.innerHTML = parseInt(outT) + parseInt(outH);
}
outputHumd.innerHTML = slider2.value;
slider2.oninput = function() {
outputHumd.innerHTML = this.value;
outH = this.value;
outRest.innerHTML = add(outT, outH);
}
function CF(CF) {
return (CF * (9 / 5)) + 32
}
function roundUp(num, precision) {
precision = Math.pow(10, precision)
return Math.ceil(num * precision) / precision
}
function add(T, H) {
return parseInt(T) + parseInt(H)
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
</style><style>.slider2 {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider2::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider2::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
<h1>Calculator</h1>
<p>Drag the slider to display the current value.</p>
<div class="slidecontainer">
<input type="range" min="0" max="100" value="50" class="slider" id="TEMP">
<p>Temperature: <span id="tempC"></span> ℃ (<span id="tempF"></span> °F)</p>
</div>
<div class="slidecontainer">
<input type="range" min="0" max="100" value="50" class="slider2" id="HUMD">
<p>Humidity: <span id="humd"></span> %</p>
</div>
<div>
<p>Test: <span id="test"></span> %</p>
</div>

just remove this line
var add = parseInt(outT) + parseInt(outH);
as you can see, you have this error because javascript is expecting that you are using 'add' as a function not a variable it's because you are passing two arguments, the 'outT' and 'outH' variables.
TypeError: add is not a function

You can also directly get numeric value ( for type="number" / type="range" ...)
with inputElement.valueAsNumber
sample code
const calculForm = document.getElementById('calcul-form')
, CF = cf => (cf *9 /5 +32).toFixed(2)
;
function setTempHum()
{
let temp = calculForm.TEMP.valueAsNumber
, humd = calculForm.HUMD.valueAsNumber
;
calculForm.valTEMP.value = `${temp} ℃ -- ${CF(temp)} °F`
calculForm.valHUMD.value = `${humd} %`
calculForm.test.value = temp + humd
}
setTempHum() // first time
calculForm.oninput = setTempHum
fieldset { width: 80%; margin: .5em; padding: 1em;}
input[type=range] {
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
input[type=range]::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
<form id="calcul-form" onsubmit="return false">
<fieldset>
<input type="range" min="0" max="100" value="50" name="TEMP">
<p>Temperature : <output name="valTEMP"></output></p>
</fieldset>
<fieldset>
<input type="range" min="0" max="100" value="50" name="HUMD">
<p>Humidity : <output name="valHUMD"></output></p>
</fieldset>
<fieldset>
<p>Test : <output name="test"></output></p>
</fieldset>
</form>

How to change the input slider thumb colour depending on value?

I'm making a site that includes a range input slider. I would like the slider thumb to change colour according to the value of the slider.
For example, if the value was 0, the thumb colour would be rgb(255, 0, 0);, if it were 100, the colour would be rgb(0, 255, 0);, and the thumb would change colour.
To be clear, I don't want something like this:
if slider_value <= 29:
thumb_color = rgb(255, 0, 0)
else if slider_value >= 30 && slider_value <= 69:
thumb_color = rgb(255, 255, 0)
else
thumb_color = rgb(0, 255, 0)
Here's the code I have so far:
.slider {
width: 60%;
margin: 50px auto;
-webkit-appearance: none;
height: 8px;
border-radius: 4px;
margin-bottom: 15px;
background-color: rgb(200, 200, 200);
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
border-radius: 10px;
background-color: rgb(255, 120, 0);
overflow: visible;
cursor: pointer;
}
.slidecontainer {
transform: translateY(-10px);
}
<div class="slidecontainer" align="center">
<input type="range" min="0" max="100" value="50" class="slider" name="rangeInput">
</div>
Please bear in mind that I know very little Javascript, however I know many other programming languages and I know enough to understand most Javascript code. So please try to make it as simple as is possible.
How would I be able to do this effectively?

the simplest is to use a variable css.
see : https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
const Slider = document.querySelector('input[name=rangeInput]')
Slider.oninput =_=> Slider.style.setProperty('--SliderColor', `hsl(${Slider.value}, 100%, 50%)`)
.slidecontainer {
transform: translateY(-10px);
text-align: center;
}
.slider {
--SliderColor: hsl(50, 100%, 50%);
-webkit-appearance: none;
width: 60%;
margin: 50px auto;
height: 8px;
border-radius: 4px;
margin-bottom: 15px;
background-color: rgb(200, 200, 200);
}
/* --------------------------- webkit browsers */
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
border-radius: 10px;
background-color: var(--SliderColor);
overflow: visible;
cursor: pointer;
}
/* -------------------------- Firefox */
.slider::-moz-range-thumb {
-moz-appearance: none;
width: 18px;
height: 18px;
border-radius: 10px;
background-color: var(--SliderColor);
overflow: visible;
cursor: pointer;
}
.slider::-moz-focus-outer { border: 0; }
/* Remove dotted outline from range input element focused in Firefox */
<div class="slidecontainer">
<input type="range" min="0" max="100" value="50" class="slider" name="rangeInput">
</div>
[edit]: adding css .slider::-moz-range-thumb (Firefox)

You're basically looking for this, right?
const input = document.querySelector('input[type="range"]');
const style = document.createElement('style');
const head = document.head || document.getElementsByTagName('head')[0];
style.type = 'text/css';
head.appendChild(style);
input.oninput = function(e) {
const cssText = `input.slider::-webkit-slider-thumb, input.slider::-moz-range-thumb {
background-color: rgb(${255 - 2.55*e.target.value}, ${2.55*e.target.value}, 0);
}`;
if (style.styleSheet) {
style.styleSheet.cssText = cssText;
} else {
style.innerHTML = "";
style.appendChild(document.createTextNode(cssText));
}
}
.slider {
width: 60%;
margin: 50px auto;
-webkit-appearance: none;
height: 8px;
border-radius: 4px;
margin-bottom: 15px;
background-color: rgb(200, 200, 200);
}
.slider::-webkit-slider-thumb,
.slider::-moz-range-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
border-radius: 10px;
background-color: rgb(128, 128, 0);
overflow: visible;
cursor: pointer;
}
.slidecontainer {
transform: translateY(-10px);
}
<div class="slidecontainer" align="center">
<input type="range" min="0" max="100" value="50" class="slider" name="rangeInput" oninput="test">
</div>
It's a bit trickier as ::webkit-slider-thumb is a pseudo element and (i might be wrong here) i don't think you can target it directly with JavaScript. So what I did was add a <style> tag to <head> and dynamically change its contents based on current input value, in a function triggered on input event.
It's more of a proof of concept, it can be improved by using addEventListener and it probably looks prettier in jQuery. I'll leave all that jazz to you.
Edit: As exaneta's answer points out, you have a range of options when dealing with dynamically changing colors. While I used a simple 255 > 0 for red and 0 > 255 for green in an rgb(), you might want to use exaneta's solution: hsl(${e.target.value}, 100%, 50%).

This is how I would do it: I would create a new <style> element and I woild append this element to the head. Next on input I would write a css rule that would change the thumb's color from red to green using hsl colors. I would make this css rule the text content of the new style element. I hope it helps.
let s = document.createElement("style");
document.head.appendChild(s);
itr.addEventListener("input", () => {
s.textContent = `.slider::-webkit-slider-thumb{background-color: hsl(${itr.value}, 100%, 50%)}`
})
.slider {
width: 60%;
margin: 50px auto;
-webkit-appearance: none;
height: 8px;
border-radius: 4px;
margin-bottom: 15px;
background-color: rgb(200, 200, 200);
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
border-radius: 10px;
background-color: hsl(50, 100%, 50%);
overflow: visible;
cursor: pointer;
}
.slidecontainer {
transform: translateY(-10px);
}
<div class="slidecontainer" align="center">
<input id="itr" type="range" min="0" max="100" value="50" class="slider" name="rangeInput">
</div>

Your post looks similar to this one: .slider::-webkit-slider-thumb needed in javascript
const range = document.getElementById("rangeInput");
var style = document.querySelector('[data="test"]');
range.addEventListener("input", () => {
const slider_value = range.value;
let thumb_color;
if (slider_value <= 29) {
thumb_color = "rgb(255, 0, 0)";
}
else if (slider_value >= 30 && slider_value <= 69) {
thumb_color = "rgb(255, 255, 0)";
}
else {
thumb_color = "rgb(0, 255, 0)";
}
style.innerHTML = `.slider::-webkit-slider-thumb { background-color: ${thumb_color} !important; } .slider:-moz-range-thumb { ${thumb_color} !important; }`;
});
.slider {
width: 60%;
margin: 50px auto;
-webkit-appearance: none;
height: 8px;
border-radius: 4px;
margin-bottom: 15px;
background-color: rgb(200, 200, 200);
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 18px;
height: 18px;
border-radius: 10px;
background-color: rgb(255, 120, 0);
overflow: visible;
cursor: pointer;
transition: all 1s ease;
}
.slidecontainer {
transform: translateY(-10px);
}
<style data="test" type="text/css"></style>
<div class="slidecontainer" align="center">
<input id="rangeInput" type="range" min="0" max="100" value="50" class="slider" name="rangeInput">
</div>

Add old value as "ghost" thumb to <input type="range"> Slider

I've styled a regular range slider using an example from w3schools. My goal is to send out a new value command to an external MQTT-based smarthome thing and show the old value as some kind of ghost-thumb first:
After the smarthome system confirms the new value, the bubble will be removed - but that's not my problem at this point. I would like to place the ghost between the background of the slider and the real-value-thumb, currently it looks like this:
Here you can see the result on JSFiddle, here's the code:
$('#slider_1').data('last-mqtt-value', 0.5);
$('#slider_1').on('input', function() {
// Show ghost slider
$('#slider_1_companion').css('left', 'calc('+ $(this).data('last-mqtt-value') / $(this).attr('max') +'* (100% - 20px))');
$('#slider_1_companion').css('display', 'block');
});
$('#slider_1').on('change', function() {
console.log( $(this).data('last-mqtt-value'), $(this).val() );
// Simulate new input value incoming
///*
setTimeout(() => {
$(this).data('last-mqtt-value', $(this).val());
$('#slider_1_companion').css('display', 'none');
},5000);
// */
});
.slider {
-webkit-appearance: none;
width: 100%;
height: 10px;
border-radius: 5px;
background: #ccc;
outline: none;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #6c757d;
cursor: pointer;
z-index: 5;
}
.slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #6c757d;
cursor: pointer;
z-index: 5;
}
/*https://stackoverflow.com/a/46318225/1997890*/
.slider_wrapper {
position: relative;
width: 150px;
}
.slider_companion {
background-color: #ccc;
border-radius: 50%;
width: 20px;
height: 20px;
position: absolute;
top: calc(100% - 19px); /* for some reason this is not 20px (height of thumb) */
/* left: calc( PERCENTAGE * (100% - 20px)); /* add this line dynamically via jQuery */
display: none;
pointer-events: none; /*click-through*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider_1_wrapper" class="slider_wrapper">
<div id="slider_1_companion" class="slider_companion"></div>
<input type="range" id="slider_1" class="slider" min="0" max="1.0" step="any">
</div>

I would consider a box-shadow for the slider that you can adjust with CSS variable and no need for extra element and you will have the expected result.
Here is an idea:
$('#slider_1').data('last-mqtt-value', 0.5);
$('#slider_1').on('input', function() {
document.getElementById('slider_1_wrapper').style.setProperty("--c",
($(this).data('last-mqtt-value') - $(this).val() )*130 + 'px');
/*130 = 150 - 20 = width of wrapper - width of thumb*/
});
$('#slider_1').on('change', function() {
console.log( $(this).data('last-mqtt-value'), $(this).val() );
// Simulate new input value incoming
///*
setTimeout(() => {
$(this).data('last-mqtt-value', $(this).val());
document.getElementById('slider_1_wrapper').style.setProperty("--c",0);
},5000);
// */
});
.slider {
-webkit-appearance: none;
width: 100%;
height: 10px;
border-radius: 5px;
background: #ccc;
outline: none;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #6c757d;
cursor: pointer;
z-index: 5;
box-shadow:var(--c,0) 0 0 red;
}
.slider::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: #6c757d;
cursor: pointer;
z-index: 5;
box-shadow:var(--c,0) 0 0 red;
}
.slider_wrapper {
width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider_1_wrapper" class="slider_wrapper">
<input type="range" id="slider_1" class="slider" min="0" max="1.0" step="any">
</div>

slideToggle function leaves some space at the beginning of dropdown list

I have a Pen, in which I have used jQuery slideToggle() function. But, on running the code, it seems like there is some space left on top, and the slide effect starts after that. What could be the possible reason?
$(() => {
let hidden = true,
eff = 'slide',
effFunc;
let display = () => {
$('.menu-list').toggle();
}
let fader = () => {
$('.menu-list').animate({
opacity: 'toggle'
}, 1000);
}
////////////////////////////////////
// Here is the function that makes the slide effect
let slider = () => {
$('.menu-list').slideToggle(1000);
}
////////////////////////////////////
$('input[name="effect"]').on('click', function() {
if (!hidden) {
effFunc();
hidden = !hidden;
}
eff = $(this).val();
});
$('.menu-head').on('click', function() {
if (eff == 'disp') {
effFunc = display;
} else if (eff == 'fade') {
effFunc = fader;
} else if (eff == 'slide') {
effFunc = slider;
}
effFunc();
hidden = !hidden;
});
});
#import url('https://fonts.googleapis.com/css?family=Roboto|Tajawal|Muli');
body {
margin: 0;
padding: 10px;
cursor: default;
user-select: none;
}
span {
display: inline-block;
box-sizing: border-box;
}
span.menu-head {
padding: 9px 0;
background: #FF872A;
width: 270px;
border-radius: 6px 6px 0 0;
text-align: center;
color: white;
text-shadow: 2px 2px 2px #5A5A5A;
font: 500 16pt Roboto;
}
span.menu-list {
border-radius: 0 0 6px 6px;
border: 0.1px solid #D7D7D7;
background: #D7D7D7;
width: 270px;
overflow: hidden;
display: flex;
flex-direction: column;
display: none;
}
span.menu-item {
width: 270px;
padding: 12px 27px;
color: #2A7AFF;
background: #EAEAEA;
font: 700 16pt Muli;
transition: all 0.7s;
}
span.menu-item:hover {
background: #2A9A3F;
color: #FAFAFA;
}
label.option-label {
position: fixed;
top: 10px;
right: 10px;
background: #9A9A9A;
color: #fff;
width: 25vw;
max-height: 33vh;
padding: 20px 12px;
border-radius: 4px;
box-shadow: -4px 4px 1px #C7C7C7;
}
label.option-label * {
margin: 10px 7px;
font: 600 16pt Tajawal;
}
input[type='radio'] {
transform: scale(1.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='menu-head'>Social Networks</span><br/>
<span class='menu-list'>
<span class='menu-item'>CodePen</span>
<span class='menu-item'>Twitter</span>
<span class='menu-item'>Google</span>
<span class='menu-item'>SoloLearn</span>
</span>
<label class='option-label'>
<label>
<input type='radio' name='effect' value='disp'/> Show / Hide
</label>
<br/>
<label>
<input type='radio' name='effect' value='fade'/> Fade In / Fade Out
</label>
<br/>
<label>
<input type='radio' name='effect' value='slide' checked/> Slide Up / Slide Down
</label>
</label>

it's because the inline-block of .menu-list, add display : block to .menu-list and hide it in th begining with js so it will toggle back to display : block instead of display : inline-blick
$(() => {
let hidden = true,
eff = 'slide',
effFunc;
$('.menu-list').hide();
let display = () => {
$('.menu-list').toggle();
}
let fader = () => {
$('.menu-list').animate({
opacity: 'toggle'
}, 1000);
}
////////////////////////////////////
// Here is the function that makes the slide effect
let slider = () => {
$('.menu-list').slideToggle(1000);
}
////////////////////////////////////
$('input[name="effect"]').on('click', function() {
if (!hidden) {
effFunc();
hidden = !hidden;
}
eff = $(this).val();
});
$('.menu-head').on('click', function() {
if (eff == 'disp') {
effFunc = display;
} else if (eff == 'fade') {
effFunc = fader;
} else if (eff == 'slide') {
effFunc = slider;
}
effFunc();
hidden = !hidden;
});
});
#import url('https://fonts.googleapis.com/css?family=Roboto|Tajawal|Muli');
body {
margin: 0;
padding: 10px;
cursor: default;
user-select: none;
}
span {
display: inline-block;
box-sizing: border-box;
}
span.menu-head {
padding: 9px 0;
background: #FF872A;
width: 270px;
border-radius: 6px 6px 0 0;
text-align: center;
color: white;
text-shadow: 2px 2px 2px #5A5A5A;
font: 500 16pt Roboto;
}
span.menu-list {
border-radius: 0 0 6px 6px;
border: 0.1px solid #D7D7D7;
background: #D7D7D7;
width: 270px;
overflow: hidden;
display: flex;
flex-direction: column;
display: block;
}
span.menu-item {
width: 270px;
padding: 12px 27px;
color: #2A7AFF;
background: #EAEAEA;
font: 700 16pt Muli;
transition: all 0.7s;
}
span.menu-item:hover {
background: #2A9A3F;
color: #FAFAFA;
}
label.option-label {
position: fixed;
top: 10px;
right: 10px;
background: #9A9A9A;
color: #fff;
width: 25vw;
max-height: 33vh;
padding: 20px 12px;
border-radius: 4px;
box-shadow: -4px 4px 1px #C7C7C7;
}
label.option-label * {
margin: 10px 7px;
font: 600 16pt Tajawal;
}
input[type='radio'] {
transform: scale(1.5);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='menu-head'>Social Networks</span><br/>
<span class='menu-list'>
<span class='menu-item'>CodePen</span>
<span class='menu-item'>Twitter</span>
<span class='menu-item'>Google</span>
<span class='menu-item'>SoloLearn</span>
</span>
<label class='option-label'>
<label>
<input type='radio' name='effect' value='disp'/> Show / Hide
</label>
<br/>
<label>
<input type='radio' name='effect' value='fade'/> Fade In / Fade Out
</label>
<br/>
<label>
<input type='radio' name='effect' value='slide' checked/> Slide Up / Slide Down
</label>
</label>