SubMenus using DIV tags 1

[JSMITH242B]

Hi Group,
I'm using asp.net - not sure if it will be relevant to the post.
I would like to have a menu iusing HTML, CSS and possible Javascript but not a drop down menu.Basically I want a static menu and depending on which option is chosen from this menu, another menu is shown that is relevant to the Main Menu option chosen.
I've seen whereby DIV tags are used for the submenus but am not sure how to implement.


Any pointers?

 

[rpgfan3233]

You want a static menu that when a menu option is clicked it shows a submenu?

 

[JSMITH242B]

Yes.
So I have for example the following menu items (which are static - they do not change)
These are to the left of the screen:

View/Edit Tickets

Configuration

Person Details

When the user selects say 'View/Edit Tickets'

A menu should appear at the top of the page showing the options for 'View/Edit Tickets'
so for example:

Amend Existing Ticket
Delete Existing Ticket

etc.

 

[brisray]

I can think of a couple of ways you can do this.

1) Use an iframe inside the top DIV. On clicking the left hand link load a new page with the menu items into the iframe. Something like

http://brisray.com/web/web1.htm#Code

2) Use JavaScript so that on clicking the left hand link then a JS script using innerHTML changed the text within a DIV with a given ID. I wrote a simple example at

http://brisray.com/test/alttext.htm

Another trivial example occurs on

http://brisray.com/test/alttext.htm

If you look at the source for my email address all you'll see is <p id="emailadd" class="ctr"></p>

The javascript to write the email address is...

function emailjs(){

var email1 = '<a href="mailto: '
var email2 = "brisray"
var email3 = "&#64;"
var email4 = "yahoo.co.uk"
var email5 = '">'
var email6 = '</a>'

document.getElementById("emailadd").innerHTML = email1+email2+email3+email4+email5+email2+email3+email4+email6

}

The script is loaded using onload. See how innerHTML can change the contents of a tag on demand by using onclick?

I'll see if I can come up with an example or two based on what you actually want.

Ray

 

[JSMITH242B]

Hi Ray,
Thanks for this. It's a start.
Yes, an example will be brilliant too!!

Cheers

 

[brisray]

Duh, the URL for the email example is

http://brisray.com/ray/rcontact.htm

Ray

 

[brisray]

The first one using iframes is done. It's at

http://brisray.com/test/jsmith1.htm

By naming the iframes and using target=irame_name in the links you can get pages from all over the place.

You need a HTML page for each submenu and of course a new page for each of your content.

The page is really simple, you can of course open new browser windows or whatever using this technique (target=_new)

Ray

 

[brisray]

The second file using javascript's innerHTML is now ready. It's at

http://brisray.com/test/jsmith2.htm

It uses either buttons or a drop-down list. I've left the JS and CSS in the HTML file instead of using sererate files as it's probably easier to see what's happening.

Ray

 

[JSMITH242B]

Hi Ray,
Thanks for this!!

Can you send the code to jas.jackie@gmail.com for both versions? I would appreciate this very much!!

You're a *

 

[JSMITH242B]

Hi Ray,
Can I use your solution in an ASP.NET webform? I will be using the iframe to dynamically load .aspx pages which will update a backend database.

cheers

 

[brisray]

I've sent the 8 files used to you in a 38kb self extracting zip file.

You're welcome to use them how you like. I don't know much about ASP at all but I don't see why what you're trying to do won't work.

Ray

 

[brisray]

That didn't work out too well - the email got returned by your email account. Perhaps it doesn't like exe files?

Anyway, jsmenu.exe is now in

http://brisray.com/test/

If you prefer you can download the files individually from the same directory, they are named:

jsmith1.htm
jsmith2.htm
jsmenu1.htm
jsmenu2.htm
jsmenu3.htm
jscont1.htm
jscont2.htm
jscont3.htm

Ray

 

[JSMITH242B]

Thanks Ray