【Old Log】スマホでよく見る開閉ボタン（トグル）

Android2.x端末で上手く表示できません

もっと頭の良い書き方あると思うけれど、とりあえず完成したので、メモメモ。
HTML5とCSS3なので、基本IE10以上です。
CSSの書き方次第でIE9〜でもいけるはず。
IE8以下はnavの部分をなにか違うもの、例えばdivとかに書き換えが必要だと思います。
(2014.04.09一部修正)

javascript

$(function(){
//データセット------------------------	
$("body").prepend('<div id="tglBackground"></div>');
$("body").prop('id', 'startTogl');
$("body").addClass("bodyfix");		
//ボタンの動き------------------------	
$("nav #Menu").on("click", function() {
$(this).next().slideToggle("fast");
$(this).toggleClass("active");
	//$("body").toggleClass(function() {//2014.04.09訂正削除
$("#wrapper").toggleClass(function() {
if ($("div#tglBackground").hasClass("fixBackground")) {
$("div#tglBackground").removeClass("fixBackground");
	//$('body').removeClass('bodyfix');//2014.04.09訂正削除
$('#startTogl').removeClass('bodyfix');
$(window).scrollTop(scrollTop);
} else {
var scrollTop;
scrollTop = $(window).scrollTop();
$('body').addClass('bodyfix').css('top', (-scrollTop) + 'px');
$("div#tglBackground").addClass("fixBackground");
}
});
});	
//背景のクリックアクション------------------------	
$("div#tglBackground").on("click", function() {
$("nav #Menu").next().slideToggle("fast");
$("nav #Menu").toggleClass("active");
	//$("body").toggleClass(function() {//2014.04.09訂正削除
$("#wrapper").toggleClass(function() {
if ($("div#tglBackground").hasClass("fixBackground")) {
$("div#tglBackground").removeClass("fixBackground");
} else {$("div#tglBackground").addClass("fixBackground");}
});
});

html

html側は、下記のように記入する。

<div id="wrapper">
<nav>
<div id="Menu">MENU</div>
<ul>
<li><a href="#">メニュー１</a></li>
<li><a href="#">メニュー２</a></li>
<li><a href="#">メニュー３</a></li>
<li><a href="#">メニュー４</a></li>
<li><a href="#">メニュー５</a></li>
</ul>
</nav>
</div>
});

css

cssはお好みで変更すること。

body.bodyfix{
position:static!important;
overflow-y: croll;
}

body#startTogl{
position:fixed;
overflow-y:scroll;
}

.fixBackground{
position:fixed; top:0; left:0;
display:block; width:100%; height:100%;
background:rgba(0, 0, 0, 0.5);
z-index:80;
cursor:pointer;
}

nav #Menu{
text-indent:100%;
white-space:nowrap;
overflow:hidden;
margin-left:-20px;
position:absolute;
top:35px;
left:50%;
display:inline-block;
cursor:pointer;
width:40px;
height:40px;
background:#000;
border-radius:40px;
z-index:100;
}

nav div.active{
background:#666!important;
transition:background-color 0.5s linear;
}

nav ul{
display:none;
}

nav ul{
position:absolute; top:45px; left:0;
width:100%;
z-index:100;
}

nav ul li a{
display:block;
padding:18px 0;
background:#000000;
color:#FFFFFF;
text-decoration:none;
width:100%;
background:rgba(0, 0, 0, 0.7);
margin:0 0 1px 0;
transition-duration:0.3s;
transition-timing-function:ease-in;
border-bottom:#FFFFFF 1px solid;
}

nav ul li a:hover{
display:block;
background:#000000;
color:#FFFFFF;
text-decoration:none;
width:100%;
background:rgba(178, 30, 35, 0.8);
transition:background-color 0.3s linear;
}