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

CSS

Posted by Christel Macabeo
Christel Macabeo
4,619 Points

nav question

in example website: The Better Chip (http://thebetterchip.com)

I was wondering how the top nav menu was made? I want to make my website have a nav like that, where when you click on for example, "pair and share", that mouse hover effect stays permanent and it scrolls down to the part of the page automatically.

Also how to make the whole menu div stick to the top after after scrolling past the logo?

*I think my menu made of images is what is giving me trouble. I want my active state to be permanent when clicked, not just a quick second. I tried using visited and it just acted the same as if i put it as active state.

Could anyone give me some pointers?

This is my html

<nav class="nav">
    <ul class="menu">
        <li id="illustrations"><a href="#illustrations-section">illustrations &amp; characters</a></li>
        <li id="layouts"><a href="#layouts-section">layouts &amp; elements</a></li>
        <li id="animation"><a href="#animation-section">animation &amp; storyboards</a></li>
        <li id="drawings"><a href="#drawings-section">drawings &amp; sketches</a></li>
        <li id="about"><a href="#about-section">about &amp; stuff</a></li>
        <li id="buystuff"><a href="http://www.etsy.com">buy stuff</a></li>
    </ul>
</nav>

<section class="illustrations">
    <div class="container">
        <h3 id="illustrations-section">Illustrations</h3>
    </div>
</section>



<section class="layouts">
    <div class="container">
        <h3 id="layouts-section">Layouts</h3>
    </div>
</section>

<section class="animation">
    <div class="container">
        <h3 id="animation-section">Animation</h3>
    </div>
</section>

<section class="drawings">
    <div class="container">
        <h3 id="drawings-section">Drawings</h3>
    </div>
</section>

<section class="about">
    <div class="container">
        <h3 id="about-section">About</h3>
    </div>
</section>

This is what I have for CSS

body {
    margin: 0;
}

* {
    -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
            box-sizing: border-box;
}


.nav {
    position: fixed;
    left: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 999999;
    -webkit-transition: width ease;
    -webkit-transition-delay: 1s;
    transition: width ease 1s;

}

.menu {
    margin:0;
    padding: 0;
    text-align: center; 
}

.menu li {
    height: 120px;
    margin: 0;
    padding: 0;
    display: inline-block;
}

.menu a {
    height: 123px;
    display: inline-block;
}
.menu {
    height: 120px;
    list-style-type: none;
}

.menu a {
    background:url("../images/navi-lined-2.png");
    text-indent: -9999em;
}

#illustrations a { 
    width: 300px; 
    background-position: 1px -103px; 
}

#illustrations a:hover {
    background-position: 1px -224px; 
}


#illustrations a:visited {
    background-position: -1px -363px;
}

#layouts a { 
    width: 238px; 
    background-position: -291px -102px;
}

#layouts a:hover { 
    background-position: -291px -224px; 
}

#layouts a:active { 
    background-position: -301px -360px; 
}

#animation a { 
    width: 277px; 
    background-position: -533px -105px; 
}

#animation a:hover { 
    background-position: -533px -224px; 
}

#animation a:active { 
    background-position: -538px -361px; 
}

#drawings a { 
    width: 237px; 
    background-position: -816px -99px; 
}
#drawings a:hover { 
    background-position: -816px -220px; 
}

#drawings a:active { 
    background-position: -813px -361px; 
}

#about a { 
    width: 223px; 
    background-position: -1053px -105px; 
}
#about a:hover { 
    background-position: -1053px -224px; 
}
#about a:active { 
    background-position: -1048px -361px; 
}

#buystuff a { 
    width: 234px; 
    background-position: -1271px -104px; 
}
#buystuff a:hover { 
    background-position: -1271px -224px; 
}
#buystuff a:active { 
    background-position: -1274px -366px; 
}

#illustrations-section {
    height: 750px;
}

#layouts-section {
    height: 750px;
}

#animation-section {
    height: 750px;
}

#drawings-section {
    height: 750px;
}

#about-section {
    height: 750px;
}

6 Answers

bbvjjwjaqq
bbvjjwjaqq
1,849 Points
bbvjjwjaqq
bbvjjwjaqq
1,849 Points

Hi Christel,

to achieve the effect to stick the navigation after scrolling past the logo you can use javascript.

$(window).scroll(function(){
    if ($(this).scrollTop() > $(.banner).height() {
        $(nav).css("position","fixed");
    } else {
        $(nav).css("position","static");
    }
});

I'm new to javascript, but I've implemented such a navigation with this kind of jquery code.

Hopefully this helps.

Christel Macabeo
Christel Macabeo
4,619 Points

Thanks for this! Can't wait to try it. I'm new to javascript as well.

So I would also have to link to jquery somewhere in my html file right?

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Christel,

The first part of you question about being taken to a part of your webpage when clicking a menu link is done like this.
In your nav

<nav>
  <ul>
    <li><a href="#apples">All about Apples</a></li>
    <li><a href="#pears">All about Pears</a></li>
    <li><a href="#oranges">All about Oranges</a></li>
  </ul>
</nav>

Then in your page you would have something like this.

<div>
  <h2 id="apples">All about Apples</h2>
    <p>Lots of text about Apples goes here</p>
</div>
<div>
  <h2 id="pears">All about Pears</h2>
    <p>Lots of text about Pears goes here</p>
</div>
<div>
  <h2 id="oranges">All about Oranges</h2>
    <p>Lots of text about Oranges goes here</p>
</div>

You see how you use the id given to the different fruits as the anchor for the link to different parts of the page.

You question about having the nav menu always at the top of the page is done by giving it a position of fixed.

Hope this helps.

Christel Macabeo
Christel Macabeo
4,619 Points
Christel Macabeo
Christel Macabeo
4,619 Points

Thanks for clarifying the single page link format, Wayne.

Know anything about when clicking on for example, "pair and share", that mouse hover effect state stays permanent and it scrolls down to that section of the page automatically.

On the menu I'm working on, my hover state just reverts to regular and doesn't permanently change.

Wayne Priestley
Wayne Priestley
19,579 Points

You would use 

<li><a class="current" href="#apples">All about Apples</a></li>

Then in your css

a.current:link {
    color: white;
    background-color: blue;
}
Christel Macabeo
Christel Macabeo
4,619 Points
Christel Macabeo
Christel Macabeo
4,619 Points

I posted my code, Wayne. Do you think you could take a look and see if you could help? What I've been trying to do is when a user clicks on a menu link, it permanently changes image aka the link; not just a split second (to which it just reverts back to regular)

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Christel,

Its going to be pretty hard for me to do as i don't have the images you do. If you can put the folder containing all your files into dropbox and give me a link to download them, then i can put them in my code editor and take a look.
One thing i did notice is that your code sticks your menu to the bottom and not the top. You can change that easy by changing this one piece of code from bottom to top.

.nav {
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
    z-index: 999999;
    -webkit-transition: width ease;
    -webkit-transition-delay: 1s;
    transition: width ease 1s;

}
Christel Macabeo
Christel Macabeo
4,619 Points
Christel Macabeo
Christel Macabeo
4,619 Points

Thanks Wayne,

I meant to make it stick to the bottom. Something different for a change.

Here is a link to the image i used: https://dl.dropboxusercontent.com/u/25980615/nav-menu-css-sprite/navi-lined-2.png

Wayne Priestley
Wayne Priestley
19,579 Points

Thanks Christel,

I've downloaded the image. I'll try some things out tomorrow.