CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Learning and sharing
Learning and sharing

Reputation: 1388

Avoid horizontal scrolling to position absolute div to the right with CSS

I'm putting a div with CSS absolute position, hidden on the right of the HTML document and shows me a horizontal scroll, and I can avoid this?

Here's an example:

http://jsfiddle.net/milindex/3pettu8m/1/

$("#open").click(function(e) {
  e.preventDefault();
  $("#menu").toggleClass("show");
});
#menu {
  position: absolute;
  background-color: #222;
  z-index: 10;
  width: 280px;
  color: #bbb;
  top: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 1;
}
.right {
  right: -280px;
}
.show {
  right: 0;
}
#showmenu {
  margin-left: 100%;
  position: absolute;
  top: 0;
  padding: 6px 10px 7px 10px;
  font-size: 1.3em;
  color: #FFCC33;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" id="open">Open Main</a>

<nav id="menu" class="menuUser right">
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</nav>

Upvotes: 2

Views: 1085

Answers (4)

vickisys
vickisys

Reputation: 2036

 $("#open").click(function(e){
       e.preventDefault(); 

    if($("#menu").hasClass('right')) {

        $("#menu").removeClass('right');
        $("#menu").addClass('show');
   }else{

        $("#menu").addClass('right');
        $("#menu").removeClass('show');
   }
});

This can solve your problem without changing your CSS.

Upvotes: 1

dippas
dippas

Reputation: 60563

just add this to your code

html {
    overflow-x:hidden
}

Here is a snippet: 

$("#open").click(function(e){
	e.preventDefault();
	$("#menu").toggleClass("show");
});
html {
    overflow-x:hidden
}
#menu {
  position: absolute;
  background-color: #222;
  z-index: 10;
  width: 280px;
  color: #bbb;
  top: 0;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 1;
}

.right	 { right: -280px; }

.show { right: 0; }

#showmenu {
  margin-left: 100%;
  position: absolute;
  top: 0;
  padding: 6px 10px 7px 10px;
  font-size: 1.3em;
  color: #FFCC33;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a href="#" id="open">Open Main</a>

<nav id="menu" class="menuUser right">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</nav>

Upvotes: 1

Dane O&#39;Connor
Dane O&#39;Connor

Reputation: 77298

You can add overflow:hidden, sure, but I think the real answer is to add right: 0; to your #menu. This will put the right edge of your your 280px div on the right edge of your page with no overflow and thus, no scrolling.

Upvotes: 1

Jacob G
Jacob G

Reputation: 14172

Use overlow-x:hidden;:

body{
    overflow-x:hidden;
}

JSFiddle Demo
This only removes x(right/left) scroll-bars, so you can still scroll up/down.

Upvotes: 2

Related Questions