mtechama

Needing Help on Styling the Responsive Menu

7 posts in this topic

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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>
	

Share this post


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.

Share this post


Link to post
Share on other sites

These are the elements you need to target

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

}

 

Share this post


Link to post
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