?
Solved

Creating a horizontal menu system

Posted on 2003-03-04
6
Medium Priority
?
175 Views
Last Modified: 2009-07-29
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
Comment
Question by:pwill40
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 14

Expert Comment

by:avner
ID: 8064139
0
 

Author Comment

by:pwill40
ID: 8064651
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
 
LVL 3

Expert Comment

by:bjrcreations
ID: 8065344
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:pwill40
ID: 8065953
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
 
LVL 3

Accepted Solution

by:
bjrcreations earned 225 total points
ID: 8066112
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
 

Author Comment

by:pwill40
ID: 8081535
Thanks,  That was pretty much what I was after.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question