PDA

View Full Version : Switch Menu Script CSS Assistance



Showtime2k6
10-15-2005, 05:54 AM
Hey, I am in the process of creating a website using the "Switch Menu Script" under DD. I edited everything and have it all how I want, except for the CSS part of it. Since I know nothing about CSS, I'll explain exactly what I'm trying to do.

First of all, the buttons are underneath each other, on the example they have for the Switch Menu script http://www.dynamicdrive.com/dynamicindex1/switchmenu.htm
they have the "Site Menu" button above the "FAQ/Help" button. What I would want is all of those buttons next to eachother instead.

To make it all convenient, here is the CSS code I'm using from Step 1 from that page(I edited the colors and such):

<style type="text/css">
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#00000;
color:#0000FF;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000099;/* */
}

.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>



Thanks in advance.

jscheuer1
10-17-2005, 07:06 AM
The way to do that would be to set the titles to inline display:


.menutitle{
display:inline;
cursor:pointer;
margin-bottom: 5px;
background-color:#00000;
color:#0000FF;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000099;/* */
}

But, this will cause more problems than it solves. The look you are going for would be easier to achieve if you started from a side by side menu script to begin with. The one that comes to mind is AnyLink Drop Down Menu (http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm). There are many others to choose from.