Skip to content

Instantly share code, notes, and snippets.

@kevinfjbecker

kevinfjbecker/index.html

Created March 10, 2019 08:09
Show Gist options
  • Save kevinfjbecker/8e7cc8e201a50b6b59dccbedc8340dcb to your computer and use it in GitHub Desktop.
Save kevinfjbecker/8e7cc8e201a50b6b59dccbedc8340dcb to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/xofuguc
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JS Bin</title>
<style id="jsbin-css">
.button-group {
font-family: Sans-Serif;
display: inline-block;
user-select: none;
}
.option-container {
float: left;
white-space: nowrap;
box-shadow: inset 0 1px 2px grey;
border-top: 1px solid grey;
border-bottom: 1px solid grey;
overflow: auto;
}
.option {
display: inline-block;
padding: 4px;
border-right: 1px solid grey;
}
.button-segment {
box-shadow: inset 0 1px 2px white;
float: left;
padding: 4px;
background-color: #e6e6e6;
}
.button-segment.main {
font-weight: bold;
border: 1px solid grey;
border-radius: 4px 0 0 4px;
}
.button-segment.cap {
border-top: 1px solid grey;
border-right: 1px solid grey;
border-bottom: 1px solid grey;
border-radius: 0 4px 4px 0;
}
#spacer {
height: 30px
}
</style>
</head>
<body>
<div id=spacer></div>
<div id=main-button class=button-group>
<div class="button-segment main">Class</div>
<div class=option-container>
<span class=option>Druid</span>
<span class=option>Hunter</span>
<span class=option>Mage</span>
<span class=option>Paladin</span>
<span class=option>Priest</span>
<span class=option>Rogue</span>
<span class=option>Shaman</span>
<span class=option>Warlock</span>
<span class=option>Warrior</span>
</div>
<div class="button-segment cap">&nbsp;</div>
</div>
<script id="jsbin-javascript">
var toggleStuff = (function(){
var toggle = false;
return function() {
toggle = !toggle;
if(toggle) {
$(this)
.find('.option-container')
.css('width', '')
.css('max-width', getMenuSpace);
} else {
$(this)
.find('.option-container')
.css('width', 0);
}
};
}());
$('#main-button').click(toggleStuff);
$('#main-button .option').click(function(){
$(this)
.parent()
.parent()
.find('.button-segment.main')
.text($(this).text())
});
$('.option-container').css('width', 0);
function getMenuSpace() {
var totalSpace = $('#main-button').parent().width(),
buttonWidth = $('.button-segment.main').width(),
capWidth = $('.button-segment.cap').width(),
menuSpace = totalSpace - (buttonWidth + capWidth),
magic = 20;
return menuSpace - magic;
}
</script>
<script id="jsbin-source-css" type="text/css">.button-group {
font-family: Sans-Serif;
display: inline-block;
user-select: none;
}
.option-container {
float: left;
white-space: nowrap;
box-shadow: inset 0 1px 2px grey;
border-top: 1px solid grey;
border-bottom: 1px solid grey;
overflow: auto;
}
.option {
display: inline-block;
padding: 4px;
border-right: 1px solid grey;
}
.button-segment {
box-shadow: inset 0 1px 2px white;
float: left;
padding: 4px;
background-color: #e6e6e6;
}
.button-segment.main {
font-weight: bold;
border: 1px solid grey;
border-radius: 4px 0 0 4px;
}
.button-segment.cap {
border-top: 1px solid grey;
border-right: 1px solid grey;
border-bottom: 1px solid grey;
border-radius: 0 4px 4px 0;
}
#spacer {
height: 30px
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var toggleStuff = (function(){
var toggle = false;
return function() {
toggle = !toggle;
if(toggle) {
$(this)
.find('.option-container')
.css('width', '')
.css('max-width', getMenuSpace);
} else {
$(this)
.find('.option-container')
.css('width', 0);
}
};
}());
$('#main-button').click(toggleStuff);
$('#main-button .option').click(function(){
$(this)
.parent()
.parent()
.find('.button-segment.main')
.text($(this).text())
});
$('.option-container').css('width', 0);
function getMenuSpace() {
var totalSpace = $('#main-button').parent().width(),
buttonWidth = $('.button-segment.main').width(),
capWidth = $('.button-segment.cap').width(),
menuSpace = totalSpace - (buttonWidth + capWidth),
magic = 20;
return menuSpace - magic;
}</script></body>
</html>
Raw
jsbin.xofuguc.css
.button-group {
font-family: Sans-Serif;
display: inline-block;
user-select: none;
}
.option-container {
float: left;
white-space: nowrap;
box-shadow: inset 0 1px 2px grey;
border-top: 1px solid grey;
border-bottom: 1px solid grey;
overflow: auto;
}
.option {
display: inline-block;
padding: 4px;
border-right: 1px solid grey;
}
.button-segment {
box-shadow: inset 0 1px 2px white;
float: left;
padding: 4px;
background-color: #e6e6e6;
}
.button-segment.main {
font-weight: bold;
border: 1px solid grey;
border-radius: 4px 0 0 4px;
}
.button-segment.cap {
border-top: 1px solid grey;
border-right: 1px solid grey;
border-bottom: 1px solid grey;
border-radius: 0 4px 4px 0;
}
#spacer {
height: 30px
}
Raw
jsbin.xofuguc.js
var toggleStuff = (function(){
var toggle = false;
return function() {
toggle = !toggle;
if(toggle) {
$(this)
.find('.option-container')
.css('width', '')
.css('max-width', getMenuSpace);
} else {
$(this)
.find('.option-container')
.css('width', 0);
}
};
}());
$('#main-button').click(toggleStuff);
$('#main-button .option').click(function(){
$(this)
.parent()
.parent()
.find('.button-segment.main')
.text($(this).text())
});
$('.option-container').css('width', 0);
function getMenuSpace() {
var totalSpace = $('#main-button').parent().width(),
buttonWidth = $('.button-segment.main').width(),
capWidth = $('.button-segment.cap').width(),
menuSpace = totalSpace - (buttonWidth + capWidth),
magic = 20;
return menuSpace - magic;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment