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 Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

vertical navigation menus

Status
Not open for further replies.
daisypolly

daisypolly

Programmer
Apr 28, 2005
38
0
0
CA
Hi,

I am making a dhmtl menu and I want to keep the submenus open on their corresponding page by using one include file of the menu. For example,take this as my menu:

Fish
Salmon
Tuna

Flowers
Tulips
Lillies

I want the Fish submenu to open when I go to a page that is about fish(on my site) and I want the flower submenu to open when I got to a flowers page on my site. I want to highlight the location of the user so they can tell where they are. I don't know how to do this. Can someone please help me with this :(.

Thanks,
Sana
 
Sort by date Sort by votes
Is there any identifying feature of the pages that would enable the script to know if a particular page was about flowers or fish?

Once the topic of the particular page can be established it is a relatively straightforward exercise to show / hide the relevant sections of the menu.

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]
 
Upvote 0 Downvote
I assume you have a JS function like this

Code: 
function openSubmenu(submenuID)
{
}

Lets assume the fish submenu has ID=1. When the fish page loads, you could call this function in the body tag:

Code: 
<body onload="openSubmenu(1);">

Good luck!
 
Upvote 0 Downvote
Thanks for you reply. I have the pages of the menus in different directories, for example a fish directory contains pages regarding fish, we can see from the URL the different pages, I am not sure if this is really a good idea to use this?

Reckor: Your idea sound good, but I don't want to put the onload function in all my pages on the site. Instead I only want to put it inside the navigation bar and it detects which page it is on and loads the relevant menu.

Thanks for all your help!
Sunny
 
Upvote 0 Downvote
Ok. Maybe you could use the document.URL property when initialising the menu, something like

Code: 
if (document.URL=='fish.htm')
{
  openSubmenu(1); //open fish submenu
}

Of course it would be better to write a generic function, which loops through an array with possible URLs and opens the correct submenu.

Regards,
Koos

P.S. before I forget: document.URL has also the ' before it, you should remove it first.
 
Upvote 0 Downvote
Thanks, okay this is how my menu works at the moment:

I have a bunck of lists with anchor tags in it, I am calling the showmenu function and passing it the class of the link and it opens the submenu inside the corresponding list. My problem is I can't pass the link inside the generic function because it dosn't know which link to open.

Here is my source code:

CSS:

<style type="text/css">

#leftmenu{
width:132px;
margin:0;
background-image: url(/images/sdc-dsc/intracom/left_menu2.gif);
border-right: 2.0px outset #A7BFD7;
border-bottom: 2.0px outset #A7BFD7;
border-left: 1.0px outset #A7BFD7;
border-top: 1.0px outset #A7BFD7;
background-repeat:repeat-y;
background-color:#ADC4DB;
}
li.Main ul {
display: none;
}
li.Main{
list-style-type:none;
list-style-image:none;
}
ul.Item{
list-style-type:none;
border-style:groove;
border-width:1px;
border-right:none;
border-left:none;
border-color:#330066;
background-color:#FAFAFA;
margin-left:0;
}

a.mlinks:link,a.mlinks:visited{
font-size :80%;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
color: #FFFFFF;
text-decoration:none;
width:100%;height:100%;
cursor:pointer;
display:block;
padding-left:.5em;
padding-top:.2em;
padding-bottom:.2em;
border-style:solid;
border-width:1px;
border-right:none;
border-bottom:none;
border-left:none;
border-color:#FFFFFF;
}

a.slinks:link,a.slinks:visited{
font-weight:lighter;
font-family:Arial, Helvetica, sans-serif;
font-size:75%;
color:#333399;
width:100%;height:100%;
cursor:pointer;
text-decoration:none;
display:block;
padding-top:.2em;
padding-bottom:.2em;
padding-left:1.0em;
}

#Menu{margin-left:0;padding:0;}
#Menu a{text-decoration:none;}

.Main a:hover{
color:#003366;
width:100%;
height:100%;
background-color:#E8E8E8;
}
.rule{
margin-left:3.5px;
width:110px;
}

</style>

