侧边菜单出现——div 不动答案

【问题标题】：side menu appears -- div not moving侧边菜单出现——div 不动
【发布时间】：2014-12-05 11:30:11
【问题描述】：

我在我的 HTML 应用程序中添加了一个侧菜单层，引用此链接 http://www.uiupdates.com/sidebar-menu-layer-with-jquery/。

当我按下菜单按钮和侧面菜单时。我的以下 div 类"buttoncls_scrollableCenter" & "buttoncls_fotter" 能够在菜单出现时向右移动。

但是当侧边菜单出现时，这个 div "buttoncls_scrollable" 并没有向右移动。

当侧边菜单出现时如何使这个 div "buttoncls_scrollable" 移动？

代码：--

<!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>

实际的HTML页面：--

side Menu 出现，顶部 div 没有移动 :--

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

你需要绝对定位你的buttoncls_scrollable：

div.scrollable {
    position: absolute;
    right:0;
    left:0;
}

Example

如果您还将#fotter 更改为right:0 而不是width:100%;，它将解决您在显示侧边菜单时出现水平滚动条的问题

【讨论】：

【解决方案2】：

为什么不使用 jquery？这将非常简单。有不止一种方法可以做到这一点，但您可以例如使用 Jquery click() 函数来执行操作并使用 Jquery addClass() 函数为“body”（或其他“wrap all”元素）提供一个类点击后影响他的所有孩子 - 菜单和新 div 的新位置（包含除菜单本身之外的所有元素的 div）。在 HTML 上，添加一个 div，它将包装除菜单本身之外的所有元素，并向输入图像添加一个类或 id 以避免冲突，例如添加一个 id (id="menu_button") 并使用 jquery 调用它：

jquery：

$(document).ready(function(){
    $('#menu_button').click(function(){
        if ($('body').hasClass('show')){    
            $('body').removeClass('show');  
        }
        else {
            $('body').addClass('show')
        }
    });
});

在 CSS 上，您需要添加新的 div 换行。添加left: 200px;（菜单的宽度）以在不需要显示时完全隐藏菜单。添加z-index: 1;（您可以使用更高的值，只要它高于需要低于的所有其余元素）。使它们位于其他元素之上。使用left: 0; 添加新类，以将菜单带到单击后所需的位置。您可以使用 CSS3 transition 以获得更好的显示效果。

CSS：

.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;   
}

示例：http://jsfiddle.net/6dgbp5dh/1/

【讨论】：