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
Jonny Strange
6,412 PointsMobile 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??
2 Answers
Colin Marshall
32,861 PointsOne way to do mobile navigation is to have the menu look collapsed initially in your CSS. Then you have another class called something like ".is-menu-open" which is what the menu should look like when it is opened. It will override the menu's initial collapsed CSS.
You can use jQuery's toggleClass method to add or remove the ".is-menu-open" when the menu icon is clicked. That would look something like this:
$('.menu-icon').click(function() {
$('.menu').toggleClass('is-menu-open');
});
Colin Marshall
32,861 PointsChange your jQuery menu code to:
toggle = $('.mobile-menu-toggle');
mobile_menu = $('.mobile-menu');
toggle.click(function() {
mobile_menu.toggleClass('mobile-menu-closed');
});
In your html, add the class mobile-menu-closed to the ul like this:
<ul class="mobile-menu mobile-menu-closed" id="main-menu">
Then in your CSS:
.mobile-menu-closed {
display: none;
}
Jonny Strange
6,412 PointsThanks Colin it's working. I've got another problem I can't move the mobile navigation button up, I tried margin-top, top etc but it doesn't move. Any suggestions?? Colin, I've uploaded it to my domain http://www.jstrange.co.uk/testsite/index.html , you should have access to grid.css or here's it is: /*
Name: grid.css Date: 15/03/15 Version: 1.0 Author: Jonny Strange
Table of Contents
Responsive Screens #Small Screens #Medium Screens #Medium-Large Screens #Large Screens Responsive Images #responsive-img
/***************************************************************** SMALL SCREENS ******************************************************************/ .row { height: 100%; margin: 0 auto; padding: 0 30px; max-width: 100%; }
.column1, .column2, .column3, .column4, .column5, .column6, .column7, .column8, .column9, .column10, .column11, .column12 { width: 100%; }
.column1:first-child, .column2:first-child, .column3:first-child, .column4:first-child, .column5:first-child, .column6:first-child, .column7:first-child, .column8:first-child, .column9:first-child, .column10:first-child, .column11:first-child, .column12:first-child { margin-left: 0; }
.visible-phone { display: none !important; } .visible-tablet { display: none !important; } .hidden-desktop { display: none !important; } .visible-desktop { display: inherit !important; } /***************************************************************** MEDIUM SCREENS ******************************************************************/ @media screen and (min-width: 480px) { .row { width: 470px; }
.column1
{
width: 20px;
}
.column2
{
width: 60px;
}
.column3
{
width: 100px;
}
.column4
{
width: 140px;
}
.column5
{
width: 180px;
}
.column6
{
width: 220px;
}
.column7
{
width: 260px;
}
.column8
{
width: 300px;
}
.column9
{
width: 340px;
}
.column10
{
width: 380px;
}
.column11
{
width: 420px;
}
.column12
{
width: 460px;
}
.column1,
.column2,
.column3,
.column4,
.column5,
.column6,
.column7,
.column8,
.column9,
.column10,
.column11,
.column12
{
margin-left: 10px;
float: left;
}
} /***************************************************************** MEDIUM-LARGE SCREENS ******************************************************************/
/***************************************************************** LARGE SCREENS ******************************************************************/
/***************************************************************** CLEARING ******************************************************************/
.row:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
/**
* Clear Fix hack
* Usage: add class="fixed" to div's that have floated elements in them
*/
.fixed:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
/**
* Clear content
* Usage: <br class="clear">
*/
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/***************************************************************** RESPONSIVE IMAGES ******************************************************************/ .responsive-img { height: auto; max-width: 100%; margin-top: 0.8em; }
Colin Marshall
32,861 PointsGreat! I had to throw your code into a codepen so I could play around with it. I didn't have your grid.css so it looked messed up. Can you provide me with that so I can get your site looking proper? Then I will take a look at the mobile nav button. Thanks!
Jonny Strange
6,412 PointsJonny Strange
6,412 PointsColin, I'm still having trouble toggling mobile navigation on/off - can you help me please. Here's my code; html