Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Maja B.
Maja B.
12,984 Points

dropdown menu

HI, I'm tying to build a navigation for my site that would:

  1. Be centred and evenly spread. By that I mean the functionality that I would get if I used display:flex, justify-content: space-between and flexgrow: 1 (its all from the video Flexbox and Multicolumn Layout from the CSS Foundations course).

  2. Have a drop down (one stage).

  3. Be responsive so that when on small devices the hamburger icon would appear.

I've been trying many things:

  1. I've tried to customize the Foundations 5 navigation. I've searched on forums, tried to change the code. But I cannot seem to get anywhere. Whenever I find some trick to centre the Fondations 5 default navigation, there arises the problem with responsiveness (the hamburger icon)

  2. Then I say to myself let's build the navigation from scratch by using flexbox - but here I don't know how to make a drop down functionality. Besides I'm not sure weather I would like to use flex as it's not supported by older browsers.

I'm moving in circles and I cannot find the way out :)

What would you do? How do you build navigations? Is there some good tutorial about it. I've found wonderful tutorials on the internet but none of them includes all the three functionalities that I would like to have.

4 Answers

geoffrey
geoffrey
28,736 Points

Keep working on this, and I'm sure you'll manage to do what you want. I've lately done something similar. It's not really difficult, you just need to know how to achieve it, how to plan it.

I'm going to try to answer your questions one by one.

1) If you need some inspiration to get your menu well centered with the links well centered, I suggest you to have a look at this http://codepen.io/Azuk/pen/DoCxk, that's something I played with some weeks ago. It could help you.

2) For your drop down menu, If I see clearly what you need, I would use Jquery, I know there is a good exemple of the way to achieve it on the code academy website which is free . Inside the "Make interactive website course". Basically, you just need to toggle/show, the content of the dropdown menu when the click event on the targeted links occurs.

3) For the hamburger icon, It's all about playing with media queries and html, you need to have inside your HTML two separated containers, one with your mobile menu you 'll style and another one for your desktop menu. Then you need to tell for exemple to the browser that if the width of the screen is less than 640px as an exemple, you hide the mobile menu and instead you display the desktop menu & vice versa. Basically you just have to play with the display property in CSS and media queries. I think that could be the first step for you, create two menu and display them according the viewport with media queries.

If I remember well, there is in the javascript library, inside the Jquery basic, an exemple on how to build a basic responsive menu, you can as well check this link if you haven't visited it yet => http://www.hongkiat.com/blog/responsive-web-nav/

Hope it helps.

Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

Hi, geoffrey,

I've read your massage and been on all the thee pages you suggest ... even done half of the course Make Interactive course at Codecademy.

But I still did not really manage to put all the three things together.

Actually, in the meantime I've found one WP theme, called Pho, which has exactly the menu I would like to have and now I have the plan to analyse that code, use also your hints and somehow build that drop down menu ...

Thank you! Maja

Craig Watson
Craig Watson
27,930 Points

Hi Maja,

Have you come across a good solution to this ? I think I'm on the same lines...

Building a menu with flexbox was so simple and the responsive styling it gives is great but I'm at a wall trying to create the dropdown with it?

Any advice or if you can pint me in the direction of something helpful I'd be very happy!

Thanks Craig

Maja B.
Maja B.
12,984 Points

No, actually I did not. Eventually I've installed a WordPress Pho theme. Its a new one. I've found it by chance. It has just the menu I needed (but many many other WordPress themes have it, too) and as it is a very simple theme and developed from _s (are you familiar with that? underscores.me - a WordPress starting theme) I had a plan to carefully inspecting its style.css and learn how that guy (developer of a Pho theme) made that dropdown menu. That could have been dome on any theme, in my case I had a plan to use Pho. But I must admit that I did not succeed in this jet. Not that it would be too difficult but I did not invested enough time in it.

Please, keep me posted if you find something useful about it.

Maja

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Maja!

I think I'm nearly there with no JS at all, would you mind taking a look over my css to take out anything not needed as ive been on this a while finding the correct selectors etc.

Hope this is getting us closer using flex-box and a fully fluid design !!

http://codepen.io/Craig-Watson/full/ByjObG/

hope you like it! I cant wait to tweek it and and put the contact dropdown on mobile width too

Craig

Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

Hi, Craig,

Yesterday I've had a very quick look at the link you are sending. I have seen the menu and submenues and even the contact form opening when hovering on the last item.

But today - I was going to have a closer look at CSS as you ask - I see something completely different. The unstyled menu with a checkbox. Are you working on something and your yesterday's content has changed. Or am I doing something wrong.

In any case, thanks for your effort! And nice to count on my css knowledge :)) hopefully I will be able to help you.

Maja

Craig Watson
Craig Watson
27,930 Points

Hi Maja,

Apologies for the confusion, yes this is something i am currently working on, the way it worked was a hack on a check-box to drop down the menu at mobile width. I did a little more research and it seemed this was not a great option for what i was looking to create.

I will say that using flex-box , with space-between for the nav etc. is brilliant and i will certainly be continuing my research into layout with flex-box.

After may forum postings and reading of blogs it seems the best and most semantic way to create what we are after is with the use of some JavaScript which i am not familiar with as yet. The only way to do this with simply css is a hack and it look really ugly in the ode ...

Ill drop a comment on here when ive got to the bottom of this as I have a nice menu coming together that will be ready to copy and paste straight of codepen !

Craig

Craig Watson
Craig Watson
27,930 Points

Hi Maja,

Getting a little closer but jQuery has to be used to enable the click function for mobile devices! all spacing is using flexbox, lots of work still to do but any suggestions as welcome as there is a little bug ....

when the page loads and you scale down browser window the menu is open, so if going directly to the site the menu would be open (not that big of a deal but not what i want also ifyou close the menu and scale up browser window the menu vanishes....

http://codepen.io/Craig-Watson/pen/MYyXMJ

flexbox is working lovely though and positions work great, please ignore styles for now any input appreciated!

Thanks Craig