-----------------------------------------------------------
Javascript:

<script type="text/javascript" language="javascript">
function togSub(link) {

var myURL = window.location.href+"";
var menu = link.parentNode.getElementsByTagName('ul')[0];
var smenus = document.getElementsByTagName("ul");
for (i=0; i<smenus.length; i++){
if(smenus.className == 'Item'){
if (smenus.style.display == 'block'){
smenus.style.display='none';
smenus.parentNode.getElementsByTagName('a')[0].style.backgroundColor = '';
smenus.parentNode.getElementsByTagName('a')[0].style.color = '';
}
}
}
if(menu.className == 'Item'){
if(menu.style.display == ''){
menu.style.display = 'block';
link.style.backgroundColor = '#E8E8E8';
link.style.color = '#003366';

}
else{
menu.style.display = '';
link.style.backgroundColor = '';
link.style.color = '';
}
}
}


</script>

------------------------------------------------------------
HTML:

<div ID="leftmenu">
<ul ID="Menu">
<li class="Main"><a style="border-top:none;" href="#" class="mlinks">Main Link One </a></li>
<li class="Main"><a href="#" onclick="togSub(this); return false;" class="mlinks">Main Link Two</a>
<ul class="Item">
<li><a href="/directoryOne/something.html" class="slinks">SubMenu Option One</a></li>
<li><a href="/directoryOne/something2.html" class="slinks">SubMenu Option Two</a></li>
<li><a href="/directoryOne/something3.html" class="slinks">SubMenu Option Three</a></li>
<li><a href="/directoryOne/aomething4.html" class="slinks">SubMenu Option Four</a></li>
<li><a href="/directoryOne/something5.html" class="slinks">SubMenu Option Five</a></li>
</ul>
</li>
<li class="Main"><a href="#" class="mlinks">Main Link Three</a></li>
<li class="Main"><a href="#" onclick="togSub(this); return false;" class="mlinks">Main Link Four</a>
<ul class="Item">
<li><a href="#" class="slinks">SubMenu Option One</a></li>
<li><a href="#" class="slinks">SubMenu Option Two</a></li>
<li><a href="#" class="slinks">SubMenu Option Three</a></li>
</ul>
</li>

<li class="Main"><a href="#" onclick="togSub(this); return false;" class="mlinks">Main Link Five</a>
<ul class="Item">
<li><a href="#" class="slinks">SubMenu Option One</a></li>
<li><a href="#" class="slinks">SubMenu Option Two</a></li>
<li><a href="#" class="slinks">SubMenu Option Three</a></li>
</ul>
</li>

</ul>
</div>

------------------------------------------------------------

I am sorry if the code is a bit long, but this code is working so you should be able to run it if you cut and paste it in an html file. Could you help me by looking at the code. Thanks!

Sunny

 
Upvote 0 Downvote
Hi, Ive stripped your code a bit and this seems to work:

Code: 
<script type="text/javascript" language="javascript">
function togSub(item)
{
	if(item.style.display == ''){
  	item.style.display = 'block';
  }else{
    item.style.display = '';    
  }    
}


</script>
<div ID="leftmenu">                    
        <ul ID="Menu"> 
            <li class="Main"><a style="border-top:none;" href="#" class="mlinks">Main Link One </a></li>
            <li class="Main"><a href="#" onclick="togSub(document.getElementById('ML2')); return false;" class="mlinks">Main Link Two</a> 
                <ul class="Item" id="ML2"> 
                    <li><a href="/directoryOne/something.html" class="slinks">SubMenu Option One</a></li> 
                    <li><a href="/directoryOne/something2.html" class="slinks">SubMenu Option Two</a></li> 
                    <li><a href="/directoryOne/something3.html" class="slinks">SubMenu Option Three</a></li> 
                    <li><a href="/directoryOne/aomething4.html" class="slinks">SubMenu Option Four</a></li> 
                    <li><a href="/directoryOne/something5.html" class="slinks">SubMenu Option Five</a></li> 
                </ul> 
            </li> 
            <li class="Main"><a href="#" class="mlinks">Main Link Three</a></li>
            <li class="Main"><a href="#" onclick="togSub(document.getElementById('ML4')); return false;" class="mlinks">Main Link Four</a>
                <ul class="Item" id="ML4"> 
                    <li><a href="#" class="slinks">SubMenu Option One</a></li>
                    <li><a href="#" class="slinks">SubMenu Option Two</a></li>
                    <li><a href="#" class="slinks">SubMenu Option Three</a></li>
                </ul>
            </li>
        
            <li class="Main"><a href="#" onclick="togSub(document.getElementById('ML5')); return false;" class="mlinks">Main Link Five</a>
                <ul class="Item" id="ML5"> 
                    <li><a href="#" class="slinks">SubMenu Option One</a></li> 
                    <li><a href="#" class="slinks">SubMenu Option Two</a></li> 
                    <li><a href="#" class="slinks">SubMenu Option Three</a></li>
                </ul> 
            </li>

