Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    44
    Thanks
    12
    Thanked 0 Times in 0 Posts

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

    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:
    Code:
    <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:
    Code:
    table.sub_menu {
        position: absolute;
        visibility: hidden;
    }
    JAVASCRIPT:
    Code:
    function showmenu(elmnt) {
        document.getElementById(elmnt).style.visibility="visible";
    }
    
    function hidemenu(elmnt) {
        document.getElementById(elmnt).style.visibility="hidden";
    }
    Last edited by Chrys; 01-17-2013 at 04:27 PM.

  • #2
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Quote Originally Posted by Chrys View Post
    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

  • #3
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Why avoid jQuery? Just load the library, then use .show() and .hide(). Done.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #4
    New Coder
    Join Date
    Aug 2011
    Posts
    44
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by WolfShade View Post
    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.

  • #5
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    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.
    Last edited by WolfShade; 01-17-2013 at 04:58 PM.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #6
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    Quote Originally Posted by Chrys View Post
    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

  • #7
    Regular Coder
    Join Date
    Jan 2013
    Location
    Germany
    Posts
    578
    Thanks
    4
    Thanked 77 Times in 77 Posts
    @ 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

  • #8
    Regular Coder
    Join Date
    Aug 2010
    Posts
    970
    Thanks
    19
    Thanked 212 Times in 210 Posts
    here is a thread that
    might interset you ...
    expand div onmouseover, should be simple -- please help!

    here is what i did to
    coothead's css ...
    Code:
     
    <!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>
    Last edited by DaveyErwin; 01-17-2013 at 08:33 PM.

  • #9
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Tags for this Thread

    Posting Permissions

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