Search type links in Yahoo - how to implement similar behaviour


Tags: asp.net,javascript,html,css

Problem :

When you open the yahoo main page at the top there is a search section that contains links like: Web, Images, Video, More

When clicking on the link the chosen section is activated and the text of the search button is being changed. The only part of the page that is updated is the search part at the top and the other parts of the website remain unaffected.

My question is how is this implemented? And more importantly how similar behaviour could be implemented in .net using VS 2008?

Are the links really links or different elements that only mimic the links behaviour? Does it need to be ajax, or just everything is preloaded and hidden using some css techniques?

Is the same technique used in the news section on the same page when changing tabs: News, Sport, Entertainment, Video?

Thank you



Solution :

This is actually done with CSS and Javascript:

<ul id='menu'>
  <li><a href="#web_search" class='active'>Web</a></li>
  <li><a href="#image_search">Image</a></li>
  <li><a href="#video_search">Video</a></li>
  <li><a href="#local_search">Local</a></li>
</ul>

<div id='web_search' class='search'></div>
<div id='image_search' class='search' style='display: none;'></div>
<div id='video_search' class='search' style='display: none;'></div>
<div id='local_search' class='search' style='display: none;'></div>

Then Javascript (example uses jQuery, can be done many ways...):

$('a','#menu').click(function() {
    $('div.search').hide();
    $('a.active', '#menu').removeClass('active');
    $($(this).addClass('active').attr('href')).show();
    $(this).blur();
    return false;
});

And this is an example of it in action. The styling and such would all be CSS.


    CSS Howto..

    How to create a proper class structure?

    CSS - How to make a div as wide as a containing child img

    How do I filter unwanted CS styles from CS sheet?

    How to utilize CSS only button markup?

    How to reorganize the page using “div” and “css”?

    How can I stay organized when writing CSS? [duplicate]

    how to make div fixed at a particular scroll level

    How to handle the html and css of one side image and other side content and vice versa

    How to apply CSS to document.write()?

    How to move img src a few pixels down in html page

    How to avoid the text inside the bootstrap button overflow?

    CSS: How to lay an image on top of a table

    JavaScript: how do I make a tooltip follow the cursor *and* flip on collision?

    How have icons/lines change color on scroll down using Jquery/CSS?

    Showing and hiding content

    How to improve page speed in google? [closed]

    How to solve the disapearing of top margins in element when using CSS3 Pie in IE7

    How can I center div, inside other div with bootstrap classes?

    How to adjust toaster popup width

    How to make my HTML suitable for Mobile View

    How to use body horizontal scrollbar in free jqgrid

    WordPress TwentyTen menu: how to CSS-select sub-menus in a specific position?

    How to make CSS apply to only a portion of the link_to text?

    How do I use CSS to give a section a background that doesn't scroll with the page?

    How can I use jQuery (or CSS) to sort HTML tables by column?

    how to take common factors out from css where it is separated by comma (,) [duplicate]

    How to centre text as CSS content attribute vertically and horizontally?

    How to achieve navigation mouseover effect like in screenshot [closed]

    How is the signed out blur effect achieved on icloud.com?

    How to make 3-corner-rounded triangle in CSS