Jump to content

Needing Help on Styling the Responsive Menu


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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...