PurpleMoggy's Blog
Loading...Switch Menu
Alright, I've had a number of requests about my 'More Links' section in the sidebar. Basically that's just DynamicDrive's Switch Menu script.
Click here for a demo as well as a tutorial.
From the demo, you'll notice that you can use styled text as well as an image.
The following is copied and pasted from that page:
Step 1: Insert the below code to the <HEAD> of your page:<style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}
.submenu{
margin-bottom: 0.5em;
}
</style>
<script type="text/javascript">
/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var persistmenu="yes" //"yes" or "no". Make sure each SPAN content contains an incrementing ID starting at 1 (id="sub1", id="sub2", etc)
var persisttype="sitewide" //enter "sitewide" for menu to persist across site, "local" for this page only
if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')
document.write('</style>\n')
}
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function onloadfunction(){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!="")
document.getElementById(cookievalue).style.display="block"
}
}
function savemenustate(){
var inc=1, blockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
}
if (window.addEventListener)
window.addEventListener("load", onloadfunction, false)
else if (window.attachEvent)
window.attachEvent("onload", onloadfunction)
else if (document.getElementById)
window.onload=onloadfunction
if (persistmenu=="yes" && document.getElementById)
window.onunload=savemenustate
</script>
Step 2: And herein lies the HTML code for the menu itself. Add the below where you want the menu to appear on your page:<!-- Keep all menus within masterdiv-->
<div id="masterdiv">
<div class="menutitle" onclick="SwitchMenu('sub1')">Site Menu</div>
<span class="submenu" id="sub1">
- <a href="new.htm">What's New</a><br>
- <a href="hot.htm">What's hot</a><br>
- <a href="revised.htm">Revised Scripts</a><br>
- <a href="morezone/">More Zone</a>
</span>
<div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div>
<span class="submenu" id="sub2">
- <a href="notice.htm">Usage Terms</a><br>
- <a href="faqs.htm">DHTML FAQs</a><br>
- <a href="help.htm">Scripts FAQs</a>
</span>
<div class="menutitle" onclick="SwitchMenu('sub3')">Help Forum</div>
<span class="submenu" id="sub3">
- <a href="http://www.codingforums.com">Coding Forums</a><br>
</span>
<div class="menutitle" onclick="SwitchMenu('sub4')">Cool Links</div>
<span class="submenu" id="sub4">
- <a href="http://www.javascriptkit.com">JavaScript Kit</a><br>
- <a href="http://www.freewarejava.com">Freewarejava</a><br>
- <a href="http://www.cooltext.com">Cool Text</a><br>
- <a href="http://www.google.com">Google.com</a>
</span>
<img src="about.gif" onclick="SwitchMenu('sub5')"><br>
<span class="submenu" id="sub5">
- <a href="http://www.dynamicdrive.com/link.htm">Link to DD</a><br>
- <a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a><br>
- <a href="http://www.dynamicdrive.com/contact.htm">Email Us</a><br>
</span>
</div>
Customization
So you're now wondering how flexible the script is when it comes to customizing the menu to your liking. The good news is, quite.
Physical changes (adding/deleting items) to the menu are all done in the code of Step 2. Study it for a while, and you'll soon see the required structure. All menu items must be added within the "masterdiv' DIV. For each item, wrap the containing links in a SPAN tag with a unique incrementing ID starting with "sub1", (ie: "sub1", "sub2" etc), and use this ID within the onClick event handler to expand/contract it. As you can see in the demo, an image can be used for the menu item itself instead of plain text.
To make cosmetic changes to the menu, it is recommended you do so via CSS, by editing the style sheet of Step 1.
Enjoy this fully DOMesticated script!
There's one slight change I made, and that was adding span tags inside the div tags of line 4 in the 2nd codebox
<div class="menutitle" onclick="SwitchMenu('sub1')"><span>Site Menu</span></div>and then I styled the CSS by changing .menutitle{} to .menutitle span{} (from the 1st codebox). This let me just underline the words instead of the entire line.
16 comments:
hi purple! you are back to action again! good to hear from you!I think i will change to asynchronous sidebar soon...^^
It is very nice... but how do you manage to close a menu at the same time when you open another one???
@Naxos
That's automatic, as soon as you open one sub-category it automatically closes whichever one you previously had opened.
Yes, Switch menu is very nice, especially because one can customize the look so easily.
I decided to display it with little folder icons. =)
I'm a bit puzzle, as I understand, I add the 1st step through HTML edit, what about the 2nd step? do I add it in the page element of on the same page as HTML edit under "header"
@krissie128
I just added it to a new HTML/Javascript page element... that way it's easy to drag 'n drop wherever I want later on, but you could add it directly in the Edit HTML page too.
Thanks for the help! Everything works great except 1 problem.
Whenever the mouse hover on the switch menu, instead of "hand" pointer sign, it's change to "text" pointer sign. Is it my template problem or I've done something wrong within the steps? Please Help!
Thanks in Advance!
@krissie
the line in the 1st codebox that says cursor:pointer; is supposed to make the mouse cursor show up like you're hovering over a link
See here for more on CSS rules for the mouse cursor.
Thx for the help, sort out the problem, it was the 1st line code style type="text/css" after deleting it everything back to normal!
Great site! learn a lot from here.
Hope to hear more from you soon!
hey purple, i tried to copy the codes fr de 1st box into /head tag, but couldn't save it. it says Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The entity name must immediately follow the '&' in the entity reference. What does that mean?
@casey
In that 1st codebox there's 2 parts, the first is the CSS part
<style type="text/css">
... (lots of stuff)
</style>
and the 2nd part is the javascript part
<script type="text/javascript">
... (even more stuff)
</script>
change the javascript part to
<script type="text/javascript">
//<![CDATA[
... (even more stuff again)
//]]>
</script>
The CDATA part in there will make it ignore the errors
tks purple, it works!
Great widget, Purple! I've added one to my blog - and expanded it a little.
I had one link list that was a BlogRolling one (with a bit of Javascript from BlogRolling to generate the list of links), and I wanted to see if I could include it in the switch menu. It works!
I thought the info might be of use to someone, so I've blogged about it and linked to your blog.
Thanks again!
dude you are the best.... amazing blog.... thnx n keep it up!!!
http://free-downloadz.blogspot.com
I have added it to mine and it does not expand it stays open. Not sure what I did wrong? I put first part in the head and second into an javascript/html element. What am I missing?
nice blog i really like the purple thing it looks cool
ABDM
http://mohamed-shinycars.blogspot.com/
Post a Comment