Skip to content

Instantly share code, notes, and snippets.

@gouf

gouf/toggleMenu.html

Created March 4, 2013 07:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gouf/5080586 to your computer and use it in GitHub Desktop.
Save gouf/5080586 to your computer and use it in GitHub Desktop.
Download ZIP
Fade out → Fade in より、Display : none → Fade in のほうがスムーズに映るみたい
Raw
toggleMenu.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
div.box {
margin: 3px;
border: thin solid silver;
height: 230px;
width: 310px;
}
div#menu2, div#menu3 {
display: none;
}
div.box:nth-of-type(2n + 1){
background: #EFEFEF;
}
</style>
</head>
<body>
<script>
$(function() {
$('input[name=menu]').click(function(){
var elm = displayedElement();
// elm.fadeOut();
elm.css('display', 'none');
switch ($('input[name=menu]:checked').val()){
case 'menu1':
$('#menu1').fadeIn();
break;
case 'menu2':
$('#menu2').fadeIn();
break;
case 'menu3':
$('#menu3').fadeIn();
break;
}
function displayedElement() {
// Return to Displayed object.(jQuery)
if($('#menu1').css('display') == 'block'){return $('#menu1');}
if($('#menu2').css('display') == 'block'){return $('#menu2');}
if($('#menu3').css('display') == 'block'){return $('#menu3');}
}
});
});
</script>
<div class="box">
<label for="r1">
<input id="r1" name="menu" type="radio" value="menu1" checked />Menu1
</label>
<label for="r2">
<input id="r2" name="menu" type="radio" value="menu2" />Menu2
</label>
<label for="r3">
<input id="r3" name="menu" type="radio" value="menu3" />Menu3
</label>
</div>
<div id="menu1" class="box">Menu1 Content</div>
<div id="menu2" class="box">Menu2 Content</div>
<div id="menu3" class="box">Menu3 Content</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment