CSS Codes
CSS Layouts
Page 1 of 4 123 ... LastLast
Results 1 to 10 of 35

Thread: Switch Menu Additions

  1. 03-22-2005, 06:04 PM #1
    kdm2918
    kdm2918 is offline New Comer (less than 5 posts)
    Join Date
    Mar 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post Switch Menu Additions

    Script: DD Switch Menu
    http://www.dynamicdrive.com/dynamici...switchmenu.htm

    Hi
    I hope this is a an easy question. What I would like to know is there any way to add to the Switch Menu code so it can have more than one level of sub menus. Using the menu as is show at the link above I would like to have a second menu that drops down from the "What's New" text that is below the "Site Menu" pick.

    Thanks for any help. KDM2918
  2. 03-24-2005, 04:14 AM #2
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    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

    Not too easy for me but, this way I learn something too . Still haven't figured out how to extend the persistence to these added levels.

    OK, here we go, add to the style section (this is where you can change the look of these new elements):

    Code:
    .submenutitle {

cursor:pointer;
margin-top:4px;
margin-bottom: 2px;
background-color:#ECECFF;
color:#000000;
width:110px;
padding:2px;
text-align:center;
font-weight:bold;
font-size:smaller;
/*/*/border:1px solid #000000;/* */ 
}

.ssubmenu{
margin-bottom: 0.5em;
}
    Just below the line that says:
    Code:
    document.write('.submenu{display: none;}\n')
    add this line:
    Code:
    document.write('.ssubmenu{display: none;}\n')
    Just below the SwitchMenu function (just above the line that says "function get_cookie(Name) {") add this function:
    Code:
    function SwitchsubMenu(obj){
	if(document.getElementById){
	var sel = document.getElementById(obj);
	var sar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
		if(sel.style.display != "block"){ //DynamicDrive.com change
			for (var i=0; i<sar.length; i++){
				if (sar[i].className=="ssubmenu") //DynamicDrive.com change
				sar[i].style.display = "none";
			}
			sel.style.display = "block";
		}else{
			sel.style.display = "none";
		}
	}
}
    Now in the markup (HTML section), here is how things will look, I added two inner switch menus so you get the idea, one where you said you wanted it and one at the end of the existing 'Site Menu' listings. Following this format, you can add as many of these as you like. Example HTML:

    HTML Code:
    <!-- Keep all menus within masterdiv-->
<div id="masterdiv">

	<div class="menutitle" onclick="SwitchMenu('sub1')">Site Menu</div>
	<span class="submenu" id="sub1">
          <div class=submenutitle onclick="SwitchsubMenu('ssub1')">What's New</div>
          <span class=ssubmenu id=ssub1>
                - <a href="http://www.statestreetblues.com/">State Street Blues Stroll!</a><br>
                - <a href="http://www.mediajazzbynight.com/">Media Jazz by Night!</a>
          </span>
		- <a href="../hot.htm">What's hot</a><br>
		- <a href="../revised.htm">Revised Scripts</a><br>
		- <a href="../morezone/">More Zone</a>
          <div class=submenutitle onclick="SwitchsubMenu('ssub2')">Yet More Choices</div>
          <span class=ssubmenu id=ssub2>
                - <a href="http://www.yahoo.com/">Yahoo!</a>
          </span>
	</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="files/about_off.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>
    Perhaps someone else who is more familiar with cookies than I will jump in here and help us expand the persistence part of this script to include these new ssub menus.
  3. 03-24-2005, 05:49 AM #3
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    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 Persistence

    Finally figured the persistence thing, if you want your new sub, sub menus to have persistence substitute these two functions for the ones of the same names in the code:

    Code:
    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"
}
if (persistmenu=="yes"){
var scookiename=(persisttype=="sitewide")? "sswitchmenu" : "s"+window.location.pathname
var scookievalue=get_cookie(scookiename)
if (scookievalue!="")
document.getElementById(scookievalue).style.display="block"
}
}

