PDA

View Full Version : Horizontal Switch Menu



soundwave
04-18-2005, 03:22 AM
Script: Switch Menu

http://www.dynamicdrive.com/dynamicindex1/switchmenu.htm


Hi, I'm a noob here. :D I have 2 questions actually....

1. Is there a way to make the switch menu horizontal?

2. How do I align the switch menu to the center of a site?

I really hope someone can help me with these. Thank you for your time. :)

jscheuer1
04-18-2005, 04:11 AM
Look at:

http://www.dynamicdrive.com/dynamicindex1/tabmouseover.htm

It is already horizontal and could be given similar styling (appearance) to the switch menu. You can change onmouseOver to onClick and eliminate the link for the headers, viola!

To center either of these scripts, use the <center></center> tags. Around the script for this menu, around the content HTML for the Switch Menu.

jscheuer1
04-18-2005, 05:08 AM
Well, you got me thinking, why not make the Switch Menu horizontal? Well, for one thing, I don't think it would look as nice as you might imagine. But, that's never stopped me before. Anyways, here is a replacement Demo for the Switch Menu, now horizontal and centered:
<html>
<head>
<title>Switch Menu script - Horizontal Demo</title>
<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{
text-align:left;
margin:0 0 0.5em 0.5em;
}

td.mnucont{
height:150px;
vertical-align:top;
padding:0;
}

</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>
</head>

<body>
<!-- Keep all menus within masterdiv-->
<div align="center" id="masterdiv">
<table style="border-collapse:collapse;border:0;"><tr><td class="mnucont">
<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>
</td><td class="mnucont">
<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>
</td><td class="mnucont">
<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>
</td><td class="mnucont">
<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>
</td><td class="mnucont" width="125">
<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>
</td></tr></table>
</div>

</body>
</html>

soundwave
04-18-2005, 06:50 AM
Well, you got me thinking, why not make the Switch Menu horizontal? Well, for one thing, I don't think it would look as nice as you might imagine.

actually after tweaking the code a little bit... it's perfect. Thanks so much, I really appreciate your help.