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 trialJonny Strange
6,412 PointsTrying to make mobile navigation
I'm designing a portfolio site for myself, based on this template http://themeforest.net/item/versus-resume-responsive-cv-template-bonuses/full_screen_preview/8038629?ref=freshdesignweb. I want to create a mobile navigation menu from scratch but I'm a bit unsure how to associate the menu with the trigger (link or button). Any ideas?? Also, is there lists of the HTML5 data and attributes and aria attributes explaining what they do ans the syntax??
1 Answer
Kaetlyn McCafferty
12,193 PointsAre you talking about the three-line menu navicon aka the "hamburger" icon? I think you have a few different options for approaching this.
1.) Upload your own image/graphic to use as a button.
2.) Use a typeface/font that has a three-bar-hamber-icon-looking-symbol in it, such as icomoon, font awesome, or the unicode character ☰ ☰
3.) Create one using CSS. Take a look at the following links:
https://css-tricks.com/three-line-menu-navicon/
http://www.elijahmanor.com/css-animated-hamburger-icon/
Once you figure out which way works best for you / your project, then apply it how you'd like - if you only want it to appear on the mobile version, using a media query is the way to go!
Jonny Strange
6,412 PointsJonny Strange
6,412 PointsHi Kaetlyn, I want to design a mobile navigation menu, when the user toggles the 3 bars icon the menu opens and closes. I'm unsure how to do this without Javascript (at least a bit). Any Ideas??
Kaetlyn McCafferty
12,193 PointsKaetlyn McCafferty
12,193 PointsJonny Strange, ideally you'd use a bit JS, or jQuery for that. It should be simple enough. Let's say your mobile menu has an ID of #menu, and the icon you're using to hide/display it (say, a div, image, button, etc) has an ID of #menutoggle You can load the jQuery into your html document easily enough in the head, and then use something like this, right in the html, to show and hide the menu when the icon is clicked:
or if you don't want the jQuery code IN your html file, just load the jQuery into your header, and write the code in a separate file, making sure you link that file in.
Regarding doing it WITHOUT JS/jQuery, I'm not entirely sure. There probably IS a way to do it, but this is the first thing (and seemingly easiest) that comes to mind.