javascript - How to make this Off-Canvas Navigation fixed -
i've got beautiful off-canvas navigation , try make fixed. driving me crazy.
i thought maybe you’d have idea.
i tried inner container () , set fixed position overflow-y: scroll , set height of screen (with javascript – $(window).height()).
that way can have big list scrollable , still have menu there on scroll. unfortunately cause scrolling problems on mobile devices , browsers.
does know how make navigation menu fixed?
thanks in advance!
/* main */ body { font-family: 'roboto', sans-serif; font-size: 100%; color: #444; text-align: left; position: relative; overflow-x: hidden; } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .clearfix:before, .clearfix:after { content: ''; display: table; } .clearfix:after { clear: both; } * { margin: 0; padding: 0; } img { width: 100%; height: 100%; margin: 0 auto; border: 0; } { text-decoration: none; color: #444; } /* main */ /* navigation */ .navbar { position: fixed; top: 0; left: 0; width: 100%; padding: 0; height: 50px; z-index: 2; background: #fff; } #menupush { position: relative; float: left; padding: 0px 27px; margin: 0px; border: none; outline: none; cursor: pointer; height: 50px; background-color: transparent; } #menupush span { float: left; height: 50px; line-height: 52px; padding-left: 12px; font-weight: 600; letter-spacing: .1875rem; font-size: .625rem; text-rendering: auto; -webkit-font-smoothing: initial; color: #1d1d1f; text-transform: uppercase; } .burger { float: left; height: 50px; padding-top: 16px; } .burger li { width: 18px; height: 2px; background: #444; margin: 3px 0; list-style: none; } #close-button { width: 16px; height: 16px; position: absolute; right: 20px; top: 18px; overflow: hidden; text-indent: 16px; border: none; z-index: 1001; outline: none; background: transparent; color: transparent; cursor: pointer; } #close-button::before, #close-button::after { content: ''; position: absolute; width: 2px; height: 100%; top: 0; left: 50%; background: #9c9c9c; } #close-button::before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } #close-button::after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #close-button:hover::before, #close-button:hover::after { background: #fff; } .st-content { overflow: hidden; -webkit-transition: 0.5s; transition: 0.5s; } .st-container { overflow: hidden; position: relative; } .st-pusher { position: relative; left: 0; z-index: 99; height: 100%; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; } .st-pusher::after { position: absolute; top: 0; right: 0; width: 0; height: 0; background: rgba(29,29,31,.6); z-index: 90; content: ''; opacity: 0; -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; } .st-menu-open .st-pusher::after { width: 100%; height: 100%; opacity: 1; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .st-menu { position: absolute; top: 0; left: 0; z-index: 100; visibility: hidden; width: 280px; height: 100%; background: #1d1d1f; -webkit-transition: 0.5s; transition: 0.5s; } .st-menu::after { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2); content: ''; opacity: 1; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } .st-menu-open .st-menu::after { width: 0; height: 0; opacity: 0; -webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s; } .st-menu div { width: 100%; opacity: 0; -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out; text-transform: uppercase; } .st-menu-open .st-menu div { opacity: 1; } .st-menu div h3 { font-weight: 400; font-size: .8125rem; color: #fff; letter-spacing: .3rem; margin: 60px 0 37px 40px; } .st-menu ul { padding-top: 80px; list-style: none; font-weight: 400; color: #9c9c9c; margin: 0 0 36px 40px; padding: 2px 0 7px; font-size: .625rem; letter-spacing: .2rem; } .st-menu ul li { display: block; position: relative; width: 200px; height: 40px; line-height: 40px; margin: 0 0 5px; } .st-menu ul li { display: block; position: relative; width: 100%; height: 27px; -webkit-transition: 500ms cubic-bezier(.39,.575,.565,1); -moz-transition: 500ms cubic-bezier(.39,.575,.565,1); transition: 500ms cubic-bezier(.39,.575,.565,1); color: #9c9c9c; overflow: hidden; } .st-menu ul li a:hover { text-indent: 5px; color: #fff; } .st-menu-open .st-pusher { -webkit-transform: translate3d(280px, 0, 0); transform: translate3d(280px, 0, 0); } .st-menu-open .st-content { -webkit-transform: translate3d(-140px, 0, 0); transform: translate3d(-140px, 0, 0); } .st-menu { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } .st-menu-open .st-menu { visibility: visible; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; } .st-menu::after { display: none; } .st-menu-open .st-menu { visibility: visible; -webkit-transition: -webkit-transform 0.5s; transition: transform 0.5s; } /* navigation */ /* products */ .grid { float: left; width: 100%; background: #eaeaec; list-style: none; margin: 0; padding: 50px 0px 0px 0px; overflow: hidden; } .grid li { display: block; float: left; width: 100%; overflow: hidden; -webkit-transition: background 60ms ease-in; -moz-transition: background 60ms ease-in; -ms-transition: background 60ms ease-in; -o-transition: background 60ms ease-in; transition: background 60ms ease-in; cursor: pointer; } .grid li { display: block; float: left; } .grid li img { float: left; width: 100%; -webkit-transform: translatey(50px); -moz-transform: translatey(50px); -ms-transform: translatey(50px); transform: translatey(50px); -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; } @media screen , (min-width: 560px){ .grid li { width: 50%; } } @media screen , (min-width: 1200px){ .grid li { width: 33.3333%; } } /* products */<script src="http://cardstock-test.de/js/modernizr.custom.js"></script> <div id="st-container" class="st-container"> <div class="st-pusher"> <div class="st-menu"> <div> <button id="close-button">close menu</button> <h3>menu</h3> <ul> <li><a href="index.html">feinleinen</a></li> <li><a href="index.html">bilderdruck</a></li> <li><a href="index.html">lederfaser</a></li> <li><a href="index.html">metallic</a></li> </ul> <ul> <li><a href="index.html">sonderanfertigung</a></li> <li><a href="index.html">muster bestellen</a></li> <li><a href="index.html">Über uns</a></li> <li><a href="index.html">faq</a></li> <li><a href="index.html">kontakt</a></li> </ul> </div> </div> <div class="st-content"> <div class="navbar"> <button id="menupush"> <ul class="burger"> <li></li><li></li><li></li> </ul> <span>menu</span> </button> </div> <ul class="grid" id="grid"> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a></li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a></li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a></li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a></li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a></li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a></li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a></li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a></li> </ul> </div> </div> </div> <script src="http://cardstock-test.de/js/classie.js"></script> <script src="http://cardstock-test.de/js/sidebareffects.js"></script>
if want have element stay stationary when page scrolled, need use position:fixed, not absolute. however, shouldn't place fixed element inside scrolling element, because can cause unexpected behaviour on mobile browsers. also, script opening menu seemed unnecessarily complicated.
i suggest following: give each element styling want them have when menu closed. then, give elements need change when element opens modified rules , make them apply when have specified class, "menuopen". use javascript toggle class on or off on elements need change.
i changed structure of page little bit: content inside article, top-bar inside header, menu inside nav , there's div#darken element create darkening effect when menu open. each of these elements class menuopen when click on menu , class removed when click close.
$("header").click(openmenu); $("#close-button,#darken").click(closemenu); function openmenu() { $("article,nav,header,#darken").addclass("menuopen"); } function closemenu() { $("article,nav,header,#darken").removeclass("menuopen"); }/* new stuff */ header { position:fixed; top:0; left:0; width:100vw; height:50px; background-color:white; padding:0; padding-left:10px; line-height:50px; transition:left .5s; } header.menuopen { left:140px; } #darken { height:100vh; width:100vw; position:fixed; top:0; left:100vw; background-color:black; opacity:0; transition:opacity .5s; } #darken.menuopen { left:0; opacity:.5; } article { position:fixed; top:50px; left:0; height:calc(100vh - 50px); width:100vw; transition:left .5s; overflow-y:auto; } article.menuopen { left:140px; } nav { position:fixed; left:-280px; top:0; height:100vh; width:280px; background-color:#1d1d1f; transition:left .5s; overflow-y:auto; } nav.menuopen { left:0; } /* old , less relevant stuff */ body { font-family:arial; } .burger { display:inline-block; padding:0; margin:0 10px 0 0; vertical-align:middle; } .burger li { width: 18px; height: 2px; background: #444; margin: 3px 0; list-style: none; } header span { vertical-align:middle; } #close-button { width: 16px; height: 16px; position: absolute; right: 20px; top: 18px; overflow: hidden; text-indent: 16px; border: none; z-index: 1001; outline: none; background: transparent; color: transparent; cursor: pointer; } #close-button::before, #close-button::after { content:''; position: absolute; width: 2px; height: 100%; top: 0; left: 50%; background: #9c9c9c; } #close-button::before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } #close-button::after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #close-button:hover::before, #close-button:hover::after { background: #fff; } .st-menu * { opacity: 0; -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out; -o-transition: 1s ease-in-out; transition: 1s ease-in-out; text-transform: uppercase; } .st-menu.menuopen * { opacity: 1; } .st-menu h3 { font-weight: 400; font-size: .8125rem; color: #fff; letter-spacing: .3rem; margin: 60px 0 37px 40px; } .st-menu ul { padding-top: 80px; list-style: none; font-weight: 400; color: #9c9c9c; margin: 0 0 36px 40px; padding: 2px 0 7px; font-size: .625rem; letter-spacing: .2rem; } .st-menu ul li { display: block; position: relative; width: 200px; height: 40px; line-height: 40px; margin: 0 0 5px; } .st-menu ul li { display: block; position: relative; width: 100%; height: 27px; -webkit-transition: 500ms cubic-bezier(.39, .575, .565, 1); -moz-transition: 500ms cubic-bezier(.39, .575, .565, 1); transition: 500ms cubic-bezier(.39, .575, .565, 1); color: #9c9c9c; overflow: hidden; } .st-menu ul li a:hover { text-indent: 5px; color: #fff; } /* of own stuff */ .grid { float: left; width: 100%; background: #eaeaec; list-style: none; margin: 0; padding: 0; overflow: hidden; } .grid li { display: block; float: left; width: 100%; overflow: hidden; -webkit-transition: background 60ms ease-in; -moz-transition: background 60ms ease-in; -ms-transition: background 60ms ease-in; -o-transition: background 60ms ease-in; transition: background 60ms ease-in; cursor: pointer; } .grid li { display: block; float: left; } .grid li img { float: left; width: 100%; -webkit-transform: translatey(50px); -moz-transform: translatey(50px); -ms-transform: translatey(50px); transform: translatey(50px); -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; } @media screen , (min-width: 560px) { .grid li { width: 50%; } } @media screen , (min-width: 1200px) { .grid li { width: 33.3333%; } }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header> <ul class="burger"> <li></li> <li></li> <li></li> </ul><span>menu</span> </header> <article> <ul class="grid" id="grid"> <li> <a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> <li><a href="/test.html"><img src="http://cardstock-test.de/products/classic.png" alt="img04"></a> </li> </ul> </article> <div id="darken"></div> <nav class="st-menu"> <button id="close-button">close menu</button> <h3>menu</h3> <ul> <li><a href="index.html">feinleinen</a> </li> <li><a href="index.html">bilderdruck</a> </li> <li><a href="index.html">lederfaser</a> </li> <li><a href="index.html">metallic</a> </li> </ul> <ul> <li><a href="index.html">sonderanfertigung</a> </li> <li><a href="index.html">muster bestellen</a> </li> <li><a href="index.html">Über uns</a> </li> <li><a href="index.html">faq</a> </li> <li><a href="index.html">kontakt</a> </li> </ul> </nav>i hope looking for.
Comments
Post a Comment