Tabbed Menu Navigation Problem [Archive]

jaymontgomery

03-31-2009, 12:09 PM

Question - How do I create this type of navigation on this video I created?

http://www.youtube.com/watch?v=8LggOyA1W1M

I'm not a programmer, but I'm proficient in Photoshop slicing and Dreamweaver CS4. I know bit of html coding and CSS editing. I have tried using Spry Menu Bars, and Spry Tabbed Panels with no success. I see tons of simple mouse over tabbed menus but none that can have a vertical line going from the top category down to the sub category. Plus I need to use images in the background instead of flat colors. Would some sort of javascript template work? Is there some free menu code that I can customize? Another solution? Please advise. If you can actually help me out I will pay you for your time. Please email me at jay@jaymontgomery.com or call me at 770-309-6004.

Thanks,
Jay

vwphillips

03-31-2009, 05:00 PM

inprinciple

<html>

<head>
<title></title>
<style type="text/css">

#MMenu {
position:relative;width:450px;height:150px;border:solid black 0px;
}

.MBar {
position:relative;width:400px;height:50px;border:solid black 0px;
}

.main {
position:relative;left:20px;width:100px;height:30px;border:solid black 1px;float:left;margin-Right:5px;background-Color:#FFCC66;
}

.content {
position:absolute;display:none;top:32px;width:200px;height:50px;border:solid black 1px;background-Color:#FFFFCC;
}

.bar {
position:absolute;display:none;top:0px;width:5px;background-Color:#000000;
}

</style>

<script type="text/javascript">

function zxcS(obj,ccls,nu,bcls){
var mobj=obj.parentNode.parentNode;
var cobjs=zxcByClassName(ccls,mobj,'DIV');
if (mobj.lst) mobj.lst.style.display='none';
mobj.lst=cobjs[nu];
mobj.lst.style.display='block';
mobj.lst.style.left=obj.offsetLeft+2+'px';
var bar=zxcByClassName(bcls,mobj,'DIV')[0];
bar.style.display='block';
bar.style.left=obj.offsetLeft-5+'px';
bar.style.height=mobj.lst.offsetTop+mobj.lst.offsetHeight+'px';
}

function zxcByClassName(nme,el,tag){
if (typeof(el)=='string') el=document.getElementById(el);
el=el||document;
for (var tag=tag||'*',reg=new RegExp('\\b'+nme+'\\b'),els=el.getElementsByTagName(tag),ary=[],z0=0; z0<els.length;z0++){
if(reg.test(els[z0].className)) ary.push(els[z0]);
}
return ary;
}

</script>

</head>

<body>
<div id="MMenu" >
<div class="MBar" >
<div onclick="zxcS(this,'content',0,'bar');" class="main" >Item 1</div>
<div onclick="zxcS(this,'content',1,'bar');" class="main">Item 2</div>
<div onclick="zxcS(this,'content',2,'bar');" class="main">Item 3</div>
</div>
<div class="content" style="height:80px;" >Item 1 content</div>
<div class="content" style="height:20px;">Item 2 content</div>
<div class="content">Item 3 content</div>
<div class="bar"></div>

</div>
</body>

</html>