Jump to content

Needing Help on Styling the Responsive Menu


mtechama

Recommended Posts

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 by mtechama
Link to comment
Share on other sites

  • 1 month later...

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>
	

Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...