PDA

View Full Version : Add smoothness to javascript menu



crazymao
04-09-2012, 04:40 AM
1) Script Title:
Switch Menu

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/switchmenu.htm

3) Describe problem:
I'm wondering how to/what code to add to make it drop down smoothly, aka slide down instead of just appear and dissapear. I imagine it's not that difficult to do but I'm not a great whiz at javascript so any help would be appreciated, thanks!

vwphillips
04-09-2012, 10:31 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></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{
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
var duration=1000;

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display:none;overflow:hidden}\n')
document.write('</style>\n')
}

function SwitchMenu(nu){
var ary = SwitchMenu.ary[nu-1],lst;
if (SwitchMenu.lst&&SwitchMenu.lst!=ary){
lst=SwitchMenu.lst;
clearTimeout(lst[4]);
animate(lst,lst[2],0,new Date(),duration*Math.abs((lst[2])/lst[1]));
}
if(ary){ //[object],76,0,1,
ary[0].style.display='block';
clearTimeout(ary[4]);
animate(ary,ary[2],ary[1],new Date(),duration*Math.abs((ary[2]-ary[1])/ary[1]));
SwitchMenu.lst=ary;
savemenustate(ary[3]);
}
}

function animate(ary,f,t,srt,mS){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
ary[2]=Math.max(now,f<0||t<0?now:0);
ary[0].style.height=ary[2]+'px';
}
if (ms<mS){
ary[4]=setTimeout(function(){ oop.animate(ary,f,t,srt,mS); },10);
}
else {
ary[2]=t;
ary[0].style.height=t+'px';
if (t==0){
ary[0].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(){
var inc=1,obj;
SwitchMenu.ary=[];
while (document.getElementById("sub"+inc)){
obj=document.getElementById("sub"+inc);
obj.style.display='block';
SwitchMenu.ary.push([obj,obj.scrollHeight,0,inc-1]);
obj.style.display='none';
inc++
}
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var ary=SwitchMenu.ary[get_cookie(cookiename)];
if (ary){
ary[2]=ary[1];
ary[0].style.display='block';
SwitchMenu.lst=ary;
}
}
}

function savemenustate(nu){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? nu+";path=/" : nu
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


</script>

</head>

<body>
<!-- Keep all menus within masterdiv-->
<div id="masterdiv">

<div class="menutitle" onclick="SwitchMenu(1)">Site Menu</div>
<div 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>
</div>

<div class="menutitle" onclick="SwitchMenu(2)">FAQ/Help</div>
<div 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>
</div>

<div class="menutitle" onclick="SwitchMenu(3)">Help Forum</div>
<div class="submenu" id="sub3">
- <a href="http://www.codingforums.com">Coding Forums</a><br>
</div>

<div class="menutitle" onclick="SwitchMenu(4)">Cool Links</div>
<div 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>
</div>

<img src="about.gif" onclick="SwitchMenu(5)"><br>
<div 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>
</div>

</div>
</body>

</html>

crazymao
04-09-2012, 10:56 PM
Thanks alot, is there any way for it to close back the same way?

vwphillips
04-10-2012, 08:16 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></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{
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
var duration=1000;
var toggle=true;

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display:none;overflow:hidden}\n')
document.write('</style>\n')
}

function SwitchMenu(nu){
var ary = SwitchMenu.ary[nu-1],lst,to;
if (SwitchMenu.lst&&SwitchMenu.lst!=ary){
lst=SwitchMenu.lst;
clearTimeout(lst[5]);
animate(lst,lst[2],0,new Date(),duration*Math.abs((lst[2])/lst[1]));
lst[4]=false;
}
if(ary){
ary[0].style.display='block';
clearTimeout(ary[5]);
to=toggle!==true||ary[4]?ary[1]:0;
animate(ary,ary[2],to,new Date(),duration*Math.abs((ary[2]-to)/ary[1]));
savemenustate(-1);
if (to!=0){
savemenustate(ary[3]);
}
ary[4]=!ary[4];
SwitchMenu.lst=ary;
}
}

function animate(ary,f,t,srt,mS){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
ary[2]=Math.max(now,f<0||t<0?now:0);
ary[0].style.height=ary[2]+'px';
}
if (ms<mS){
ary[5]=setTimeout(function(){ oop.animate(ary,f,t,srt,mS); },10);
}
else {
ary[2]=t;
ary[0].style.height=t+'px';
if (t==0){
ary[0].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(){
var inc=1,obj;
SwitchMenu.ary=[];
while (document.getElementById("sub"+inc)){
obj=document.getElementById("sub"+inc);
obj.style.display='block';
SwitchMenu.ary.push([obj,obj.scrollHeight,0,inc-1,true]);
obj.style.display='none';
inc++
}
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var ary=SwitchMenu.ary[get_cookie(cookiename)];
if (ary){
ary[2]=ary[1];
ary[4]=false;
ary[0].style.display='block';
SwitchMenu.lst=ary;
}
}
}

function savemenustate(nu){
if (persistmenu=="yes"){
var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? nu+";path=/" : nu
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


</script>

</head>

<body>
<!-- Keep all menus within masterdiv-->
<div id="masterdiv">

<div class="menutitle" onclick="SwitchMenu(1)">Site Menu</div>
<div 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>
</div>

<div class="menutitle" onclick="SwitchMenu(2)">FAQ/Help</div>
<div 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>
</div>

<div class="menutitle" onclick="SwitchMenu(3)">Help Forum</div>
<div class="submenu" id="sub3">
- <a href="http://www.codingforums.com">Coding Forums</a><br>
</div>

<div class="menutitle" onclick="SwitchMenu(4)">Cool Links</div>
<div 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>
</div>

<img src="about.gif" onclick="SwitchMenu(5)"><br>
<div 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>
</div>

</div>
</body>

</html>