Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations bkrike on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Show Javascript Navigation Menu expanded in JSP Page....

Status
Not open for further replies.
sheed

sheed

Programmer
Jun 14, 2005
38
US
Need some help in the drop down menus. My menu hierarchy is:

Code: 
AMenu
|
 -BMenu
 -CMenu
 -DMenu
  |
   -EMenu
   -FMenu
HMenu
|
 IMenu

Above each and every node is a link to some page. AMenu and HMenu are at same level with nested sub-menus. I have this whole nav bar in a separate jsp file and is placed on each page and used IFRAME that contains the above navigation page.
If a user clicks on AMenu it shows some page now in this page how can I show the menu with AMenu Hightlighted with expanded sub-menus and HMenu collapsed. Same way now if a user clicks on CMenu I want to show the AMenu structure expanded with CMenu highlighted and HMenu collapsed. Now if a user clicks on HMenu I just want to show HMenu highligted and expanded while AMenu to be collapsed and minimized.

I have used iframe to hold the Navigation so I can include it in my jsp pages along with other content. Any help is appreciated.

Code: 
<html>
............Some content
............
<IFRAME SRC="nav.jsp" width="214" frameborder="0" scrolling="no" marginwidth="0" height="400"
    <!-- Alternate content for non-supporting browsers -->
</IFRAME>
.......................
.................. More Content
</html>

snippet of navigation itself:

Code: 
<c onclick="javascript:pull('AMenu12');"><a href="busin.jsp">Business</a></c>
			<d id="AMenu12">
				<ul>
					<li><a href="beg.jsp">BMenu</a></li>
					<li><a href="end.jsp">CMenu</a></li>
					<li><a href="start.jsp">DMenu</a></li>
					<li><a href="go1.jsp">&nbsp;&nbsp;EMenu</a></li>
					<li><a href="main.html">&nbsp;&nbsp;FMenu</a></li>
				</ul>
			</d>
		<c onclick="javascript:pull('HMenu22');"><a href="#">Contact</a></c>
			<d id="HMenu22">
				<ul>
					<li><a href="mail.jsp">IMenu</a></li>
				</ul>
			</d>

Actually I wanted to make DMenu to collapse too but can't figure out how to do it so just have indented.

Thanks


 
Sort by date Sort by votes
Please do not cross-post across forums (JSP forum).

--------------------------------------------------
Free Java/J2EE Database Connection Pooling Software
 
Upvote 0 Downvote
Surely you would be better off breaking out of frames completely and using the include functionality to include the navigation code that way? That's the smart way to do it.

There are many examples in the forum FAQ section and on the web that show how to do this. I would assume that your navigation is built up using <ul> and <li> elements (and if it isn't you should do so and use CSS to restyle)... since that will greatly ease the process of adapting it to work as you want using javascript.

Let us know if this is the thread you are continuing... and if you have any problems or can't find the FAQs.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch
[/tt]
 
Upvote 0 Downvote
I have my menu built using using <ul> and <li> along with css and javascript. Can you please provide some reference for keeping teck of the menus selected and collapse expand. Any help is appreciated. Thanks
 
Upvote 0 Downvote
Here is a link to a thread I posted in the HTML forum a while back...
thread215-1115349

Basically a site that shows lots of these kinds of navigation elements.

I wouldn't bother attempting to try and store the actual state of the navigation... you can instead query the style of the various elements to control them.

Example:
Code: 
<ul>
 <li>*1*</li>
 <li>*2*
  <ul>
   <li>*3*</li>
   <li>*4*</li>
  </ul>
 </li>
 <li>*5*</li>
</ul>
Initially you would output all ULs and LIs as I have above. I would use CSS to set all ul li ul elements to be display:none. This effectively ends up showing just the top level UL block and it's LIs. When the user clicks on menu item *2* in the example above, I can test the value of the child UL's display style... if it is 'block' then make it 'none' (else make it 'block').

If you want to ensure only one level can be opened at one time, then you might loop through the whole navigation UL block and set all child UL blocks to display none... before finally setting the child UL block for the clicked LI to be 'block'. Of course... you could also store a reference to the last UL block that was set to display:block and use that to pinpoint the lement directly.

Another way may include setting custom attributes on the LIs using javascript to manage the state of the navigation. This can have it's advantages... but personally I wouldn't bother... there are better ways to do it :)

The sort of javascript you actually need to do this is pretty minimal. You can easily apply it to existing markup without modifying the markup. The following link shows a very simple menu system using my initial suggestion of testing the state using the current style...


Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch
[/tt]
 
Upvote 0 Downvote
Your sample style at is what I'll reference to create a template. But I still don't understand how I keep the state of Menu on each a requested page any help is appreciated. I also looked at but all I found out is building a Menu. In your sample when a page is initially loaded it looks like:

Code: 
. Ask.Jeeves 
. [+] Google.com 
. [+] Yahoo.com

Now clicking [+] in front of Google.com will look like.

Code: 
. Ask.Jeeves 
. [-] Google.com 
     . Google.co.ie
     . Google.co.ie
     . [+] Google.co.nz 
. [+] Yahoo.com

Lets's say now if I click on Google.co.ie it takes you to sample.html and on this requested page how can I show the following menu hierarchy with Google.co.ie bold/underlined showing what menu content you clicked and are viewing the content i.e.

Code: 
. Ask.Jeeves 
. [-] Google.com 
     . Google.co.ie
     . Google.co.ie
     . [+] Google.co.nz 
. [+] Yahoo.com

Same way clicking Google.com or Yahoo.com or Ask.Jeeves shows you the following hierarchy on the requested page. i.e.

Code: 
. Ask.Jeeves 
. [+] Google.com 
. [+] Yahoo.com

I'll really appreciate for the help.

Thanks again.
 
Upvote 0 Downvote
I would write the navigation HTML inside a JSP that does some work "back-end"... and outputs a class on the selected "path" to the page clicked. So a little CSS is going to be required... and some server-side JSP code.

One way might be to have a mapping of pages <-> navigation items... the server-side code can check this to ensure the correct path is selected.

Another way could be to use the path in the location of the browser to figure out where you are in the heirarchy and set styles on page load accordingly.

You could do a similar solution using javascript by querying the location of the current document and programatically expanding the menu on page load.

I have used all 3 methods above in the past.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch
[/tt]
 
Upvote 0 Downvote
can u please provide a small sample. Thanks
 
Upvote 0 Downvote
can someone please please help me. Thanks
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
822
lexer
lexer
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
trevil620
  • Locked
  • Question
SoThink DHTML Menu Conversion
Replies
0
Views
800
trevil620
trevil620
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
942
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top