Webpage structure suggestion (Jquery, .NET)

Question

Hello ! I have a WebPage with a fix Superior logo and menu... And I´d like to change the inferior content with each menu click, wthout making other new Aspx... I mean, only one Aspx...

Page Structure:

-------Logo

-------Menu

-------Content 1, 2 ,3

I´d like some fancy/beautiful suggestion to that... Maybe a Jquery plugin?

Thanks

Answer 1

Just use a jQuery show/hide for your content

HTML

<ul id="menu">
   <li><a href="#content1">show content 1</a></li>
   <li><a href="#content2">show content 2</a></li>
   <li><a href="#content3">show content 3</a></li>
</ul>  
<div id="content1" class="content">
     Content
</div>
<div id="content2" class="content">
     More content
</div>
<div id="content3" class="content">
   Even more content
</div>

jQuery

$(document).load(function(){
      $('div.content').hide();
      $('div#content1').show();
      $('ul#menu a').click(function(){
            var my_section = $(this).attr('href').substring(1);
            $('div.content').hide();
            $('div#' + my_section).show();
      });
 });

Now there are definitely some ways to make the transition prettier and all that, but this should give you a good base.

Answer 2

I suppose it depends on how much time that you want to put into it. You could simply stick an uppdate panel in the content area, using Conditional updates. The menu items would be the triggers. This method would require an ajax postback on each menu click.

Have a read here: http://www.asp.net/Learn/ajax/tutorial-02-cs.aspx.

Another option is to use hidden divs. jQuery is bit on the heavy side to do something so simple.

<script langauge="javascript">
function ShowContent(divID, otherDivID)
{
    var myDiv = document.getElementById(divID);
    var otherDiv = document.getElementById(otherDivID);

    myDiv.style.display = 'block';
    otherDiv.style.display = 'none';
 }
 </script>
<a href="#" onclick="ShowContent('div1', 'div2');">Number 1</a> | <a href="#" onclick="ShowContent('div2', 'div1');">Number 2</a>

<div id="div1">This is content 1</div>
<div id="div2">This is content 2</div>