javascript - Jquery slide menu x-scroll issue -


i have built custom slide menu giving me slight bit of grief. click here example when click menu button, slide menu pushes background image right , leaves , excess of x-scroll.

my objective function have sliding menu sit on top of background image. background image <img> tag , absolute positioned clients wants update images manually. maybe main reason why issue occurring. div id="right" wrapping content, including background image. have trying placing around wrap content can't figure out method make work correctly wondering if there way to work around below snippet of code, both javascript , html structure.

$('#button').toggle(  function() {     $('#right').animate({ left: 400 }, 'slow', function() {         $('#button').html('close');     }); },  function() {     $('#right').animate({ left: 0 }, 'slow', function() {         $('#button').html('menu');     }); } 

);

<div id="right">     <div id="menubar">         <div id="button">             menu         </div>     </div>  <div id="menu">     <ul>         <li><a href="#">menu item 1</a></li>         <li><a href="#">menu item 2</a></li>         <li><a href="#">menu item 3</a></li>         <li><a href="#">menu item 4</a></li>         <li><a href="#">menu item 5</a></li>         <li><a href="#">menu item 6</a></li>         <li><a href="#">menu item 7</a></li>         <li><a href="#">menu item 8</a></li>         <li><a href="#">menu item 9</a></li>         <li><a href="#">menu item 10</a></li>         <li><a href="#">menu item 11</a></li>         <li><a href="#">menu item 12</a></li>     </ul> </div> 

can advise me on way can solve issue?

simpy add :

body{     overflow-x:hidden; } 

so hide body-s horizontal scroll.

more information owerflow.


Comments

Popular posts from this blog

node.js - Bad Request - node js ajax post -

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -