954,598 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

static nav bar

Hey all

Allright so here's what I'm trying to do. I'm trying to create about 6 pages into one page. They way that I want it to work is that I will have a navigation bar at the top which when one of the menu items when clicked will direct you to that pages content which will be built within that page. I'm pretty much linking the parts of the navigation to sections. In addition , I want it so that the nav bar stays where it is, which is at the top and the second or third section which it links to, moves up.

I'm not sure how to go about implementing this cause i'm kind of new to web development.

What I had so far was I created my navigation bar and then each pages content was enclosed within sections. I then tried linking that part of the navigation bar to that section however it seems to go all over the place. I know that you have to use a bit of jquery for this. Also, do you have to wrap each different section in a document-wrapper?

If someone could please help me or point me to a tutorial, that would be great.

Thanks
Riz

rizla777
Newbie Poster
11 posts since Oct 2010
Reputation Points: 10
Solved Threads: 0
 

As I understand it, you want some sort of tabs thing? You could do something like this:

<div class="menu">
  <div class="tab1">Home</div>
  <div class="tab2">Bla</div>
..
<div id="content">
  <div class="tab1">Home text</div>
  <div class="tab2" style="display:none">Bla text</div>
..
$(function() {
  $('.menu > div').click(function() {
    $('.content div').css('display', 'none');
    $('.content .'+this.className).css('display', 'block');
  });
});


Not tested.

twiss
Veteran Poster
1,005 posts since Apr 2010
Reputation Points: 177
Solved Threads: 101
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You
View similar articles that have also been tagged: