Results 1 to 4 of 4

Thread: Horizontal Switch Menu

  1. #1
    Join Date
    Apr 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Horizontal Switch Menu

    Script: Switch Menu

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


    Hi, I'm a noob here. 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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    Look at:

    http://www.dynamicdrive.com/dynamici...bmouseover.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.
    - John
    ________________________

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

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    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 Code:
    <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>
    - John
    ________________________

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

  4. #4
    Join Date
    Apr 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Quote Originally Posted by jscheuer1
    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.

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
  •