个人中心
gpt4 book ai didi

javascript - 侧边菜单出现——div 不动

转载 作者：行者123 更新时间：2023-11-28 08:51:36 25 4
gpt4 key购买 nike

我已经在我的 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 页面:-- enter image description here

侧边菜单出现，top div 不动 :-- enter image description here

最佳答案

您需要绝对定位您的buttoncls_scrollable:

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

Example

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

关于javascript - 侧边菜单出现——div 不动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27314944/

25 4 0
文章推荐： jquery - 返回主框时花式框子框丢失覆盖
文章推荐： ios - 无需 SLCompose 或任何类型的对话即可与 Facebook 共享
文章推荐： iphone - 对于 MapKit，我应该使用 Directions 还是制作我自己的路线叠加层？
文章推荐： ios - 在 iOS9 swift 中选择特定行更新核心数据数据库
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com