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!

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

HTML

Posted by Gabriel E
Gabriel E
8,916 Points

No luck on collapsible menu navbar? Any ideas?

For the last couple weeks, I've been working on the responsive navbar for the mobile side of my site. I'm not that familiar with incorporating Bootstrap, so I'd like to make it with just CSS, HTML, JS or maybe some jQuery as well. My idea is to have a button that I can click, when my media query reaches a certain size, then a sort of semi-translucent menu slides out from the left side. I'd like to create an off-canvas design, so the menu slides out with out moving the body content around. Any suggestions or links would be really appreciated. Thanks, G

1 Answer

Steven Parker
Steven Parker
225,742 Points
Steven Parker
Steven Parker
225,742 Points

:point_right: It sounds like you can do most of what you want just with CSS.

Opacity is a CSS property you can set, and positioning a menu independent of other content can be easily done with the display property set to fixed. The sliding can be done using CSS Transitions and Transforms.

Your button functionality might require a little bit of JavaScript.

Gabriel E
Gabriel E
8,916 Points

Thanks a lot for that link! It helped me get on the right path. However, I found a really good blog here: http://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/ I'm doing pretty well on getting the code converted to my own website. However, I've run into a few problems. The "Show Menu" bar stays open when I get to the screen size where it should appear, and it doesn't give me the option to click it to open, it just opens automatically. If you don't mind, could I post my code and you could see if there's any obvious problems that might be causing this? If you feel like looking through it, I'll post the 3 code files below: Thanks!

<!DOCTYPE html>
<html lang="en"> <!-- boostrap -->
    <head>
        <meta charset="utf-8">
        <title>Bulletproof Editing - Legal Proofreading, Court Reporter Proofreading</title>
        <link rel="shortcut icon" type="image/x-icon" href="img/GES.png">
        <link rel="stylesheet" href="css/normalize.css">
        <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/responsive.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- bootstrap -->
    </head>
    <body id="background">
            <header>
                <a href="index.html" id="logo">
                    <h1>BulletProof Editing Services</h1>   
                </a>
                <nav>
                    <label for="show-menu" class="show-menu">Show Menu</label>
                    <input type="checkbox" id="show-menu" role="button">
                    <ul id="menu">
                        <li><a href="index.html" class="selected">Home</a></li>
                        <li><a href="#TheDifference">The Difference</a></li>    
                        <li><a href="#TwoGuarantees">Two Guarantees</a></li>
                        <div class="dropdown">
                            <a class="dropbtn">Samples</a>
                          <div class="dropdown-content">
                            <a href="#">Proofed Without Audio</a>
                            <a href="#">Proofed Against Audio</a>
                          </div>
                        </div>  
                        <li><a href="#Testimonials">Testimonials</a></li> 
                        <li><a href="#Rates">Rates</a></li> 
                        <li><a href="#AboutTheOwner">About the Owner</a></li>
                        <li><a href="#Contact">Contact</a></li>
                    </ul>
                </nav>
            </header>
        <div id="wrapping">
            <section id="headline">
                <h2>Legal Proofreading -- <br> with a difference.</h2>
            </section>
            <section id="buttons">
                <button id="difference"><a id="blink" href="#TheDifference">The Difference</a></button>
                <button id="guarantees"><a id="blink" href="#TwoGuarantees">Two Guarantees</a></button>                <button id="samples"><a id="blink" href="#Samples">View Samples</a></button>      
            </section>
            <footer>
                <p>example email here</p>
                <p>&copy; 2016 Bulletproof Editing Services, LLC.</p>
            </footer>    
        </div>
    </body>
</html>

/************
GENERAL
************/

body {
    font-family: "Raleway", sans-serif;
}

a {
    text-decoration: none;
}

h1 {
   font-family: "Merriweather", sans-serif;
   font-size: 2.25em;
   font-weight: bold;
   line-height: 20px;
   margin-left: 19px;
   transition: 0.2s;
}

#headline { 
    font-family: "Merriweather", sans-serif;
    font-weight: normal;
    font-size: 45px;
    margin-left: 220px;
    margin-top: 90px;  
}

/************
BUTTONS
************/

#buttons {
    text-align: center;
    font-size: 16px;
    margin-top: 150px;
}

#difference {
    float: left;
    margin-left: 90px;
    padding: 15px 50px 15px 50px;
    background-color: #330202;
    border: solid 3px #fff;
    color: #fff;
}

#guarantees {
    margin-right: 5px;
    padding: 15px 50px 15px 50px;
    background-color: #000016;
    border: solid 3px #fff;
    color: #fff;
}

#samples {
    clear: right;
    float: right;
    margin-right: 100px;
    padding: 15px 45px 15px 45px;
    background-color: #001e00;
    border: solid 3px #fff;
    color: #fff;
}

#blink {
    color: #fff;
}

/************
HEADING
************/

header {
   margin-top: 30px;
   margin-left: 50px;
}

#logo {
    line-height: 18px;
}

/************
NAVIGATION
************/

nav ul {
    list-style: none;
    margin: 0 10px;
    padding: 0;
}

nav li {
    display: inline-block;
}

nav a {
    font-size: 17px;
    padding: 15px 10px;
    transition: .2s;
}







.show-menu {
    text-decoration: none;
    color: dimgray;
    background: #19c589;
    border-radius: 15px;
    text-align: center;
    padding: 10px 0;
    display: none;
}

/* hide the checkbox */

input[type=checkbox] {
    display: none;
}

/* show menu when invisible checkbox is clicked */

input[type=checkbox]:checked~#menu {
    display: block;
}


/* MEDIA SCREEN BREAKPPOINT STYLES */

@media screen and (max-width:1060px) {
    /*Create vertical spacing*/
    li {
        margin-bottom: 1px;
    }
    /*Make all menu links full width*/
    ul li, li a {
        width: 100%;
    }
    /*Display 'show menu' link*/
    .show-menu {
        display:block;
    }

    li a {
        display:block;
        min-width:140px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        color: #fff;
        background: #2f3036;
        text-decoration: none;
    }

}




/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 20px rgba(0,0,0,0.2);
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: dimgray;  
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}


/************
FOOTER
************/

footer {
    text-align: center;
    clear: both;
    padding-top: 100px;
}



/******************
COLORS & EFFECTS
******************/

body {
    background-image: url(../img/courtroom.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    color: #999;
}

h1, #headline, h3 {
    color: #fff;
}

h1:hover {
    color: #b3b3b3;
}

nav a, nav a:visited {
    color: #b3b3b3;
}

nav a.selected, nav a:hover {
   color: white;    
}

button:hover {
    text-decoration: underline;
}

```RESPONSIVE CSS CODE

@media screen and (max-width: 1060px) {

#background {
    background-image: none;
    background-color: #fff;
}

h1 {
   color: dimgray; 
}

#headline {
    color: dimgray;
    font-size: 2.75em;
    margin-left: 145px;
}

nav a.selected, nav a:hover {
    color: dimgray;    
}


/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: white;  
}


#buttons {
    text-align: center;
    font-size: 16px;
    margin-top: 150px;
}

#difference {
    float: left;
    margin-left: 90px;
    padding: 15px 50px 15px 50px;
    background-color: #330202;
    border: solid 3px dimgray;
}

#guarantees {
    margin-right: 5px;
    padding: 15px 50px 15px 50px;
    background-color: #000016;
    border: solid 3px dimgray;
}

#samples {
    clear: right;
    float: right;
    margin-right: 100px;
    padding: 15px 45px 15px 45px;
    background-color: #001e00;
    border: solid 3px dimgray;
}

}