jQuery scroll down Navigation Header

Home Menu & NavigationjQuery scroll down Navigation Header

11 years ago Views

14550

3554

tutsplus

we’ll be creating a navigation bar that stays with you as you scroll down — and we’ll also throw a gimmick or two into the mix to polish it off.

What We’ll be Doing

In this tutorial, we’re going to use one of HTML5′s new elements, the nav tag, as a container for a horizontal list of links. I’ll briefly explain how to make it look pretty using a little bit of CSS.

Most importantly, you’ll make yourself familiar with the basics of jQuery’s Waypoints plugin, which will provide advanced functionality: as the user scrolls down, the navigation bar will stick to the top of the viewport, as well as change to indicate the current section. As a little added touch, we’ll use another plugin, ScrollTo, in order to provide smooth scrolling and convenient positioning when the user clicks on the navigation links.

Step 1: The Box

I’m sure you’re already familiar with the various new elements that have been introduced with HTML5. In this example we’re going to make use of two of them: <nav> and <section>. We’re going to start out with the following:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class=wrapper>
      <h1>A reasonably large heading.</h1>
      <nav><!-- Navigation. --></nav>
      <section id="section-1">Lorem ipsum ...</section>
      <!-- Type in some longer sections of sample text here. -->
    </div>
    <!-- Scripts will go here. -->
  </body>
</html>

We’re going to have to give our navigation bar an explicit width. Make it 28px wider than the wrapper, and nudge it into place with a negative left margin. Let’s also give it gently rounded top edges using border-*-radius, as well as some arbitrary padding.

nav {
  position: relative;
  width: 928px;
  padding: 2em;
  margin-left: -14px;
  border-top-left-radius: 14px 7px;
  border-top-right-radius: 14px 7px;
}

Next, we’re going to add an unordered list of links inside the navigation bar, and set its items to display: inline-block in order to put them all on a single line. We don’t need any bullets, so we’ll also throw list-style: none into the mix.

Tag: horizontal navigation menu