function savemenustate(){
var inc=1, blockid=""
var sinc=1, sblockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
while (document.getElementById("ssub"+sinc)){
if (document.getElementById("ssub"+sinc).style.display=="block"){
sblockid="ssub"+sinc
break
}
sinc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
var scookiename=(persisttype=="sitewide")? "sswitchmenu" : "s"+window.location.pathname
var scookievalue=(persisttype=="sitewide")? sblockid+";path=/" : sblockid
document.cookie=scookiename+"="+scookievalue
}
  4. 03-24-2005, 11:21 PM #4
    kdm2918
    kdm2918 is offline New Comer (less than 5 posts)
    Join Date
    Mar 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Talking DD Switch Menu

    Hi jscheuer1:

    Thank you, the code you provided works great. It does just what I needed it to do. You have been a life saver.

    Thanks Again
    KDM2918
  5. 04-19-2005, 05:15 PM #5
    miradoro
    miradoro is offline Junior Coders
    Join Date
    Apr 2005
    Posts
    54
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    my name is ivan and i was wondering if you could help me solve a problem.

    i am using the Script: DD Switch Menu
    http://www.dynamicdrive.com/dynamic.../switchmenu.htm


    What I would like to know is there any way to add to the Switch Menu code so it can have as many sub menus as i need.

    i found this page http://www.dynamicdrive.com/forums/s...ead.php?t=2166

    but i dont know how to add more submenus

    Please advise,

    Thank you very much
  6. 04-19-2005, 05:38 PM #6
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    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

    Here is the entire code for a new demo with comments in the HTML section to show how the nested sub menus are added:

    Code:
    <html>
<head>
<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;
}

.submenutitle {

cursor:pointer;
margin-top:4px;
margin-bottom: 2px;
background-color:#ECECFF;
color:#000000;
width:110px;
padding:2px;
text-align:center;
font-weight:bold;
font-size:smaller;
/*/*/border:1px solid #000000;/* */ 
}

