Simple navigation menu that needs slide-in/slide-out effect

[Chrys]

I have a very simple navigation menu that opens onclick. However it simply pops into the screen and I would like it to "slide" down instead. I have very little JavaScript experience but I am trying to learn. I would really like to avoid JQuery if possible. Is there a way that I can simply add to the JavaScript that I have to the functions I am already using (showmenu and hidemenu) so I do not have to change the html and CSS a whole lot and it will slide? Thank you in advance for any help.

This is the code I am currently using:
HTML:

<table id="nav_menu">
<tr>
  <td><a href="index.html" class="no_submenu">Home</a></td>
  <td onmouseover="showmenu('about_us_menu')" onmouseout="hidemenu('about_us_menu')"><a class="with_submenu">About Us <img src="images/menu_down.png" /></a>
    <table class="sub_menu" id="about_us_menu">
      <tr><td><a href="about_us/link1.html">link1</a></td></tr>
      <tr><td><a href="about_us/link2.html">link2</a></td></tr>
      <tr><td><a href="about_us/link3.html">link3</a></td></tr>
    </table>
  </td>
</tr>
</table>

CSS:

table.sub_menu {
    position: absolute;
    visibility: hidden;
}

JAVASCRIPT:

function showmenu(elmnt) {
    document.getElementById(elmnt).style.visibility="visible";
}

function hidemenu(elmnt) {
    document.getElementById(elmnt).style.visibility="hidden";
}

[Airblader]

Originally Posted by Chrys

I would really like to avoid JQuery if possible

Why? We're talking about 32kb here – that's less than a medium-sized picture. But if you do want to reinvent the wheel, Google is your friend. Without trying I would take any bet that "javascript slide effect without jQuery" gives you plenty information just on the first page … and after trying this was confirmed. It should be enough to get you started at least.

air

[WolfShade]

Why avoid jQuery? Just load the library, then use .show() and .hide(). Done.

[Chrys]

Originally Posted by WolfShade

Why avoid jQuery? Just load the library, then use .show() and .hide(). Done.

I honestly have never used it before and I am not sure how. I thought it would be easier to make my own script.

[WolfShade]

Like air said, why re-invent the wheel?

I over-simplified what I said, earlier. Load the library, give the nav elements (depending how deep the nav is) the same class name, and at the bottom of the page put your jQuery document ready declaration. Inside the declaration, use jQuery to give all elements with that class name "click" event handlers that will $(this).show(), $(this).hide(), or $(this).toggle().

EDIT: Actually, now that I think about it, give all of them .toggle() and (if you want) default one of them to .show(). Of course, this will allow the user to "expand" more than one item at a time. If you want it so that only one can be expanded at any given time, then you can make a function that will set ALL to .hide(), then open only the one with that unique ID.

[Airblader]

Originally Posted by Chrys

I honestly have never used it before and I am not sure how. I thought it would be easier to make my own script.

Don't be afraid to learn then. I'm not gonna lie, jQuery – or more like asynchronous programming –, if you never did it before, takes some times to get used to and you're likely to screw up a few times*, but it is definitely worth the trouble.
Not just that it's still easier (and safer!) than writing your own animation (keyword: browser compatibility), you will also learn something that you can use in many other scenarios. jQuery is a web standard these days.

As for your simple animation you don't even need too much jQuery Kung-Fu. It will be fairly simple and you will easily find how to do this particular thing on Google, too. Plus, what's the difference between getting familiar with a new framework and having to learn how to write it yourself? You obviously don't already know the latter either.

*) Actually I never stopped screwing up when it comes to callbacks.

air

[Airblader]

@ WolfShade

Actually I think he doesn't wanna use show/hide/toggle at all. He's looking for $.slideDown().

(If anything, hide/show are the two jQuery functions I'm avoiding pretty much all the time. On mobile they can be stunningly slow compared to direct css manipulation)

air

[DaveyErwin]

here is a thread that
might interset you ...
http://www.codingforums.com/showthread.php?t=284872

here is what i did to
coothead's css ...

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<title>get your tools here...</title>
<style type="text/css">
#tools {
    position:absolute;
    cursor:pointer;
    overflow:hidden; 
    background:white;
    margin:0;padding:0;
 }
