- This topic is empty.
-
AuthorPosts
-
October 28, 2013 at 3:47 pm #154397josephmartinsParticipant
I’m stumped. I’ve apparently coded myself into a corner with the way I’ve structured this menu
I cobbled together a CSS menu that slides in from the right side of the screen using tranformations. I’m using it in combination with a vertical scrolling responsive site. The intent is to make the entire menu (button and list) sticky.
I fixed the position of the menu button (“showmenu”) but I’ve not been able to get the list to remain fixed no matter what I have tried. Instead the list scrolls up with the rest of the site. So if I scroll down a bit and click the menu button the panel still slides out from the right but the list is above and off the screen.
Here’s the relevant HTML:
<div class="interface"><div class="site-panel"> <div id="panelClose"><i class="icon-remove"></i></div> <section class="nav" role="main-navigation"> <ul> <li class="active"><a href="#videos1">A</a></li> <li><a href="#videos2">B</a></li> <li><a href="#videos3">C</a></li> <li><a href="#videos4">D</a></li> <li><a href="#videos5">E</a></li> <li><a href="#videos6">F</a></li> <li><a href="#videos7">G</a></li> <li><a href="#videos8">H</a></li> <li><a href="#videos9">I</a></li> <li><a href="#videos10">J</a></li> <li><a href="#videos11">K</a></li> </ul> </section> </div><!-- site-panel --><div class="headerwrapper stuck"> <header role="banner"> <div id="showMenu"> <a href="#">Menu </a> <a href="#" class="burger"><i class="icon-reorder"></i></a> </div> </header>
And the relevant CSS:
.site-panel { position: absolute; top: 0; width: 218px; z-index: -20; } #panelClose { color: white; position: absolute; right: 18%; top: 6%; } @media (min-width: 767px) { #panelClose { right: 6%; } } .headerwrapper { height: 55px; position: absolute; width: 100%; z-index: 9999; } .headerwrapper header { position: absolute; width: 100%; padding: 1.2em 0; } .burger { padding-left: 5px; display: inline-block; } #showMenu { background: transparent; position: fixed; right: 6%; padding: .5em 1%; text-transform: uppercase; font-size: .875em; font-weight: 600; } @media (min-width: 1024px) { #showMenu { background: #222222; } } #showMenu a { text-decoration: none; } #showMenu a { font-size: 1.25em; color: white; display: inline-block; vertical-align: text-top; } .surface { overflow-x: hidden; position: relative; left: 0; -webkit-transition: all .6s ease-in-out; -moz-transition: all .6s ease-in-out; -ms-transition: all .6s ease-in-out; -o-transition: all .6s ease-in-out; transition: all .6s ease-in-out; } .site-panel { right: 0; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .surface.nav-show { -webkit-transform: translateX(-230px); -moz-transform: translateX(-230px); -ms-transform: translateX(-230px); -o-transform: translateX(-230px); transform: translateX(-230px); } @media (min-width: 767px) { .surface.nav-show { -webkit-transform: translateX(-270px); -moz-transform: translateX(-270px); -ms-transform: translateX(-270px); -o-transform: translateX(-270px); transform: translateX(-270px); } } .nav-show .site-panel { -webkit-transform: translateX(250px); -moz-transform: translateX(250px); -ms-transform: translateX(250px); -o-transform: translateX(250px); transform: translateX(250px); -webkit-transition-delay: .2s; -moz-transition-delay: .2s; -ms-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s; /* Safari */ } @media (min-width: 767px) { .nav-show .site-panel { -webkit-transform: translateX(250px); -moz-transform: translateX(250px); -ms-transform: translateX(250px); -o-transform: translateX(250px); transform: translateX(250px); } } .nav ul { list-style: none; padding-left: 0; padding-top: 0.5em; } .nav ul li { color: #999999; margin: 0.5em 0; } .nav ul li a { color: inherit; text-decoration: none; } .nav ul li.active, .nav ul li:hover { color: white; }
October 29, 2013 at 2:56 pm #154519josephmartinsParticipantThank you very much for taking the time to show me another technique. I appreciate it.
I’ve been experimenting with your code in an attempt to remove JS from the solution (I was hoping to accomplish what I need with just CSS) but I’ve been unsuccessful. Still, I’m glad I at least have something to work with. Thanks again!
November 10, 2013 at 4:24 am #154403josephmartinsParticipantIdeally, I hope to implement this menu such that:
- as I scroll the page the menu remains available to the right, and
- when I mouse over the page and swipe or scroll down the menu it doesn’t disappear.
Right now, not only does it not remain fixed to the right, but when I mouseover and gesture to pan down the menu (since it is longer than the display height) it disappears
April 28, 2018 at 3:45 am #270346AtelierbramParticipantFive years ago but forgotten
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.