Javascript 出现侧菜单--div未移动
我已经添加了一个侧菜单层到我的HTML应用程序引用此链接 当我按下菜单按钮和侧菜单出现时。我下面的div类Javascript 出现侧菜单--div未移动,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我已经添加了一个侧菜单层到我的HTML应用程序引用此链接 当我按下菜单按钮和侧菜单出现时。我下面的div类“buttoncls\u scrollableCenter”和“buttoncls\u fotter”可以在出现菜单时向右移动 但当侧边菜单出现时，此div“按钮可滚动”不会向右移动 如何使此div“按钮可滚动”在侧菜单出现时移动 代码：-- 我的物品清单 正文，html{ 宽度：100%； 身高：100%； 保证金：0； 填充：0； 位置：相对位置； } .div_包装{ 左：0px；
“buttoncls\u scrollableCenter”和“buttoncls\u fotter”“按钮可滚动”“按钮可滚动”
我的物品清单
正文，html{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
位置：相对位置；
}
.div_包装{
左：0px；
z指数：100；
}
.div_层{
背景：无重复滚动0 0#3e4046；
位置：绝对位置；
宽度：200px；
身高：100%；
}
.div_layer ul{
列表样式类型：无；
保证金：0；
填充：0；
}
.div_layer ul li{
边框底部：1px实心#dfdfdf；
溢出：隐藏；
填充物：5px；
高度：33像素；
颜色：白色；
文本对齐：居中；
}
.钮扣{
背景:#7676；
宽度：75px；
高度：25px；
位置：绝对位置；
浮动：左；
边框：1px实心#000；
光标：指针；
颜色：#fff；
}
.输入{
显示：内联块；
填充：0.2px；
}
.输入{
显示：块；
}
.imgtxt{
保证金：0；
字体系列：arial；
颜色：#DDDFED；
字体大小：15px；
}
#图像{
背景颜色：灰色；
空白：nowrap；
}
可滚动分区{
保证金：0；
填充：0；
溢出：自动；
左侧填充：4px；
填充顶部：20px；
框大小：边框框；
}
div.scrollableMenu{
保证金：0；
填充：0；
溢出：自动；
左侧填充：4px；
填充顶部：20px；
框大小：边框框；
}
分区滚动中心{
保证金：0；
填充：0；
溢出：自动；
左侧填充：4px；
填充顶部：20px；
框大小：边框框；
}
#居中{
背景色：#292B3B；
位置：绝对位置；
顶部：115px；
左：0px；
右：0px；
底部：20px；
}
#福特{
背景色：#CC99FF；
文本对齐：居中；
位置：绝对位置；
左：0；
底部：0；
宽度：100%；
}
功能菜单_onclick（）{
var rig=$（'.div_layer'）.position（）.left；
如果（装备==0）
{
$（'.div_layer'）。设置动画（{left:-this.width}，300）；
$（“.buttonls_scrollable”）.animate（{左：'0px'}，300）；
$（“.buttonls_scrollableCenter”）.animate（{左：'0px'}，300）；
$（“.buttonls_fotter”）.animate（{左：'0px'}，300）；
}
其他的
{
var center=此宽度；
$（'.div_layer'）。设置动画（{左：'0px'}，300）；
$（“.buttonls_scrollable”）.animate（{left:this.width}，300）；
$（“.buttonls_scrollableCenter”）.animate（{left:center}，300）；
$（“.buttonls_fotter”）.animate（{left:this.width}，300）；
}
}
函数doc_onload（）{
this.width=$（'.div_layer'）.width（）；
$（'.div_layer'）.css（'left'，this.width）；
this.rig=$（'.div_layer'）.position（）.left；
};
//http://rickluna.com/wp/2012/10/setting-css-background-colors-via-javascript-rgb-triplet-vs-hex/
函数convertToHex（str）{
var raw=str.match（/（\d+）/g）；
var hexr=parseInt（原始[0]）。toString（16）；
var hexg=parseInt（原始[1]）。toString（16）；
var hexb=parseInt（原始[2]）。toString（16）；
hexr=hexr.length==1？'0'+hexr:hexr；
hexg=hexg.length==1？'0'+hexg:hexg；
hexb=hexb.length==1？'0'+hexb:hexb；
变量hex='#'+hexr+hexg+hexb；
返回十六进制；
}
//
函数selectId（id）{
//警报（id）；
如果（id=“1”）
{
//警报（“一”）；
var div=document.getElementById（'1'）；
div.style.backgroundColor='红色'；
var div=document.getElementById（'2'）；
div.style.backgroundColor='黑色'；
var div=document.getElementById（'3'）；
div.style.backgroundColor='黑色'；
}
//http://stackoverflow.com/questions/13712697/set-background-color-in-hex
//http://rickluna.com/wp/2012/10/setting-css-background-colors-via-javascript-rgb-triplet-vs-hex/
如果（id=“2”）
{
//警报（“两个”）；
var div=document.getElementById（'1'）；
div.style.backgroundColor='黑色'；
var div=document.getElementById（'2'）；
div.style.backgroundColor='红色'；
var div=document.getElementById（'3'）；
div.style.backgroundColor='黑色'；
}
如果（id=“3”）
{
//警报（“三”）；
var div=document.getElementById（'1'）；
div.style.backgroundColor='黑色'；
var div=document.getElementById（'2'）；
div.style.backgroundColor='黑色'；
var div=document.getElementById（'3'）；
div.style.backgroundColor='红色'；
}
$（'.div_layer'）。设置动画（{left:-this.width}，300）；
var中心=250；
$（“.buttonls_scrollable”）.animate（{左：'100px'}，300）；
$（“.buttonls_scrollableCenter”）.animate（{左：'0px'}，300）；
$（“.buttonls_fotter”）.animate（{左：'0px'}，300）；
//打开菜单
};
水果
汽车
布料
菜单
正常蔬菜
绿色蔬菜
布林哈尔
花椰菜
番茄
拉迪芬格
萝卜
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<title>My item list </title>
<style>
body, html {
width:100%;
height:100%;
margin:0;
padding:0;
position:relative;
}
.div_wrapper {
left:0px;
z-index:100;
}
.div_layer {
background: none repeat scroll 0 0 #3e4046;
position: absolute;
width: 200px;
height: 100%;
}
.div_layer ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.div_layer ul li {
border-bottom: 1px solid #dfdfdf;
overflow: hidden;
padding: 5px;
height: 33px;
color:white;
text-align:center;
}
.buttoncls {
background:#767676;
width:75px;
height:25px;
position:absolute;
float:left;
border:1px solid #000;
cursor:pointer;
color:#fff;
}
.input {
display: inline-block;
padding: 0 2px;
}
.input input {
display: block;
}
.imgtxt {
margin: 0;
font-family:arial;
color:#DDDFED;
font-size:15px;
}
#images {
background-color: grey;
white-space:nowrap;
}
div.scrollable {
margin: 0;
padding: 0;
overflow: auto;
padding-left: 4px;
padding-top: 20px;
box-sizing:border-box;
}
div.scrollableMenu {
margin: 0;
padding: 0;
overflow: auto;
padding-left: 4px;
padding-top: 20px;
box-sizing:border-box;
}
div.scrollableCenter {
margin: 0;
padding: 0;
overflow: auto;
padding-left: 4px;
padding-top: 20px;
box-sizing:border-box;
}
#center {
background-color:#292B3B;
position:absolute;
top:115px;
left:0px;
right:0px;
bottom:20px;
}
#fotter {
background-color:#CC99FF;
text-align:center;
position:absolute;
left:0;
bottom:0;
width:100%;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
function menu_onclick() {
var rig=$('.div_layer').position().left;
if(rig == 0 )
{
$('.div_layer').animate({left:-this.width}, 300);
$(".buttoncls_scrollable").animate({left:'0px'}, 300);
$(".buttoncls_scrollableCenter").animate({left:'0px'}, 300);
$(".buttoncls_fotter").animate({left:'0px'}, 300);
}
else
{
var center = this.width;
$('.div_layer').animate({left:'0px'}, 300);
$(".buttoncls_scrollable").animate({left:this.width}, 300);
$(".buttoncls_scrollableCenter").animate({left:center}, 300);
$(".buttoncls_fotter").animate({left:this.width}, 300);
}
}
function doc_onload() {
this.width = $('.div_layer').width();
$('.div_layer').css('left',-this.width);
this.rig = $('.div_layer').position().left;
};
//http://rickluna.com/wp/2012/10/setting-css-background-colors-via-javascript-rgb-triplet-vs-hex/
function convertToHex(str){
var raw = str.match(/(\d+)/g);
var hexr = parseInt(raw[0]).toString(16);
var hexg = parseInt(raw[1]).toString(16);
var hexb = parseInt(raw[2]).toString(16);
hexr = hexr.length == 1 ? '0' + hexr: hexr;
hexg = hexg.length == 1 ? '0' + hexg: hexg;
hexb = hexb.length == 1 ? '0' + hexb: hexb;
var hex = '#' + hexr + hexg + hexb;
return hex;
}
//
function selectId(id) {
//alert(id);
if(id == "1")
{
//alert('one');
var div = document.getElementById('1');
div.style.backgroundColor = 'red';
var div = document.getElementById('2');
div.style.backgroundColor = 'black';
var div = document.getElementById('3');
div.style.backgroundColor = 'black';
}
//http://stackoverflow.com/questions/13712697/set-background-color-in-hex
//http://rickluna.com/wp/2012/10/setting-css-background-colors-via-javascript-rgb-triplet-vs-hex/
if(id == "2")
{
//alert('two');
var div = document.getElementById('1');
div.style.backgroundColor = 'black';
var div = document.getElementById('2');
div.style.backgroundColor = 'red';
var div = document.getElementById('3');
div.style.backgroundColor = 'black';
}
if(id == "3")
{
//alert('three');
var div = document.getElementById('1');
div.style.backgroundColor = 'black';
var div = document.getElementById('2');
div.style.backgroundColor = 'black';
var div = document.getElementById('3');
div.style.backgroundColor = 'red';
}
$('.div_layer').animate({left:-this.width}, 300);
var center = 250;
$(".buttoncls_scrollable").animate({left:'100px'}, 300);
$(".buttoncls_scrollableCenter").animate({left:'0px'}, 300);
$(".buttoncls_fotter").animate({left:'0px'}, 300);
//collaspe the menu
};
</script>
</head>
<body onload="doc_onload()">
<div class="div_layer">
<ul>
<li onclick="selectId(this.id)" id="1">Fruits</li>
<li onclick="selectId(this.id)" id="2">Automobile</li>
<li onclick="selectId(this.id)" id="3">Cloth</li>
</ul>
</div>
<div id="images" class="scrollable buttoncls_scrollable">
<div class="input">
<input type="image" src="http://www.shoredreams.net/wp-content/uploads/2014/02/show-menu-icon.png" onclick="menu_onclick()" alt="Bulb pop up" width="80" height="48" />
<p class="imgtxt">Menu</p>
</div>
<div class="input">
<input type="image" src="http://t3.gstatic.com/images?q=tbn:ANd9GcRTBRnn9Aqx74JvKyJ7Z5ydbXXuj8cIDVuOdJZUxb02Q2LWfJGP" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
<p class="imgtxt">Normal Vegitable</p>
</div>
<div class="input">
<input type="image" src="http://www.boldsky.com/img/2013/03/19-greenveggies.jpg" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
<p class="imgtxt">Green Vegitable</p>
</div>
</div>
<div id="center" class="scrollableCenter buttoncls_scrollableCenter">
<div >
<input type="image" src="http://t1.gstatic.com/images?q=tbn:ANd9GcTMPmp8aVaovrd3AGj1_hL_GEXX1M4DJ-TTMJ34Vr622XeY_usu" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
<p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">brinjal</p>
<hr/>
</div>
<div >
<input type="image" src="http://upload.wikimedia.org/wikipedia/commons/2/25/Cauliflower.JPG" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
<p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">cauliflower</p>
<hr/>
</div>
<div >
<input type="image" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQJgt4i9ph9uQsS3JV940PBg-kwN1kkrKbC6FLYI6UhbxucEb91" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
<p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">tomato</p>
<hr/>
</div>
<div >
<input type="image" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT-mwuxaqQeHXjoZzPUoee9Rvg8Jq-eCvo8H0EgEtapjfr6U4E3" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
<p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">ladyfinger</p>
<hr/>
</div>
<div >
<input type="image" src="http://t2.gstatic.com/images?q=tbn:ANd9GcQRxXUO2stKHLyET_rXpxOuLp67qc1IzlBcJGke5jYoGPeRZpnO" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
<p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">radish</p>
<hr/>
</div>
<div >
<input type="image" src="http://t3.gstatic.com/images?q=tbn:ANd9GcT2zCeG621TSX1YmcsT9DPLaQJkdVwdYk_n-eWECCa8NTtXR0LFeQ" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
<p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">ginger</p>
<hr/>
</div>
</div>
<div class="buttoncls_fotter" id="fotter">List of Items</div>
</body>
</html>
div.scrollable {
position: absolute;
right:0;
left:0;
}
$(document).ready(function(){
$('#menu_button').click(function(){
if ($('body').hasClass('show')){
$('body').removeClass('show');
}
else {
$('body').addClass('show')
}
});
});
.content_wrap
{
width: 100%;
height: 100%;
float: right;
}
.show .content_wrap
{
width: calc(100% - 200px);
}
.div_layer
{
background: none repeat scroll 0 0 #3e4046;
position: absolute;
left: -200px;
width: 200px;
height: 100%;
z-index: 1;
}
.show .div_layer
{
left: 0;
}
.content_wrap, .div_layer
{
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}