By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,665 Members | 1,258 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,665 IT Pros & Developers. It's quick & easy.

Dynamic Menu for all browsers

P: n/a
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
Share this Question
Share on Google+
4 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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.