mtechama Posted February 10, 2017 Share Posted February 10, 2017 (edited) Yes, I am still using this menu for the mobile and tablet layout! http://www.w3schools.com/howto/howto_js_topnav.asp I would like to know how to do the following: I don't want a menu bar all the way across the screen on mobile and tablet layout. I want to do a slide from the side of the screen on mobile and tablet layout. Thanks. Edited February 10, 2017 by mtechama Link to comment Share on other sites More sharing options...
mtechama Posted March 15, 2017 Author Share Posted March 15, 2017 I still needing some help. When I ask for some help I never got helped. What I am trying to do is I want the menu slide from the left to right when clicked. I asked for help to what code to change I got ignored. Link to comment Share on other sites More sharing options...
davej Posted March 15, 2017 Share Posted March 15, 2017 Your question is too vague. A "menu slide" could mean many different things. Link to comment Share on other sites More sharing options...
mtechama Posted March 18, 2017 Author Share Posted March 18, 2017 Ok, I have the code on the bottom. I have it a drop down menu. What I want is to have the menu slide from the left to right. So what code is need to be changed or added to take an effect? Menu Code: <div class="topnav" id="myTopnav"> <a href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> <a href="javascript:void(0);" class="icon" onclick="myFunction()">☰</a> </div> Link to comment Share on other sites More sharing options...
davej Posted March 18, 2017 Share Posted March 18, 2017 For a responsive menu the normal need is for a vertical stacked menu such as... https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav Link to comment Share on other sites More sharing options...
dsonesuk Posted March 18, 2017 Share Posted March 18, 2017 I've been through this already, in great detail, but this topic was lost when upgrade was preformed, he wants the mobile menu not to appear instantly, but to slide from nothing from left to right. I explain he had 2 options 1) Reduce width of all anchor links to 0 but home and hamburger, and increase to 100% width on hover or click using css3 transition: 2) Force all menu anchor links outside beyond left edge of browser, but again not! home and hamburger, using positioning or css3 transform: translateX(); then make whole menu link come back into view (left: 0; translatex(0)) on hover or click using css3 transition: again! He want you to do it ALL for him/her. Link to comment Share on other sites More sharing options...
dsonesuk Posted March 19, 2017 Share Posted March 19, 2017 These are the elements you need to target .topnav.responsive a:first-child ~ a:not(:last-child) { } Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now