#tools ul {
    display:none;
    margin:0;padding:0;
    background:white;
 }
#tools:hover ul {
    display:block;
 }
</style>
</head>
<body>
<div id="tools">about us
<ul id="ultools">
      <li><a href="about_us/link1.html">link1</a></li>
      <li><a href="about_us/link1.html">link1</a></li>
<li><a href="about_us/link1.html">link1</a></li>
      <li><a href="about_us/link1.html">link1</a></li>
<li><a href="about_us/link1.html">link1</a></li>
      <li><a href="about_us/link1.html">link1</a></li>
<li><a href="about_us/link1.html">link1</a></li>
      <li><a href="about_us/link1.html">link1</a></li>
      <li><a href="about_us/link1.html">link1</a></li>
</ul>
</div><div>about us</div>
<div>hiya<div>
<script>
toh = tools.offsetHeight;
function toolsmouseover(){ 
    tools.onmouseover=null; 
    tools.style.height=toh + "px";
    setTimeout(toolsAnimate,0);
}
function toolsAnimate(){
    tools.style.height=tools.offsetHeight + tools.offsetHeight/10 + "px";
    if(tools.offsetHeight - toh < ultools.offsetHeight)
 setTimeout(toolsAnimate,30);
    else
 tools.style.height = null;
}
tools.onmouseover=toolsmouseover;
tools.onmouseout=function(){
    setTimeout('if(!ultools.offsetHeight)tools.onmouseover=toolsmouseover',0);
}
</script>
</body>
</html>

[vwphillips]

<!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">
/*<![CDATA[*/

.nav_menu {
    position:relative;

}

table.sub_menu {
    visibility4: hidden;
}

.mdiv {
  position:absolute;
  overflow:hidden;
  visibility: hidden;
  z-Index:101;
  left:55px;
  top:55px;
  width:100px;
  height:0px;
  background-Color:#FFCC66;
}


/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/

function showmenu(id,ms,ud) {
 var o=showmenu[id],obj=document.getElementById(id);
 if (!o&&obj){
  o=showmenu[id]=[obj,0,obj.getElementsByTagName('TABLE')[0].offsetHeight,0];
 }
 if (o&&obj){
  obj.style.visibility='visible';
  animate(o,o[3],o[ud?2:1],new Date(),ms);
 }
}

function animate(ary,f,t,srt,mS){
  clearTimeout(ary[4]);
  var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
  if (isFinite(now)){
   ary[3]=Math.max(now,f<0||t<0?now:0);
   ary[0].style.height=ary[3]+'px';
  }
  if (ms<mS){
   ary[4]=setTimeout(function(){ oop.animate(ary,f,t,srt,mS); },10);
  }
  else {
   ary[3]=t;
   ary[0].style.height=t+'px';
   ary[0].style.visibility=t==0?'hidden':'visible';
  }
 }

function pos(obj){
  var rtn=[0,0];
  while(obj){
   rtn[0]+=obj.offsetLeft;
   rtn[1]+=obj.offsetTop;
   obj=obj.offsetParent;
  }
  return rtn;
 }


/*]]>*/
</script>

</head>

<body>
<table id="nav_menu">
<tr style="height:30px;" >
  <td style="height:30px;"><a href="index.html" class="no_submenu">Home</a></td>
  <td style="height:30px;" onmouseover="showmenu('about_us_menu',1000,true)" onmouseout="showmenu('about_us_menu',1000,false)">
    <a class="with_submenu">About Us <img src="images/menu_down.png" /></a>
  </td>
</tr>
</table>
    <div class="mdiv sub_menu" id="about_us_menu" onmouseover="showmenu('about_us_menu',1000,true)" onmouseout="showmenu('about_us_menu',1000,false)" >
     <table>
      <tr><td><a href="about_us/link1.html">link1</a></td></tr>
      <tr><td><a href="about_us/link2.html">link2</a></td></tr>
      <tr><td><a href="about_us/link3.html">link3</a></td></tr>
     </table>
    </div>


</body>

</html>