Needing Help on Styling the Responsive Menu

[mtechama 0]

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

[mtechama 0]

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.

[davej 251]

Your question is too vague. A "menu slide" could mean many different things.

[mtechama 0]

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()">&#9776;</a>
</div>
	

[davej 251]

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

[dsonesuk 913]

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.

[dsonesuk 913]

These are the elements you need to target

.topnav.responsive a:first-child ~ a:not(:last-child)
{

}