Slide in menus?

User 2846109 Photo


Ambassador
331 posts

What's the best way to do slide in menus similar to the foundation example on this page:
http://framer.coffeecup.com/tips/index.html#tip_016

Thanks!
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 2846109 Photo


Ambassador
331 posts

Actually the 'side nav full width' menu is what I'm looking for as shown on this page as well. Not sure if there's a way to visually build this in RBB.

http://www.w3schools.com/howto/howto_js_sidenav.asp
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 232214 Photo


COO
820 posts

Jeff wrote:
What's the best way to do slide in menus similar to the foundation example on this page:
http://framer.coffeecup.com/tips/index.html#tip_016

Thanks!


Well....Bootstrap does not have The Toggler you are linking too, which makes this a lot harder to do in Bootstrap. I guess hand-coders add in JS libraries to do this...

I expect we will have a solution for this in one of the next builds, stay tuned :cool:

btw: the link in the second post does not work
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 2846109 Photo


Ambassador
331 posts

ok, thanks Bob! I'm researching some things but I'm really curious to see what you guys come up with.

yeah, for some reason w3schools is down right now.... strange....
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 2846109 Photo


Ambassador
331 posts

OK, so this is pretty much what I'd like to add to a RBB project. I haven't started trying to put this in yet but if anyone has any tips feel free to chime in! Thanks!

http://codepen.io/JeffrySG/pen/JRZXAv
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 2846109 Photo


Ambassador
331 posts

Here's the code split up if that's easier:
http://codepen.io/JeffrySG/pen/YGRGLE

So I'm guessing that this JS should go into the footer section of the page settings?
function openNav() {
document.getElementById("myNav").style.height = "100%";
}

function closeNav() {
document.getElementById("myNav").style.height = "0%";
}


I'm not sure how to apply this to the close X in the menu. Do I just need to apply the 'onclick="closeNav()' to the X? and how?
<a href="nojavascript...void(0)"class="closebtn" onclick="closeNav()">&times;</a>


or how to apply this to the main MENU link. Again, I'm guessing just need to apply the 'onclick="openNav()' code to the MENU link?
<span style="font-size:30px;cursor:pointer" onclick="openNav()"><b>? MENU</b></span>


It seems like everything else would just be applying the correct classes and IDs to the correct elements? Or am I missing something? (I'm probably missing something!)
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 2846109 Photo


Ambassador
331 posts

Do those onclick elements need to apply into an attribute setting or into the href box?

OK, time to take a break after 3hrs. :)
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 2846109 Photo


Ambassador
331 posts

OK, getting closer... just trying to get the positions working correctly!
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 232214 Photo


COO
820 posts

Jeff wrote:
OK, so this is pretty much what I'd like to add to a RBB project. I haven't started trying to put this in yet but if anyone has any tips feel free to chime in! Thanks!

http://codepen.io/JeffrySG/pen/JRZXAv


Pretty sure you can do that with a Bootstrap Modal.
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.