出現側邊菜單 - div不移動

我已經在我的HTML應用程序中添加了一個菜單圖層，並參考此鏈接http://www.uiupdates.com/sidebar-menu-layer-with-jquery/。出現側邊菜單 - div不移動

當我按菜單按鈕&側菜單appers。當菜單出現時，我的下一個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

側菜單，頂格不動： - enter image description here

來源

2014-12-05 Katoch

你需要絕對位置您的buttoncls_scrollable：

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

Example

如果您還更改#fotter有right:0而不是width:100%;將修復與出現水平滾動條您的問題時，側菜單顯示

來源

2014-12-05 11:46:55 Pete

感謝好友...它的工作... :-) – Katoch 2014-12-05 13:38:09

爲什麼不使用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/

來源

2014-12-05 12:11:48

出現側邊菜單 - div不移動

回答

相關問題