• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 180
  • Last Modified:

Creating a horizontal menu system

Hi,

I want to be able to have a horizontal menubar accross the top of a page.  (It will effectively look like a table with 1 row in it.)  When you select an item from this menu, I need to change the colour of this option (the cell background colour??) and bring up a submenu.

Instead of having a dropdown submenu (I've seen lots of exmaples of this) I want to have a horizontal submenu (again it will look like a table with 1 row in it).  When different items are clicked in the main menu I'd like it to change the contents of this submenu.  

Any help appreciated.

Many thanks,
Paul




0
pwill40
Asked:
pwill40
  • 3
  • 2
1 Solution
 
avnerCommented:
0
 
pwill40Author Commented:
This doesn't seem to do what I want.  I want the menu to be horizontal accross the top of the page and the submenu (whichever submenu is currently chosen) to be displayed (all the time, not on a dropdown), horizontally directly below the main menu.

Thanks,
Paul
0
 
bjrcreationsCommented:
Great menu suggested by avner, but I think that only works in IE55 and above. Try the following link:

http://www.dynamicdrive.com/dynamicindex1/index.html

This has a bunch of menu systems - you can probably find one to suit your needs that works with NN4+ and IE4+.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
pwill40Author Commented:
Definitely getting closer.  The menu below is close to what I need but I'd like it so that the submenu is only activated onclick of the mainmenu not onmouseover and that the sub menu doesn't dissapear after a set period of time.  

Thanks for your help I've only just started using javascript.

http://www.dynamicdrive.com/dynamicindex1/tabmouseover.htm
0
 
bjrcreationsCommented:
This code works IE4+ and NN4+ - try the following:

<html>
<head>
<title>Untitled</title>

<SCRIPT language="JavaScript">

if (navigator.appName == "Netscape") {
var layerRef="document.layers";
var styleSwitch="";
} else {
var layerRef="document.all";
var styleSwitch=".style";
}
var subMenus = new Array("SubMenu1", "SubMenu2", "SubMenu3");

function showSubMenu(layerName) {
     eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');
}

function hideAllSubMenus() {
for (var i = 0; i <= subMenus.length - 1; i++) {
     if      (eval(layerRef+'["'+subMenus[i]+'"]'+styleSwitch+'.visibility="visible"')); {
     eval(layerRef+'["'+subMenus[i]+'"]'+styleSwitch+'.visibility="hidden"');
          }
     }
}

</SCRIPT>

<STYLE type="text/css">
#SubMenu1 {
position:absolute;
top:50px;
left:50px;
visibility: hidden;
}
#SubMenu2 {
position:absolute;
top:50px;
left:50px;
visibility: hidden;
}
#SubMenu3 {
position:absolute;
top:50px;
left:50px;
visibility: hidden;
}
</STYLE>

</head>
<body>

<A href="javascript:;" onClick="hideAllSubMenus();showSubMenu('SubMenu1')">Link 1 (Show Submenu 1)</A> | <A href="javascript:;" onClick="hideAllSubMenus();showSubMenu('SubMenu2')">Link 2 (Show Submenu 2)</A> | <A href="javascript:;" onClick="hideAllSubMenus();showSubMenu('SubMenu3')">Link 1 (Show Submenu 3)</A>

<DIV name="SubMenu1" id="SubMenu1">
SubMenu1
</DIV>

<DIV name="SubMenu2" id="SubMenu2">
SubMenu2
</DIV>

<DIV name="SubMenu3" id="SubMenu3">
SubMenu3
</DIV>

</body>
</html>
0
 
pwill40Author Commented:
Thanks,  That was pretty much what I was after.
0

Featured Post

[Webinar] Improve your customer journey

A positive customer journey is important in attracting and retaining business. To improve this experience, you can use Google Maps APIs to increase checkout conversions, boost user engagement, and optimize order fulfillment. Learn how in this webinar presented by Dito.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now