THEFWA like menu navigation

Hi there,

I regularly visit www.thefwa.com for inspiration...
The new design of the site is kinda nice.. I like the navigation... Its stays small and then when you rollover it extends.
I was wondering can this menu effect can be achieved using jquery or ajax ie., without using flash..

Any tutorials like there out... ?

 

You can use jquery for that type of menu, though the transition may be a little more choppy. it is almost like hidden div tags through Javascript. This is a simple hidden div script I had laying around, it will need to be customized to your needs but you shouldnt have much of an issue with that.

This needs to go in the header:

<script type="text/javascript">
function SwitchMenu(obj){
	if(document.getElementById){
	var el = document.getElementById(obj);
	var ar = document.getElementById("cont").getElementsByTagName("DIV");
		if(el.style.display == "none"){
			for (var i=0; i<ar.length; i++){
				ar[i].style.display = "none";
			}
			el.style.display = "block";
		}else{
			el.style.display = "none";
		}
	}
}
function ChangeClass(menu, newClass) { 
	 if (document.getElementById) { 
	 	document.getElementById(menu).className = newClass;
	 } 
} 
document.onselectstart = new Function("return false");
</script>

and this in the body


<a href="javascript:SwitchMenu('sub1')">
			<span style="font-size: 9pt">1</span></a></span></p>
                            <p class="style2"><span class="style3">
							<a href="javascript:SwitchMenu('sub2')">
							<span style="font-size: 9pt">2</span></a></span></p>
                            <p class="style2"><span class="style3">
							<a href="javascript:SwitchMenu('sub3')">
							<span style="font-size: 9pt">3</span></a></span></p>
                            <p class="style2"><span class="style3">
							<a href="javascript:SwitchMenu('sub4')">
							<span style="font-size: 9pt">4</span></a></span></p>
                            <p class="style2"><span class="style3">
							<a href="javascript:SwitchMenu('sub5')">
							<span style="font-size: 9pt">5</span></a></span></p>
                            <p class="style2"><span class="style3">
							<a href="javascript:SwitchMenu('sub6')">
							<span style="font-size: 9pt">6</span></a></span></p>
                            <p class="style2"><span class="style3">
							<a href="javascript:SwitchMenu('sub7')">
							<span style="font-size: 9pt">7</span></a></span></p>
                            <p class="style2"><span class="style3">
							<a href="javascript:SwitchMenu('sub8')">
							<span style="font-size: 9pt">8</span></a></span></p>
                            <p class="style2"><span class="style3">
							<a href="javascript:SwitchMenu('sub9')">
							<span style="font-size: 9pt">9</span></a></span></p>
                            <p class="style2"><span class="style3">
							<a href="javascript:SwitchMenu('sub10')">
							<span style="font-size: 9pt">10</span></a></span>

<div id="cont">
<div class="submenu" id="sub1" style="display:none;">1</div>
<div class="submenu" id="sub2" style="display:none;">2</div>
<div class="submenu" id="sub3" style="display:none;">3</div>
<div class="submenu" id="sub4" style="display:none;">4</div>
<div class="submenu" id="sub5" style="display:none;">5</div>
<div class="submenu" id="sub6" style="display:none;">6</div>
<div class="submenu" id="sub7" style="display:none;">7</div>
<div class="submenu" id="sub8" style="display:none;">8</div>
<div class="submenu" id="sub9" style="display:none;">9</div>
<div class="submenu" id="sub10" style="display:none;">10</div>
					 </div>

Code (markup):