Results 1 to 2 of 2

Thread: Switch Menu Script CSS Assistance

  1. #1
    Join Date
    Oct 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Switch Menu Script CSS Assistance

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The way to do that would be to set the titles to inline display:

    Code:
    .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. There are many others to choose from.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •