How to link menu title using Slashdot Menu?

[Jarik]

1) Script Title: Slashdot Menu

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex1/slashdot.htm

3) Describe problem: Hello, with regards to the Slashdot Menu, is it possible to link the menu title? If so, how?

I've tried several methods but they all seem to take the form of the submenu link format properties. I'd like to be able to link the menu title(s) to another page, perhaps with an underline mouseover. These menus that will be linked do not have submenus.

Any assistance will be appreciated. Thanks!

[codeexploiter]

You can find one Demo of the thing you've mentioned as the attachment. Open the zip browse the HTML page and

(a) If you hover your mouse you can view the underline in the menu header.

(b) If you click on the menu title then it will first do whatever the slashdot menu code intends after it will go to the link you've mentioned.

I've made changes in the following areas:

(1) In sdmenu.js

Done the changes in the following methods. Highlighted the newly added code

SDMenu.prototype.expandMenu = function(submenu) {
	var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
	var links = submenu.getElementsByTagName("a");
	for (var i = 0; i < links.length; i++)
		fullHeight += links[i].offsetHeight;
	var moveBy = Math.round(this.speed * links.length);
	
	var mainInstance = this;
	var intId = setInterval(function() {
		var curHeight = submenu.offsetHeight;
		var newHeight = curHeight + moveBy;
		if (newHeight < fullHeight)
			submenu.style.height = newHeight + "px";
		else {
			clearInterval(intId);
			submenu.style.height = "";
			submenu.className = "";
			mainInstance.memorize();
		}
	}, 30);
	this.collapseOthers(submenu);
	if(submenu.getElementsByTagName("span")[0].title){
		window.location.href = submenu.getElementsByTagName("span")[0].title;
	}
};
SDMenu.prototype.collapseMenu = function(submenu) {
	var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
	var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length);
	var mainInstance = this;
	var intId = setInterval(function() {
		var curHeight = submenu.offsetHeight;
		var newHeight = curHeight - moveBy;
		if (newHeight > minHeight)
			submenu.style.height = newHeight + "px";
		else {
			clearInterval(intId);
			submenu.style.height = "";
			submenu.className = "collapsed";
			mainInstance.memorize();
		}
	}, 30);
	if(submenu.getElementsByTagName("span")[0].title){
		window.location.href = submenu.getElementsByTagName("span")[0].title;
	}
};

2. In sdmenu.css

Add the following CSS style in the CSS file.

div.sdmenu div span:hover{text-decoration:underline;}

3. The HTML markup needs to be adjusted. Precisely the span elements acting as the menu titles. Something like the following:

<span title="http://www.google.com">Online Tools</span>

In the menu title span element you use the 'title' attribute to specify the URL to which the page needs to be changed if one clicks on the menu title.

The attached files contains all the above mentioned changes in it and you just need to browse the 'index.html' file after unzipping.

Hope this helps.

[Jarik]

Codex - Thank you so much for your help! I've added your changes to my files and they work great. Only thing is I have the Slashdot Menu in an iframe so when clicking on the linked menu title, the new page loads within the iframe and not the whole page. Is there a code I can add to the span element to get the link to load "_top" of the current page?

I tried the following but it didn't work:

<span target="_top" title="http://www.google.com">Online Tools</span>

Again, thanks for all your help!

[codeexploiter]

The "target="_top" will not work as it used to work on an anchor element in this case. If that is the case then you need to change it in the JS part:

Try to modify the following lines in 'expandMenu' and 'collapseMenu' functions in 'sdmenu.js' file

window.location.href = submenu.getElementsByTagName("span")[0].title;

with this one

parent.window.location.href = submenu.getElementsByTagName("span")[0].title;

It should work from an iframe and you don't have to use the 'target=_top' in the span element. The click on the menu title will open the URL in the main window (parent of the iframe window) directly.

Hope this helps.

[Jarik]

Codex - The code you provided works...links now open in the whole page.

But for some reason, the unlinked menu titles (with submenus) no longer expand to display the submenu items but rather links directly to other pages, in this case, the Contact page listed at the very bottom of the menu. I recall all this working properly last night. I may have done something wrong?

Here's a look at my HTML code for the menu, please let me know what I am doing wrong.

<div style="float: left" id="my_menu" class="sdmenu">
      <div>
        <span title="index.htm">HOME</span>
      </div>
           <div>
        <span title="about.htm">ABOUT</span>
      </div>
      <div>
        <span>RESIDENTIAL</span>
        <a href="sales.htm">Sales</a><u> </u>
        <a href="rentals.htm">Rentals</a><u> </u>
      </div>
      <div>
        <span>COMMERCIAL</span>
        <a href="">Retail Leasing</a><u> </u>
        <a href="">Investment Sales</a><u> </u>
        <a href="">Business Opportunities</a><u> </u>
      </div>
      <div class="collapsed">
        <span title="townhouse.htm">TOWNHOUSE</span>
      </div>
      <div>
        <span title="intlproperties.htm">INT'L PROPERTIES</span>
      </div>
      <div>
        <span title="developments.htm">DEVELOPMENTS</span>
      </div>
      <div>
        <span>SERVICES</span>
        <a href="">Appraisal</a><u> </u>
      </div>
      <div>
        <span title="agents.htm">AGENTS</span>
      </div>
      <div>
        <span title="contact.htm">CONTACT</span>
      </div>
</div>

Thank you.

[Jarik]

I think I determined the problem. By removing a menu title, the menu titles with submenus expand to show the links below them. Perhaps there is a limit of menu titles that can be displayed at one time for things to work properly? I went from 10 menu titles to 9 and it works fine now.

Thanks!