Tabbed Menu Navigation Problem

**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

**Nile** · 03-31-2009, 12:16 PM

Really easy.
http://css-tricks.com/video-screenca...ee-state-menu/

**vwphillips** · 03-31-2009, 05:00 PM

inprinciple

Code:

<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>

Thread: Tabbed Menu Navigation Problem

Thread Tools

Search Thread

Tabbed Menu Navigation Problem

Bookmarks

Bookmarks

Posting Permissions