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

Design

Jonny Strange
Jonny Strange
6,412 Points
Posted by Jonny Strange
Jonny Strange
6,412 Points

Trying 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
Kaetlyn McCafferty
12,193 Points
Kaetlyn McCafferty
Kaetlyn McCafferty
12,193 Points

Are 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 &#9776 ☰

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
Jonny Strange
6,412 Points
Jonny Strange
Jonny Strange
6,412 Points

Hi 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
Kaetlyn McCafferty
12,193 Points
Kaetlyn McCafferty
Kaetlyn McCafferty
12,193 Points

Jonny 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:

<script type="text/javascript">
jQuery(document).ready(function($) {
    $("#menu").hide();
    $(".menutoggle").click(function() {
        $("#menu").slideToggle(500);
    });
});
</script>

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.