Accordian Menu Script, How to's? Options

[theerinkal]

I want to add an accordian menu script to my site because I think it'll be more efficient then just having the other links that people have. I know that you need a sdmenu.js file and all that but I have no clue on how to add it to my site and make it so that when people click on the headers it shows you all of the 'daughter' links.

If you don't know what I'm talking about. I want the script to be just like the one on this site.

Please help. If there are any tut's on here please link them for me. I've been searching google but that's no help.

[theerinkal]

After you upload the .js file, you link that in your .html index file.

does your index file have to be .html or can it be .php because right now it's .php

[theerinkal]

I believe it can be .php, though, I've never used php pages, so idk.

ok.

After that what do I do?

[fixtatik]

you can attach javascript files to any page that supports HTML (meaning you can not put them in a .css or .xml file). for the specific effect, you're looking for:

the sdmenu.js file:

CODE

function SDMenu(id) {
if (!document.getElementById || !document.getElementsByTagName)
return false;
this.menu = document.getElementById(id);
this.submenus = this.menu.getElementsByTagName("div");
this.remember = true;
this.speed = 3;
this.markCurrent = true;
this.oneSmOnly = false;
}
SDMenu.prototype.init = function() {
var mainInstance = this;
for (var i = 0; i < this.submenus.length; i++)
this.submenus[i].getElementsByTagName("span")[0].onclick = function() {
mainInstance.toggleMenu(this.parentNode);
};
if (this.markCurrent) {
var links = this.menu.getElementsByTagName("a");
for (var i = 0; i < links.length; i++)
if (links[i].href == document.location.href) {
links[i].className = "current";
break;
}
}
if (this.remember) {
var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)");
var match = regex.exec(document.cookie);
if (match) {
var states = match[1].split("");
for (var i = 0; i < states.length; i++)
this.submenus[i].className = (states[i] == 0 ? "collapsed" : "");
}
}
};
SDMenu.prototype.toggleMenu = function(submenu) {
if (submenu.className == "collapsed")
this.expandMenu(submenu);
else
this.collapseMenu(submenu);
};
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);
};
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);
};
SDMenu.prototype.collapseOthers = function(submenu) {
if (this.oneSmOnly) {
for (var i = 0; i < this.submenus.length; i++)
if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed")
this.collapseMenu(this.submenus[i]);
}
};
SDMenu.prototype.expandAll = function() {
var oldOneSmOnly = this.oneSmOnly;
this.oneSmOnly = false;
for (var i = 0; i < this.submenus.length; i++)
if (this.submenus[i].className == "collapsed")
this.expandMenu(this.submenus[i]);
this.oneSmOnly = oldOneSmOnly;
};
SDMenu.prototype.collapseAll = function() {
for (var i = 0; i < this.submenus.length; i++)
if (this.submenus[i].className != "collapsed")
this.collapseMenu(this.submenus[i]);
};
SDMenu.prototype.memorize = function() {
if (this.remember) {
var states = new Array();
for (var i = 0; i < this.submenus.length; i++)
states.push(this.submenus[i].className == "collapsed" ? 0 : 1);
var d = new Date();
d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));
document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + "; expires=" + d.toGMTString() + "; path=/";
}
};

you should add it between your <head> tags on your page as this:

CODE

<script type="text/javascript" src="/path/to/sdmenu.js"></script>

after that, you need a new variable, also in your header, after the sdmenu.js file.

CODE

<script type="text/javascript">
// <![CDATA[
  var myMenu;
  window.onload = function() {
    myMenu = new SDMenu("my_menu");
    myMenu.init();
  };
// ]]>
</script>

finally, you just need the HTML to make it work, formed as such:

CODE

<div id="my_menu" class="sdmenu">
  <div>
    <span>Header 1</span>
    <a href="URL">Link</a>
    <a href="URL">Link</a>
    <a href="URL">Link</a>
  </div>
  <div>
    <span>Header 2</span>
    <a href="URL">Link</a>
    <a href="URL">Link</a>
    <a href="URL">Link</a>
  </div>
</div>

doing it like that will start each menu item expanded. if you want it to start collapsed, add class="collapsed" to any div elemnt inside the div "my_menu".

you can also add a few other options inside the second javascript code.

after myMenu = new SDMenu("my_menu"); and before myMenu.init();

CODE

myMenu.speed = 1;          // sliding speed
myMenu.oneSmOnly = true;   // to expand one menu at a time

after myMenu.init();

CODE

var firstSubmenu = myMenu.submenus[0];
myMenu.expandMenu(firstSubmenu);    // start submenu #0 expanded (first one)
myMenu.collapseMenu(firstSubmenu);  // start #0 collapsed
myMenu.toggleMenu(firstSubmenu);    // expand if another is expanded, collapse if another is collapsed

myMenu.expandAll();                 // expand all submenus
myMenu.collapseAll();               // collapse all submenus

the previous code can be used for any submenus in your menu. for the second submenu, add in var secondSubmenu = myMenu.submenus[1];, for the third menu, var thirdSubmenu = myMenu.submenus[2]; and so forth.

keep in mind, the script is from dynamic drive. credit is due where credit is deserved.

[theerinkal]

It doesn't work.

Live Preview (top left nav box)

I have the navigation code (second codebox) in a div id box is that the problem?

CODE

<head><script type="text/javascript" src="/path/to/sdmenu.js"></script>
<script type="text/javascript">
// <![CDATA[
var myMenu;
window.onload = function() {
myMenu = new SDMenu("my_menu");
myMenu.init();
};
// ]]>
</script></head>

CODE

<div id="my_menu" class="sdmenu">
<div class="collapsed">
<span>Header 1</span>
<a href="URL">Link</a>
<a href="URL">Link</a>
<a href="URL">Link</a>
</div>
<div class="collapsed">
<span>Header 2</span>
<a href="URL">Link</a>
<a href="URL">Link</a>
<a href="URL">Link</a>
</div>
</div>

[fixtatik]

you need to type in the path to the javascript file where it says "/path/to/sdmenu.js". save it as sdmenu.js and upload it to your server.

[theerinkal]

it works yay! :-)

One more Question: Can I use it on a page that has .php on it as an eding? like index.php or something like that.

[alek]

I strongly recommend you visit Dynamic drive that website has amazing and easy to use javascript (including an accordion navigation)

[theerinkal]

I did but it was confusing there.

You can close this topic now.

[manny-the-dino]

Topic Closed & Moved