.ssubmenu{
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
* Modified by John Davenport Scheuer for nested sub menus
***********************************************/

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('.ssubmenu{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 SwitchsubMenu(obj){
	if(document.getElementById){
	var sel = document.getElementById(obj);
	var sar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
		if(sel.style.display != "block"){ //DynamicDrive.com change
			for (var i=0; i<sar.length; i++){
				if (sar[i].className=="ssubmenu") //DynamicDrive.com change
				sar[i].style.display = "none";
			}
			sel.style.display = "block";
		}else{
			sel.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"
}
if (persistmenu=="yes"){
var scookiename=(persisttype=="sitewide")? "sswitchmenu" : "s"+window.location.pathname
var scookievalue=get_cookie(scookiename)
if (scookievalue!="")
document.getElementById(scookievalue).style.display="block"
}
}


function savemenustate(){
var inc=1, blockid=""
var sinc=1, sblockid=""
while (document.getElementById("sub"+inc)){
if (document.getElementById("sub"+inc).style.display=="block"){
blockid="sub"+inc
break
}
inc++
}
while (document.getElementById("ssub"+sinc)){
if (document.getElementById("ssub"+sinc).style.display=="block"){
sblockid="ssub"+sinc
break
}
sinc++
}
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid
document.cookie=cookiename+"="+cookievalue
var scookiename=(persisttype=="sitewide")? "sswitchmenu" : "s"+window.location.pathname
var scookievalue=(persisttype=="sitewide")? sblockid+";path=/" : sblockid
document.cookie=scookiename+"="+scookievalue
}

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 id="masterdiv">

	<div class="menutitle" onclick="SwitchMenu('sub1')">Site Menu</div>
	<span class="submenu" id="sub1">
	<!-- Begin Sub Sub Menu 1 -->
          <div class=submenutitle onclick="SwitchsubMenu('ssub1')">What's New</div>
          <span class=ssubmenu id=ssub1>
                - <a href="http://www.statestreetblues.com/">State Street Blues Stroll!</a><br>
                - <a href="http://www.mediajazzbynight.com/">Media Jazz by Night!</a>
          </span><!-- End Sub Sub Menu 1 -->
		- <a href="../hot.htm">What's hot</a><br>
		- <a href="../revised.htm">Revised Scripts</a><br>
		- <a href="../morezone/">More Zone</a>
	<!-- Begin Sub Sub Menu 2 -->
          <div class=submenutitle onclick="SwitchsubMenu('ssub2')">Yet More Choices</div>
          <span class=ssubmenu id=ssub2>
                - <a href="http://www.yahoo.com/">Yahoo!</a>
          </span><!-- End Sub Sub Menu 2 -->
	</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="files/about_off.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>

</body>
</html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
  7. 04-19-2005, 06:08 PM #7
    miradoro
    miradoro is offline Junior Coders
    Join Date
    Apr 2005
    Posts
    54
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Smile Im still confused

    Hi,
    thanks for the quick response.
    Do you think you could you me an example with 4 submenus

    Thanks
  8. 04-19-2005, 06:42 PM #8
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    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

    OK, put this in place of the current masterdiv:

    HTML Code:
    <!-- Keep all menus within masterdiv-->
<div id="masterdiv">

	<div class="menutitle" onclick="SwitchMenu('sub1')">Site Menu</div>
	<span class="submenu" id="sub1">
	<!-- Begin Sub Sub Menu 1 -->
          <div class=submenutitle onclick="SwitchsubMenu('ssub1')">What's New</div>
          <span class=ssubmenu id=ssub1>
                - <a href="http://www.statestreetblues.com/">State Street Blues Stroll!</a><br>
                - <a href="http://www.mediajazzbynight.com/">Media Jazz by Night!</a>
          </span><!-- End Sub Sub Menu 1 -->
		- <a href="../hot.htm">What's hot</a><br>
		- <a href="../revised.htm">Revised Scripts</a><br>
		- <a href="../morezone/">More Zone</a>
	<!-- Begin Sub Sub Menu 2 -->
          <div class=submenutitle onclick="SwitchsubMenu('ssub2')">Yet More Choices</div>
          <span class=ssubmenu id=ssub2>
                - <a href="http://www.yahoo.com/">Yahoo!</a>
          </span><!-- End Sub Sub Menu 2 -->
	</span>

	<div class="menutitle" onclick="SwitchMenu('sub2')">FAQ/Help</div>
	<span class="submenu" id="sub2">
		- <a href="../notice.htm">Usage Terms</a><br>
			<!-- Begin Sub Sub Menu 4 -->
          <div class=submenutitle onclick="SwitchsubMenu('ssub4')">Sub Sub 4</div>
          <span class=ssubmenu id=ssub4>
                - <a href="http://www.yahoo.com/">Yahoo!</a>
          </span><!-- End Sub Sub Menu 4 -->
		- <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>
			<!-- Begin Sub Sub Menu 3 -->
          <div class=submenutitle onclick="SwitchsubMenu('ssub3')">Another Sub</div>
          <span class=ssubmenu id=ssub3>
                - <a href="http://www.statestreetblues.com/">State Street Blues Stroll!</a><br>
                - <a href="http://www.mediajazzbynight.com/">Media Jazz by Night!</a>
          </span><!-- End Sub Sub Menu 3 -->
	</span>

	<img src="files/about_off.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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
  9. 04-19-2005, 08:33 PM #9
    miradoro
    miradoro is offline Junior Coders
    Join Date
    Apr 2005
    Posts
    54
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Exclamation i didnt explained myself right

    Hi,

    thanks for the support...i think i didnt explain myself right

    i wanted to have submenus under the submenus. For instance,

    option A
    ->option Aa
    ->option Aab
    ->option Aabc
    -x
    -y
    -z
    option B
    ->option Ba
    ->option Bab
    ->option Babc
    -x
    -y
    -z

    i hope this clarifies my question
    Thanks
  10. 04-19-2005, 09:35 PM #10
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    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

    I don't understand that. Looks like it already does that. You can have (menu closed):

    item A
    item B
    item C

    say you click on item A, then you see:

    item A
    - item A1
    - item A2
    - item A3
    item B
    item C

    Now let's say item A1 has a nested sublevel. If you click on it, you get:

    item A
    - item A1
    -- item A1a
    -- item A1b
    -- item A1c
    - item A2
    - item A3
    item B
    item C

    You can add these nested sublevels to any of the level Xn elements and they each can have as many items on them as you want, just no more nesting. If you want more nesting than that, like:

    item A
    - item A1
    -- item A1a
    --- item A1a1
    --- item A1a2
    --- item A1a3
    -- item A1b
    -- item A1c
    - item A2
    - item A3
    item B
    item C

    and possibly more, it would be easier to get a menu that supports infinite nesting to begin with.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
« Previous Thread | Next Thread »

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
  •  

Forum Rules