473,888 Members | 1,265 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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.getEl ementById){ //DynamicDrive.co m change
document.write( '<style type="text/css">\n')
document.write( '.submenu{displ ay: none;}\n')
document.write( '</style>\n')
}

function SwitchMenu(obj) {
if(document.get ElementById){
var el = document.getEle mentById(obj);
var ar = document.getEle mentById("maste rdiv").getEleme ntsByTagName("s pan");
//DynamicDrive.co m change
if(el.style.dis play != "block"){ //DynamicDrive.co m change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="su bmenu") //DynamicDrive.co m change
ar[i].style.display = "none";
}
el.style.displa y = "block";
}else{
el.style.displa y = "none";
}
}
}

</script>

example of the html text in the pages:

<span id="masterdiv"> <span class="menutitl e"
onMouseOver="Sw itchMenu('sub1' )" onMouseout="win dow.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="menutitl e"
onMouseOver="Sw itchMenu('sub2' )" onMouseout="win dow.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
4 5200
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.getEl ementById){ //DynamicDrive.co m change
document.write( '<style type="text/css">\n')
document.write( '.submenu{displ ay: none;}\n')
document.write( '</style>\n')
}

function SwitchMenu(obj) {
if(document.get ElementById){
var el = document.getEle mentById(obj);
var ar = document.getEle mentById("maste rdiv").getEleme ntsByTagName("s pan");
//DynamicDrive.co m change
if(el.style.dis play != "block"){ //DynamicDrive.co m change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="su bmenu") //DynamicDrive.co m change
ar[i].style.display = "none";
}
el.style.displa y = "block";
}else{
el.style.displa y = "none";
}
}
}

</script>

example of the html text in the pages:

<span id="masterdiv"> <span class="menutitl e"
onMouseOver="Sw itchMenu('sub1' )" onMouseout="win dow.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="menutitl e"
onMouseOver="Sw itchMenu('sub2' )" onMouseout="win dow.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********@hotp op.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="menutitl e"
onMouseOver="S witchMenu('sub1 ')" onMouseout="win dow.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.getEle mentById, 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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
2505
by: Macamba | last post by:
Hi all, I am currently developing a website for a voluntary organisation. It is my first step in website development. The dynamic menu I developed has some bugs, which I addressed in another post. In this post I want to ask you why my code behaves differently in IE, while it behaves like I expect in Mozilla and Opera. What I would like to see addressed is what I need to do to get the same behaviour in all 3 browsers. I know each browser...
2
2590
by: Martin Doyle | last post by:
Ok, I'm building a JS-based limitless-sublevel dynamic menu and am making it cross browser as well - 3 packs of aspirin so far and counting ;) I'm having a weird rendering problem using Opera 7.51, even though it displays fine in Mozilla 1.6, Firefox 0.9, Netscape 7.1 and Internet Explorer 6.0 Hope someone can help!
26
2843
by: Thomas Mlynarczyk | last post by:
Hi, Could some kind person using Mac or Linux (or others) please take a look at http://www.mlynarczyk-webdesign.de/tmp/menu/menu.html and tell me if the page renders as it should (screenshot provided on the page)? Never mind the colors, this is just to test the functionality. The page validates (HTML & CSS), and seems to "work" as expected on Windows (IE5+, OP5+, NN5+, Mozilla & Firefox). I know the styles won't work on IE4
1
1645
by: Phil | last post by:
Supposedly, the code below should assign the correct value to the 'url' variable. But all I get is a blank 'main' Frame with apparently nowhere to go when I click on the link in the 'menu' Frame.. Worst(yesyes!!) 1 - Explorer 6 : clicking a link in the 'menu' frame simple reopens an instance of the FRAMESET, syntax error msg. 2 - Netscape 7.1 : clicking a link in the 'menu' frame simple reopens
2
1656
by: LRW | last post by:
I've a page where I have two form drop-menu. I need the second menu to populate only with items based on what's selected in the 1st menu. I have "Javescript in Easy Steps" and the closest it discusses is populating list content based on a radio button, but the book is so badly written, I'm having a horrible time trying to adjust using two menus. I did a Google for the sublect, and found http://www.blazonry.com/javascript/js_menu.php...
1
3226
by: paulakeijzers | last post by:
I've got a problem with asp.net i am trying to make a menu control. and have searched the web for serveral controls but they don't work correctly. I am pretty new to asp.net building. What am i looking for. i am looking for code to make a dynamical menu with submenus The menu items are stored in a MS SQL Table and when by loading the page the items will be created. i have made a asp table. i want my menu on the left cell, in the middle cell i...
3
3068
by: scaredemz | last post by:
hi, so i'm creating a dynamic drop-down menu. the menu and the text show up fine in IE but only the drop-down shows in Firefox without the menu text. Below is the fxn code. help pls. function DropDownHelper(menuArray, top, left, height) { var currItem = new String(); var item; var idStr;
5
1842
by: Seth Bourne | last post by:
I've seen the microsoft product (microsoft dynamic AX). it really impressed me cause it looks like windows form, but it is web form (run on IE). it hidden menubar, toolbar and everything on IE menu, and create the menubar with own menu design. how to hide the menubar, toolbar and everything on IE that without create a new window ? and how to design the look and feel IE just like ordinary windows form ? thanks
0
9961
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
11186
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10778
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10887
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
10439
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
7990
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7148
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5825
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
3
3252
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.