vertical navigation menus

daisypolly · Oct 10, 2005

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

dwarfthrower · Oct 10, 2005

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.

_{Never be afraid to share your dreams with the world.

There's nothing the world loves more than the taste of really sweet dreams.}

Rekcor · Oct 11, 2005

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!

daisypolly · Oct 11, 2005

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

Rekcor · Oct 11, 2005

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 '

http://.....'-part

before it, you should remove it first.

daisypolly · Oct 11, 2005

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

ointer;
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

ointer;
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

Rekcor · Oct 11, 2005

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

daisypolly · Oct 11, 2005

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

Rekcor · Oct 11, 2005

This works, but how can I open the menu and keep it open when an element in the submenu is clicked

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.

I understand, but without the use of an unique identifier it is not possible to open a particular submenu without the user clicking it.

daisypolly · Oct 11, 2005

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

Rekcor · Oct 11, 2005

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

http://javascript.internet.com/forms/passing-values-source.html)

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();

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!

vertical navigation menus

daisypolly

Programmer

dwarfthrower

Programmer

Rekcor

Programmer

daisypolly

Programmer

Rekcor

Programmer

daisypolly

Programmer

Rekcor

Programmer

daisypolly

Programmer

Rekcor

Programmer

daisypolly

Programmer

Rekcor

Programmer

Similar threads

Part and Inventory Search

Sponsor