467,871 Members | 1,679 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 467,871 developers. It's quick & easy.

Dynamic Menu for all browsers

hi people,

My problem is that I need to build a dynamic menu (preferably that
works in all the browsers) that appears when I mouseover a certain
link.

The problem is that I have to declare the menu content in the same
part of the page where the menu goes (BODY). The content of the page
is generated dynamically so I can't put the menu content it on the
headers.
I worked around this problem with this:

this goes in the <head>:

<script type="text/javascript">
/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsBy TagName("span");
//DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}

</script>

example of the html text in the pages:

<span id="masterdiv"><span class="menutitle"
onMouseOver="SwitchMenu('sub1')" onMouseout="window.status=''; return
true">Menu1</span>
<span class="submenu" id="sub1"> menu text<br> menu text<br> menu
text<br></span></span><p>

<span id="masterdiv"><span class="menutitle"
onMouseOver="SwitchMenu('sub2')" onMouseout="window.status=''; return
true">Menu2</span>
<span class="submenu" id="sub1"> menu text<br> menu text<br> menu
text<br></span></span>

The problem is that it looks awful... and it breaks the page...
any ideas?
cordially,
stromboli
Jul 23 '05 #1
  • viewed: 4846
Share:
4 Replies
Once upon a time *Stromboli* wrote:
hi people,

My problem is that I need to build a dynamic menu (preferably that
works in all the browsers) that appears when I mouseover a certain
link.

The problem is that I have to declare the menu content in the same
part of the page where the menu goes (BODY). The content of the page
is generated dynamically so I can't put the menu content it on the
headers.
I worked around this problem with this:

this goes in the <head>:

<script type="text/javascript">
/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}

function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsBy TagName("span");
//DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}

</script>

example of the html text in the pages:

<span id="masterdiv"><span class="menutitle"
onMouseOver="SwitchMenu('sub1')" onMouseout="window.status=''; return
true">Menu1</span>
<span class="submenu" id="sub1"> menu text<br> menu text<br> menu
text<br></span></span><p>

<span id="masterdiv"><span class="menutitle"
onMouseOver="SwitchMenu('sub2')" onMouseout="window.status=''; return
true">Menu2</span>
<span class="submenu" id="sub1"> menu text<br> menu text<br> menu
text<br></span></span>

The problem is that it looks awful... and it breaks the page...
any ideas?
cordially,
stromboli


Try an external .js file with the script, with
<script type="text/javascript" src="menu.js"></script>
linking to the file. And leave also out the <script
type="text/javascript"> and </script> from the file.

--
/Arne

Jul 23 '05 #2
st********@hotpop.com (Stromboli) wrote:
My problem is that I need to build a dynamic menu
You don't "need" to do that at all.
(preferably that works in all the browsers)
Not possible, all techniques able to do that (css , javascript, java,
flash etc.) are optional for a www UA. Btw, all are of topic for this
group.
example of the html text in the pages:

<span id="masterdiv"><span class="menutitle"
onMouseOver="SwitchMenu('sub1')" onMouseout="window.status=''; return
true">Menu1</span>
Oh dear. Wrong markup, and only accessible with javascript enabled.
The problem is that it looks awful... and it breaks the page...


Plenty of examples available of dynamic menus that are based upon
properly marked up links, Google is your friend.

--
Spartanicus
Jul 23 '05 #3
Stromboli wrote:
My problem is that I need to build a dynamic menu (preferably that
works in all the browsers) that appears when I mouseover a certain
link.


Use the one at http://devedge.netscape.com/

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

Jul 23 '05 #4
Stromboli wrote:

My problem is that I need to build a dynamic menu (preferably that
works in all the browsers) that appears when I mouseover a certain
link.
What do you mean by "all browsers"? Text to speech? Netscape 1? The
Googlebot?

I can speak for myself: I would make a basic distinction between
browsers understand document.getElementById, and those that don't
(which I'd exclude, in order to write standardized JS/DOM).

The problem is that I have to declare the menu content in the same
part of the page where the menu goes (BODY). The content of the page
is generated dynamically so I can't put the menu content it on the
headers.
I worked around this problem with this:

The problem is that it looks awful... and it breaks the page...
any ideas?
cordially,
stromboli


Maybe you can use an external JS, and call a parametrized function?
Like buildMenu(4, 2) or something. You could store the navigation logic
in the JS, the link structure in the HTML (for non-JS clients) and the
underlying data in XML or an SQL-Database.

--
Google Blogoscoped
http://blog.outer-court.com
Jul 23 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by Martin Doyle | last post: by
26 posts views Thread by Thomas Mlynarczyk | last post: by
2 posts views Thread by LRW | last post: by
1 post views Thread by paulakeijzers | last post: by
3 posts views Thread by scaredemz | last post: by
5 posts views Thread by Seth Bourne | last post: by
reply views Thread by jack112 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.