Hello

Can anyone point me in the right direction on how I can implement a menu which changes the content within a page as apposed to loading a new page please?

Heres an example SITE: http://www.nintendo.com/consumer/

Screenshot:



I'd like to accomplish the same thing (menu on the left (graphic) which changes item/content on right within same page).

I think it's a javascript?

Thanks



Their code:

Code: [Select]<div class="sidebar" id="sidebar">

<ul class="menu">
<li class="complex" id="ecl">
<div>
<span style="display: none;" id="sideerrCode"> </span>
<a class="arrow" href="javascript:flipLinks('ecl',3)"/>
<a href="javascript:flipLinks('ecl',3)">Error Code Lookup</a>
<form onsubmit="return formValidator(this,'sideerrCode');return false" id="ecl_form" name="ecl_form" method="get" action="/consumer/wfc/en_na/ds/results.jsp">
<input type="text" maxlength="8" onkeyup="isnum(this,this.value,'sideerrCode');" onkeydown="isnum(this,this.value,'sideerrCode');" name="error_code" onblur="fillInput(this, '#','sideerrCode');" onfocus="formFocus(this, '#', 'ecl', 3);" value="#" id="ecl_num"/><br/>
<select style="margin-top: 3px; width: 92px; display: none;" name="system" id="ecl_systemSelect">
<option value="sys">System</option>
<option value="DS">Any DS system</option>
<option value="Wii">Wii</option>
</select>
<select style="margin-top: 3px; width: 92px; display: none;" name="locale" id="ecl_langSelect">
<option value="lang">Language</option>
<option value="en_US">English</option>
<option value="fr_CA">Francais</option>
<option value="es_MX">Espanol</option>
</select>
<input type="submit" value="Go!" style="position: relative; right: -2px; top: -18px; width: auto; height: auto; display: none;" id="ecl_sub"/>
</form>
<a id="ecl_link1" style="color: black; font-weight: bold; text-decoration: none; display: none;"><br/>Related Topics</a>
<a id="ecl_link2" href="/consumer/systems/wii/en_na/onlineWirelessRouterTroubleshooting.jsp" style="display: none;"><br/>Wireless Router Help - Wii</a>
<a id="ecl_link3" href="/consumer/wfc/en_na/ds/wrSetupHelp.jsp" style="display: none;"><br/>Wireless Router Help -  DS</a>
</div>
</li>
<li class="complex" id="rol">
<div>
<span style="display: none;" id="sideerrRepair"> </span>
<a class="arrow" href="javascript:flipLinks('rol',3)"/>
<a href="javascript:flipLinks('rol',3)">Repair Information</a>
<form id="rol_form" name="rol_form" action="/consumer/lookup/orders/lookupSupportOrder.do" method="post">
<input type="HIDDEN" value="/consumer/index.jsp" name="returnPage"/>
<input type="hidden" value="repair" name="orderType"/>
<input type="text" onkeyup="isnum(this,this.value,'sideerrRepair');" onkeydown="isnum(this,this.value,'sideerrRepair');" onblur="fillInput(this, 'Lookup Repair #','sideerrRepair');" onfocus="formFocus(this, 'Lookup Repair #', 'rol', 3);" value="Lookup Repair #" name="orderNumber" id="rol_num"/><br/>
<input type="text" onblur="fillInput(this, 'Zip Code');" onfocus="clearInput(this, 'Zip Code');" value="Zip Code" style="margin-top: 3px; display: none;" name="zipCode" id="rol_zip"/>
<input type="submit" value="Go!" style="position: relative; right: -2px; top: -18px; width: auto; height: auto; display: none;" name="rol_sub" id="rol_sub"/>
</form>
<!--<a style="display:none" href="https://my.nintendo.com/cpp/faq/faq.jsp#repairs" target=_blank id=rol_link1><br/>Repair FAQ</a>-->
<!--<a style="color:black;font-weight:bold;text-decoration:none;display:none;" id=rol_link1><br/>Related Topics</a>-->
<a id="rol_link1" href="/consumer/orders.jsp" style="display: none;"><br/>Repair Order FAQ</a>
<a id="rol_link2" href="/consumer/manuals/warrantyinfo.jsp" style="display: none;"><br/>Warranty Info</a>
<a id="rol_link3" href="/consumer/repair/" style="display: none;"><br/>System Troubleshooting/Repair</a>
</div>
</li>
<li class="complex" id="pol">
<div>
<span style="display: none;" id="sideerrPart"> </span>
<a class="arrow" href="javascript:flipLinks('pol',3)"/>
<a href="javascript:flipLinks('pol',3)">Part Order Information</a>
<form id="pol_form" name="pol_form" action="/consumer/lookup/orders/lookupSupportOrder.do" method="post">
<input type="hidden" value="/consumer/index.jsp" name="returnPage"/>
<input type="hidden" value="part" name="orderType"/>
<input type="text" onkeyup="isnum(this,this.value,'sideerrPart');" onkeydown="isnum(this,this.value,'sideerrPart');" onblur="fillInput(this, 'Lookup Part Order #','sideerrPart');" onfocus="formFocus(this, 'Lookup Part Order #', 'pol', 3);" value="Lookup Part Order #" name="orderNumber" id="pol_num"/><br/>
<input type="text" onblur="fillInput(this, 'Zip Code');" onfocus="clearInput(this, 'Zip Code');" value="Zip or Postal Code" style="margin-top: 3px; display: none;" name="zipCode" id="pol_zip"/>
<input type="submit" value="Go!" style="position: relative; right: -2px; top: -18px; width: auto; height: auto; display: none;" name="pol_sub" id="pol_sub"/>
</form>
<a id="pol_link1" href="/consumer/orders.jsp" style="display: none;"><br/>Part Order FAQ</a>
<a id="pol_link2" target="_blank" href="http://store.nintendo.com/webapp/wcs/stores/servlet/SchemaView?catalogId=10001&AMP;amp;storeId=10001&amp;langId=-1&amp;currency=USD" style="display: none;"><br/>Online Store</a>
<a id="pol_link3" href="/consumer/retail/retail_replacementparts.jsp" style="display: none;"><br/>Where to Buy Parts</a>
</div>
</li>
<li class="minor"><a href="/consumer/manuals/index.jsp">Manuals</a></li>
<li class="minor"><a target="_blank" href="http://store.nintendo.com">Online Store</a></li>
<li class="minor"><a href="/parents">Info for Parents</a></li>
<li class="minor"><a href="/consumer/gameslist/gamelist.jsp">Master Games List</a></li>
<li class="minor"><a target="_blank" href="http://techforums.nintendo.com/">Tech Support Forums</a></li>
<!--<li class="minor"/>-->
</ul>
<div id="sidebarFooter"> </div>
</div>I don't know how that helps tbh, it's kinda specific to their site (I don't think I need half the crap thats there). Quote from: neljan on November 05, 2009, 08:34:45 AM

Can anyone point me in the right direction on how I can implement a menu which changes the content within a page as apposed to loading a new page please?

Heres an example site: http://www.nintendo.com/consumer/