</ul>
</div>

the main difference is that I toggle one particular submenu in stead of recalculating the whole thing. Each submenu needs a unique identifier (id="ML4" e.g.).

If you combine this with:

Code: 
//get current filename
var fileName = document.URL.substring(document.URL.lastIndexOf('/')+1)

if (fileName=="fish.htm")
{
	togSub(document.getElementById('ML4'));
}

The submenu ML4 is openend when the filename is 'fish.htm'

Regards,
Koos
 
Upvote 0 Downvote
Thanks, yeah I think it doesn't work well if i recalculate the whole thing. I wanted to do that so when I add more menu options I don't have to pass any parameters or anything to the function, so a developer except me can add and modify the menu easily.

This works, but how can I open the menu and keep it open when an element in the submenu is clicked. Thanks for all you help, I really appreciate it.

Sunny
 
Upvote 0 Downvote
This works, but how can I open the menu and keep it open when an element in the submenu is clicked
Click to expand...

Can you elaborate on this question? On my pc the menu stays open when I click an element in the submenu...

I wanted to do that so when I add more menu options I don't have to pass any parameters or anything to the function, so a developer except me can add and modify the menu easily.
Click to expand...

I understand, but without the use of an unique identifier it is not possible to open a particular submenu without the user clicking it.
 
Upvote 0 Downvote
okay..when you click on a submenu and the submenu takes you to a different page the menu is refreshed. For example if I got to a page salmon.html from within the fish menu I want the fish menu to open and show the salmon element highlighted.

Let me know if you need more info.

Thanks,
Sunny
 
Upvote 0 Downvote
See a previous post of mine:

Code: 
//get current filename
var fileName = document.URL.substring(document.URL.lastIndexOf('/')+1)

if (fileName=="fish.htm")
{
    togSub(document.getElementById('ML4'));
}

The submenu ML4 is openend when the filename is 'fish.htm'

You could also pass some identifier with the URL in your link, e.g. you link to fish.html?openMenu=4

To fetch this openMenu variable, you could use this function (which I copied from
Code: 
function getParams() {
var idx = document.URL.indexOf('?');
var params = new Array();
if (idx != -1) {
var pairs = document.URL.substring(idx+1, document.URL.length).split('&');
for (var i=0; i<pairs.length; i++) {
nameVal = pairs[i].split('=');
params[nameVal[0]] = nameVal[1];
   }
}
return params;
}
params = getParams();
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

nanbread
  • Locked
  • Question
Sweeping drop-down menus
Replies
0
Views
124
nanbread
nanbread
serverguy78
  • Locked
  • Question
Problems with navigation
Replies
2
Views
13
serverguy78
serverguy78
Diggum1
  • Locked
  • Question
javascript text navigation system
Replies
6
Views
33
Diggum1
Diggum1
arbo80
  • Locked
  • Question
Drop Down menus work in IE 7 and Firefox but don't work in IE 6
Replies
0
Views
14
arbo80
arbo80
Zhris
  • Locked
  • Question
Select and go navigation - multiple menus 1
Replies
2
Views
13
Zhris
Zhris

Part and Inventory Search

Sponsor

Back
Top