0

I've built an off-canvas navigation menu on the right-hand side of the screen. Clicking the hamburger icon slides the menu in from right-to-left. I am using overflow:hidden on the wrapping div, so no scroll bars are present. However, when click-dragging the main body from right-to-left, it pulls the overflowing content into view. When switching the navigation to use a left positioning, this behavior does not occur... strange... Any ideas?

codepen: http://codepen.io/seejaeger/pen/eNJOeb

HTML

<div class="container">
    <div class="translate">
        <div class="main">

            <div class="nav-wrap_small">
                <img src="https://cdn4.iconfinder.com/data/icons/flat-black/128/menu.png" class="offcanvas-toggle">
            </div><!-- nav-wrap_small -->

            <div class="nav-wrap">
                <nav class="nav-left">
                    <a href="home" class="nav-logo"><img src="" alt="" width="80%"></a> 
                </nav><!-- nav-left -->
                <nav class="nav-center">
                    <a href="#">products</a>
                    <a href="#">investment funds</a>
                    <a href="#">commentary</a>
                    <a href="#">literature</a>
                    <a href="#">resources</a>
                    <a href="#">about</a>   
                </nav><!-- nav-center -->
                <nav class="nav-right">
                    <a href="#">contact</a>
                    <a href="#">accounts</a>
                    <br>
                    <input type="text" class="nav-right-searchInput">
                </nav><!-- nav-right -->
            </div><!-- nav-wrap -->

            <!-- main content goes here -->

        </div><!-- main -->
        <div class="offcanvas">
        <nav>
            <ul>
                <li><a href="#">products</a></li>
                <li><a href="#">investment funds</a></li>
                <li><a href="#">commentary</a></li>
                <li><a href="#">literature</a></li>
                <li><a href="#">resources</a></li>
                <li><a href="#">about</a></li>
            </ul>
        </nav>
    </div>
</div><!-- translate -->
</div><!-- container -->

CSS

.container {
  overflow: hidden; 
}

.translate {
  transition: transform 0.3s ease;
}

.translate.is-open {
  transform: translate3d(-300px, 0, 0); 
}

.offcanvas {
  position: absolute;
  width: 300px;
  right: -300px;
  top: 0;
  bottom: 0;
  background-color: #006993; 
}

.offcanvas-toggle {
  width: 33px;
  height: 33px;
  float: right; 
}

.main {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.main:after {
  content: " ";
  display: block;
  clear: both; 
}
cimmanon
  • 67,211
  • 17
  • 165
  • 171
jaegs
  • 489
  • 6
  • 15
  • `.container` needs `position: relative` for `.offcanvas` to respect its overflow (as per http://stackoverflow.com/questions/4605715/position-absolute-and-overflow-hidden). See http://codepen.io/anon/pen/WvreKz – Honore Doktorr May 07 '15 at 22:02
  • wow... can't believe I overlooked that... still find it strange that it works for left positioning and not right positioning. maybe that's a browser quirk? thanks for clearing that up! – jaegs May 08 '15 at 04:08

0 Answers0