Member Avatar for rizla777

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

  • 2 Contributors
  • 1 Reply
  • 138 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by twiss
Member Avatar for twiss

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.