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

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??

2 Answers

Colin Marshall
Colin Marshall
32,861 Points

One 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');
});
Jonny Strange
Jonny Strange
6,412 Points

Colin, I'm still having trouble toggling mobile navigation on/off - can you help me please. Here's my code; html

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta charset="utf-8">
<meta name="author" content="Jonny Strange" />
<title>Jonny Strange | A up and coming web designer</title>
<meta name="description" content="Hi, Jonny Strange and I'm a up and coming web designer" />

<!-- Favicons -->
<link rel="icon" type="image/x-icon" href="../favicon.ico">

<!-- Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>

<!-- FontAwesome -->
<link rel="stylesheet" href="css/font-awesome.min.css">

<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/grid.css">
<link rel="stylesheet" type="text/css" href="css/layout.css">
</head>

<body>
    <div id="wrapper">
      <header id="main-header" role="banner"><!-- Start: #header -->
          <div id="header-cover"><!-- Start: #header-cover -->
              <div id="header-title"><!-- Start: #header-title -->
                  <h1>Jonny Strange</h1>
                  <p><span>Interm Web Designer</span></p>
               </div><!-- End: #header-title -->
              </div><!-- End: #header-cover -->
              <nav class="nav" id="navigation" role="navigation">
                  <div class="row">
                      <div class="column3">
                          <a id="logo" href="index.html">
                                  Jonny Strange
                         </a>
                      </div>
                      <div class="column9">
                        <a class="mobile-menu-toggle" id="mobile-nav-trigger" href="#">
                            <i class="fa fa-bars"></i>
                         </a>
                        <ul class="mobile-menu" id="main-menu">
                          <li class="selected"><a href="#personal-profile">Personal Profile</a></li>
                             <li><a href="#skills">Skills</a></li>
                             <li><a href="#work-experience">Work Experience</a></li>
                             <li><a href="#education">Education</a></li>
                             <li><a href="#portfolio">Portfolio</a></li>
                             <li><a href="#contact">Contact</a></li>
                          </ul>
                    </nav>
                </div>
           </div>
      </header>
      <section id="personal-profile">
          <div class="row">
              <div class="column12 center-text">
                  <div class="headline">
                      <p>
                          <span>Who am I?</span>
                      </p>
                      <h1>Personal Profile</h1>
                  </div>
             </div>
         </div>
         <div class="row">
            <div class="column3">
                <img class="responsive-img" src="img/profile-photo.jpg" alt="Jonny Strange Profile Photo">
            </div>
         </div>
            <a class="back-to-top" href="#main-header">Back to Top</a>
      </section>
      <section id="skills">
        <div class="row">
            <div class="column12 center-text">
              <div class="headline skills">
                  <h1>Skills</h1>
              </div>
           </div>
           <a class="back-to-top" href="#main-header">Back to Top</a>
        </div>
      </section>
      <section id="work-experience">
         <div class="row">
            <div class="column12 center-text">
              <div class="headline work-experience">
                  <h1>Work Experience</h1>
              </div>
            </div>
          </div>
            <a class="back-to-top" href="#main-header">Back to Top</a>
      </section>
      <section id="education">
        <div class="row">
            <div class="column12 center-text">
              <div class="headline education">
                  <h1>Education</h1>
              </div>
            </div>
         </div>
            <a class="back-to-top" href="#main-header">Back to Top</a>
      </section>
      <section id="portfolio">
        <div class="row">
            <div class="column12 center-text">
              <div class="headline portfolio">
                  <h1>Portfolio</h1>
              </div>
            </div>
          </div>
          <a class="back-to-top" href="#main-header">Back to Top</a>
      </section>
      <section id="contact" role="contentinfo">
        <div class="row">
            <div class="column12 center-text">
              <div class="headline contact">
                  <h1>Contact</h1>
              </div>
            </div>   
          </div>
          <a class="back-to-top" href="#main-header">Back to Top</a>
      </section>
      <footer id="main-footer">

      </footer>
   </div>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
     <script>
        (function () {
            var mobile = $('nav');
        $('.mobile-menu-toggle').click(function() {
            mobile.toggleClass('mobile-menu-open');
        });
        });
        var viewportHeight = window.innerHeight;
        var viewportWidth = window.innerWidth;
        var screenHeight = window.outerHeight;
        var screenWidth = window.outerWidth;

        resultViewport = '<p><h1>Viewport size: ' + viewportWidth + 'x' + viewportHeight + '</h1></p><br>';
        console.log(resultViewport);
     </script>
</body>
</html>
/*

Name: layout.css
Date: 19/03/15
Version: 1.0
Author: Jonny Strange

---------------------

Table of Contents

General Styles
    body
    section
    img

Layout Styles
    #wrapper
    #main-header
    #main-cover
    #header-title
    #header-title h1
    #header-title p
    #header-title p span
    #logo


    #headline
    #duties

/*****************************************************************
                    BODY STYLES
******************************************************************/
body
{
    font-family: Helvetica, sans-serif;
}

a
{
    text-decoration: none;
}

section 
{
    position: relative;
    margin-bottom: 1em;
}

img
{
    max-width: 100%;
}

.center-text {text-align: center;}

/*****************************************************************
                    HEADER STYLES
******************************************************************/
#wrapper
{

}
#main-header
{

}

#header-cover
{
    height: 12rem;
    background-image: url('../assets/bg-cover-small.jpg');
    max-width: 100%;
}


#header-cover
{
    background-color: #0f0d0d;
    -webkit-background-size: cover;
            background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#header-title
{
    position: relative;
    display: inline-block;
    font-family: 'Kaushan Script', cursive;
    color: #1f268e;
    font-size: 1em;
    font-style: normal;
    text-align: center;
    margin: 3.3em 0 0 2.3em;
    border: 3px solid #1f268e;
}

#header-title h1
{
    margin: 0 0.2em 0.4em;
    padding: 0;
}

#header-title p
{
    position: absolute;
    padding: 0;
    top: 2.1rem;
    left: 0;
    right: 0;
    font-family: Helvetica, sans-serif;
}

#header-title p span
{
    padding: 0;
    background: rgba(15, 13, 13, .7);   
}

#logo
{
    height: 2.5em;
    margin: 0;
    padding: 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
    display: inline-block;
    background: #0f0d0d;
    color: #fff;
    font: 1em Helvetica, sans-serif;
    text-decoration: none;
    text-transform: uppercase;
}

/*****************************************************************
                    NAVIGATION & MOBILE NAVIGATION STYLES
******************************************************************/
#navigation
{
    margin: 0;
    padding: 0;
    margin-bottom: 2em;
    border-top: 1px solid #AC5104;
    border-bottom: 1px solid #AC5104;
}
#main-nav,
.mobile-menu
{
    width: 15.5em;
    margin: 0;
    padding: 0;
    list-style-type: none;
    border: 1px solid #000;
}

#main-menu li
{
    width: 15.5em;
    margin: 0;
    padding: 0;
    border: 1px dotted red; 
}

.back-to-top
{
    margin-left: 12.6em;
    color: #0f0d0d;
}

/* Mobile */
#mobile-nav-trigger
{
    margin-left: 6.6em;
    font-size: 2rem;
    padding: 10px;
    border: 1px solid #1f268e;
    appearance: button;
    clear: both;
}

.mobile-menu-closed
{
}

.nav-menu
{
    position: relative;
}

/*****************************************************************
                    NAVIGATION ACHORS STYLES
******************************************************************/
a,
alink {color: #1F268E;}
a:visited {color: #0f0d0d;}
a:hover {background: #ac5104; color: #0f0d0d;}




/*****************************************************************
                    HEADER BREAKPPOINTS
******************************************************************/
@media screen and (min-width: 480px)
{
    #main-header #header-cover
    {
        height: 15rem;
        margin: 0;
        background-image: url('../assets/bg-cover-medium.jpg');
        max-width: 100%;
    }

    #header-title
    {
        margin: 4.5em 0 0 7.8em;
    }

    #logo
    {
        margin-left: -1.5em;
        width: 9.5em;   
    }


    #mobile-nav-trigger
    {
        margin-top: 12em;
    }   

}

/*****************************************************************
                    HEADLINE & DUTIES STYLES
******************************************************************/
.headline
{
    position: relative;
    display: inline-block;
    border: 1px solid;
    padding: 0.3em;
    text-align: center;
    color: #0f0d0d;
}

.headline h1
{
    margin: 0;
    padding: 0; 
}

.headline p
{
    position: absolute;
    top: -25px;
    left: 0;
    right: 0;
}

.headline p span
{
    padding: 0 1em;
    background: #fff;
}

.skills
{
    padding: 0 5.2em;   
}

.work-experience h1
{
    font-size: 1.9em;   
}

.education
{
    padding: 0 3.1em;   
}

.portfolio
{
    padding: 0 3.9em;   
}

.contact
{
    padding: 0 4.3em;   
}

/*****************************************************************
                    SECTIONS BREAKPOINTS
******************************************************************/
@media screen and (min-width: 480px)
{
    section
    {
        border: 3px dashed green;   
    }

    .responsive-img
    {
        border: 2px dotted pink;    
    }

    .back-to-top
    {
        margin-left: 17em;
    }   


}
/*
Pacifico|Courgette

font-family: 'Pacifico', cursive;
font-family: 'Courgette', cursive;
style="background-image: url(assets/img/bg-cover.JPG)"
text color #1f268e;
background color: #0f0d0d
{
    background: url('../assets/bg-cover-large.jpg');    
}

#header-cover-xdesktop
{
    background: url('../assets/bg-cover-xlarge.jpg');   
}


#header-cover-retina
{
    background: url('../assets/bg-cover.jpg');  
}

*/
Colin Marshall
Colin Marshall
32,861 Points

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

Thanks 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
Colin Marshall
32,861 Points

Great! 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!