SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Slide Out Dynamic Menu (Left to Right)

    Hello

    I have been trying to code or find a dynamic menu which slides out from left to right. All the examples that I have found slide but how they accomplish the effect is by having the menu on the far left side of the page and then the sliding just moves most of the menu off the page (setting a negative left value) – see this example http://www.dynamicdrive.com/dynamici...ideinmenu4.htm. This type of menu would not work for me since the placement of the menu for me is not on the edge of the page. I then tried changing one of the menus to adjust the width as it slides but what this created was scroll bars in the iframe. So I was curious if someone else has found source code for a menu which slides from left to right. If someone has, I would greatly appreciate you sharing the example or providing a URL so I could view the example.

    Thanks in advance for your time and Merry Christmas!

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can still use a menu that slides left/right. But instead of sliding off the page it can slide under some other element.

  3. #3
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the suggestion. I will have to look into how I would accomplish this.

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It depends on your page layout. Give us a link to the page or post the basic html and we can make suggestions.

  5. #5
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Examples

    To start, I got part of this code from Dynamic Drive and then I have been making changes to it to fit my needs. Currently, I am just trying to make a proof of concept to show what I am trying to accomplish can work.

    Here is the page I was trying to adjust the width but the scroll bars are causing an issue and I am not sure if I like how the sliding of the window is so choppy.

    Code:
    <html>
    <head>
    
    <style>
    <!--
    #slidemenubar, #slidemenubar2
    {
       position:absolute;
       border:1.5px solid black;
       line-height:20px;
    }
    -->
    </style>
    
    <script language="JavaScript">
    
    //-- Global values for the menu
    var slidemenu_height='115px' //specify height of menu (in pixels throughout)
    var slidemenu_width='160px' //specify width of menu
    var slidemenu_reveal='12px' //specify amount that menu should protrude initially
    var slidemenu_top='170px'   //specify vertical offset of menu on page
    var slidemenu_url="menu.htm" //specify path to menu file
    
    //-- Setting the right and left boundary
    rightboundary = 12;
    leftboundary = ( parseInt( slidemenu_width ) - parseInt( slidemenu_reveal ) );
    
    //getWindowSize();
    
    function draw()
    {
       themenu = document.getElementById("slidemenubar2").style;
         
       //-- Controlls the draw speed 	 
       clearInterval( pullit );
       drawit=setInterval( "DrawEngine(themenu)", 10 );
    }
    
    function DrawEngine(themenu)
    {
       if ( parseInt( themenu.width ) > leftboundary )
       {
          themenu.width = parseInt( themenu.width ) - 10 + "px";
       }
       else if ( window.drawit )
       {
          themenu.width=leftboundary;
          clearInterval( drawit );
       }
    }
    
    function pull()
    {
       themenu = document.getElementById("slidemenubar2").style;
       
       if ( window.drawit )
       {
          clearInterval( drawit );
       }   
       
       //-- Controlls the pull speed 
       pullit = setInterval( "PullEngine(themenu)", 10 );
    }
    
    function PullEngine(themenu)
    {
       if ( parseInt( themenu.width ) < rightboundary )
       {
          themenu.width = parseInt( themenu.width ) + 10 + "px";
       }
       else if ( window.pullit )
       {
          themenu.width = 100 + "px"
          clearInterval( pullit )
       }
    }
    
    </script>
    
    </head>
    
    <body bgcolor="Grey">
    
    <table>
       <tr height="120">
          <td width="10%"></td>
          <td>
    	     <iframe id="slidemenubar2" style="width: 160px; height: 115px;" src="menu.htm"></iframe>   
    	  </td>
       </tr>
    </table>
    
    </body>
    
    </html>
    Here is the code where the menu is just moved off the page to the left. The sliding of the menu is excellent I would like to keep its smooth sliding feel.

    Code:
    <html>
    <head>
    
    <style>
    <!--
    #slidemenubar, #slidemenubar2
    {
       position:absolute;
       border:1.5px solid black;
       line-height:20px;
    }
    -->
    </style>
    
    <script language="JavaScript">
    
    //-- Global values for the menu
    var slidemenu_height='115px' //specify height of menu (in pixels throughout)
    var slidemenu_width='160px' //specify width of menu
    var slidemenu_reveal='12px' //specify amount that menu should protrude initially
    var slidemenu_top='170px'   //specify vertical offset of menu on page
    var slidemenu_url="menu.htm" //specify path to menu file
    
    //-- Setting the right and left boundary
    rightboundary = 0;
    leftboundary = ( parseInt( slidemenu_width ) - parseInt( slidemenu_reveal ) ) * -1;
    
    //getWindowSize();
    
    function getWindowSize()
    {	
       var width = 0;
       var height = 0;
    
       if ( navigator.appName.indexOf( "Microsoft" ) != -1 )
       {
          width = document.body.offsetWidth;
          height = document.body.offsetHeight; 
       }
       else
       {
          width = window.innerWidth;
    	  height = window.innerHeight;
       }
       
       alert("width = " + width);
       alert("height = " + height);
       
       rightboundary = parseInt( width * .1 );
       alert("rightboundary = " + rightboundary);
    }
    
    function draw()
    {
       themenu = document.getElementById("slidemenubar2").style;
         
       //-- Controlls the draw speed 	 
       clearInterval( pullit );
       drawit=setInterval( "DrawEngine(themenu)", 10 );
    }
    
    function DrawEngine(themenu)
    {
       if ( parseInt( themenu.left ) > leftboundary )
       {
          themenu.left = parseInt( themenu.left ) - 10 + "px";
    	  
    	  
       }
       else if ( window.drawit )
       {
          themenu.left=leftboundary;
          clearInterval( drawit );
       }
    }
    
    function pull()
    {
       themenu = document.getElementById("slidemenubar2").style;
       
       if ( window.drawit )
       {
          clearInterval( drawit );
       }   
       
       //-- Controlls the pull speed 
       pullit = setInterval( "PullEngine(themenu)", 10 );
    }
    
    function PullEngine(themenu)
    {
       if ( parseInt( themenu.left ) < rightboundary )
       {
          themenu.left = parseInt( themenu.left ) + 10 + "px";
    	  
    	  //alert("width = " + themenu.width);
    	  
       }
       else if ( window.pullit )
       {
          themenu.left = 0
          clearInterval( pullit )
       }
    }
    
    </script>
    
    </head>
    
    <body bgcolor="Grey">
    
    <table>
       <tr height="120">
          <td width="10%"></td>
          <td>
    	     <iframe id="slidemenubar2" style="width: 160px; height: 115px;" src="menu.htm"></iframe>   
    	  </td>
       </tr>
    </table>
    
    </body>
    
    </html>
    Here is the menu.htm file which is used in both examples. Just have this file located in the same directory as the 2 examples.

    Code:
    <html>
    
    <head>
    <meta name="GENERATOR" content="Microsoft FrontPage 3.0">
    <style>
    <!--
    body{
    background-color:#F2F2F2
    }
    a:hover{
    color:red;
    }
    -->
    </style>
    <title>Menu</title>
    
    <script language="JavaScript">
    
    function menuMouseOver()
    {
       if ( document.getElementById && window.parent.pull ) 
       { 
          //alert("id = " + window.parent.document.getElementById('test').value);   
          window.parent.pull();
       }
    }
    
    function menuMouseOut()
    {
       if ( document.getElementById && window.parent.pull ) 
       {	  
          window.parent.draw()
       }	  
    }
    
    </script>
    
    </head>
    
    <body onMouseover="menuMouseOver();" onMouseout="menuMouseOut();" topmargin="5" leftmargin="5" marginwidth="5" marginheight="5">
    
    <p>
       <a href="http://dynamicdrive.com" target="_parent"><strong><font face="Verdana">Dynamicdrive</font></strong></a>
    </p>
    
    <p>
       <img src="fold.gif" width="16" height="16" alt="fold.gif (119 bytes)"> 
       <strong><font face="Verdana"><small><a href="http://dynamicdrive.com" target="_parent">Home</a>
       
       <br>
    
       <img src="fold.gif" width="16" height="16" alt="fold.gif (119 bytes)"> 
       <a href="http://dynamicdrive.com/new.htm" target="_parent">What's New?</a>
    </p>
    </body>
    </html>
    I appreciate any suggestions that you can provide.
    Thanks

  6. #6
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44° 56.537' W 123° 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A couple years ago, as a hoot, I threw together a sliding div script. It's set to go vertically, but it should be a fairly small matter to modify it to be horizontal. I don't know if it will help, but in case, here it is:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>The Rambo Tribble Simple Slide Script 03-10-05</title>
    <!-- Description: A script for producing a sliding in or out of view effect on block elements
    
         Advantages:  Easy to modify characteristics of direction and speed
                      CSS directional widget is lightweight but visually effective
                      Accepts a variety of measurements - pixels, points, ems
                      Allows multiple, simultaneous sliding elements 
                      
         Features:    Unit conversion routines for broad compatibility
                      Object property assignment for reliable persistence between iterations
                      Simple, efficient, string manipulations overcome setInterval's 
                         lack of parameter passing
                      Targeted conditionals minimize operational overhead
                        
         Use:         This demo shows a variety of implementation approaches.
         
         Benefits:    No images were exploited in producing the widgets. The images that might
                      have been used in this demo are being humanely pastured at a small server farm outside 
                      of Lodi. The electron volts used in developing these displays were raised, cruelty-free,
                      in the Northwestern United States. Due to the compact nature of CSS rules versus 
                      images, far fewer electrons, microwaves and photons need be displaced from their natural 
                      homes and routines to bring you this. Quanta everywhere are sure to endorse this 
                      economical and earth-friendly approach.   
         
         Mod notes:   The script can easily be modified to not use the widget, if desired. It is only necessary 
                      that the class be used to toggle the target object's slide direction.
                      
                      The minimum height to which the element collapses is set by the parameter passed to minht_val, 
                      when the sliDiv() function is called. It need not be the same as the element's starting height. 
                      If so desired, the script could easily be modified to simply use the height it reads from the 
                      element as the minimum height value, instead of using a passed paramenter. 
                      
                      
                      
                       
     -->
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    html,body{height:100&#37;;}
    body{margin:0;padding:0;overflow:hidden;}/*'overflow:hidden' required by Opera for bottom div to appear flush */
    div{position:absolute;margin:0;padding:0;}
    #main{height:100%;width:100%;}
    #topDiv{height:100%;width:100%;background:#BCF;}
    #botDiv{bottom:0;width:100%;height:10px;background:#ada;overflow:hidden;text-align:center;}
    div.widgUD{position:relative;height:0;width:0;margin:2px auto;padding:0;overflow:hidden;
      border-left:12px solid #dfd;border-right:12px solid #dfd;cursor:pointer;}
    div.widgUp{border-top:0;border-bottom:6px solid #F00;}
    div.widgDn{border-bottom:0;border-top:6px solid #F00;}
    .topDn{}
    </style>
    <script type="text/javascript">
    // Global variables are needed because setInterval() does not pass parameters reliably.
    var targs_str=""; //string to hold target div ids
    var sli_incr=2;   //movement increment control; larger number=faster effect
    
    function sliDiv(){
      var targs=targs_str.split(",")
      for(var i=0;i<targs.length;i++){
        var targDiv=document.getElementById(targs[i]);
        var tgDvWg=document.getElementById(targDiv.wgId);
        var ht_val=targDiv.offsetHeight;
        if(ht_val<targDiv.minHt)targDiv.minHt=ht_val; //make sure slide will start
        if(tgDvWg.upDn==0){
          var nw_val=ht_val+sli_incr;
        }else if(tgDvWg.upDn==1){
          var nw_val=ht_val-sli_incr;
        }
        targDiv.style.height=String(nw_val)+"px";
        if(nw_val>=targDiv.maxHt||nw_val<=targDiv.minHt){
          var cl_nam=tgDvWg.className;
          cl_nam.indexOf('widgUp')!=-1? cl_nam=cl_nam.replace(/widgUp/,'widgDn') : cl_nam=cl_nam.replace(/widgDn/,'widgUp');
          tgDvWg.className=cl_nam;
          targs.splice(i,1);
          targs_str=targs.toString();
          if(targs_str==""){
            clearInterval(timId);
            return;
          }
        }
      }
    }
    
    function run_sliDiv(targDiv,wg_id,maxht_val,minht_val){
    //create invisible div to use in unit conversion
      if(!document.getElementById('UnitConvert001')){ //create div if needed
        tstDiv=document.createElement("div");
        tstDiv.id="UnitConvert001";
        tstDiv.style.visibility="hidden";
        tstDiv.style.position="absolute";
        tstDiv.style.bottom="0";
        tstDiv.style.margin="0";
        tstDiv.style.padding="0";
        tstDiv.style.overflow="hidden";
        tstDiv.style.width="1px";
        document.body.appendChild(tstDiv);
      }
    
      if(targs_str.indexOf(targDiv.id)==-1){  //if the target div isn't already being processed, proceed
        if(!targDiv.wgId){                    //if the target div hasn't been assigned slide attributes
          tstDiv.style.height=maxht_val;      //use invisible div to convert units to pixel counts
          targDiv.maxHt=tstDiv.offsetHeight;  //and attach as properties of target object
          tstDiv.style.height=minht_val;
          targDiv.minHt=tstDiv.offsetHeight;
          targDiv.wgId=wg_id;                 //attach target div's widget div id 
        }
        var tgDvWg=document.getElementById(wg_id);    //get widget to test status and execute accordingly
        if(tgDvWg.className.indexOf('widgUp')!=-1||tgDvWg.className.indexOf('widgDn')!=-1)tgDvWg.className.indexOf('widgUp')!=-1? tgDvWg.upDn=0 : tgDvWg.upDn=1;
        if(tgDvWg.className.indexOf('topDn')!=-1)tgDvWg.className.indexOf('widgUp')!=-1? tgDvWg.upDn=1 : tgDvWg.upDn=0;
        targs_str==""? targs_str=targDiv.id : targs_str+=","+targDiv.id;
        if(typeof timId!='undefined')clearInterval(timId);
        timId=setInterval("sliDiv()",30); //fine velocity (delay) control; smaller number = faster
      }
    }
    </script> 
    </head>
    <body>
    <div id="main">
    
      <div id="topDiv">
        <div id="sidCont" style="float:left;top:10%;left:10%;height:40%;width:12%;background:#feb;">
    
          <div id="sidDiv2" onclick="run_sliDiv(this,'wg3','4.2em','.8em');"
           style="position:absolute;height:10px;width:100%;background:#dfd;overflow:hidden;">
            <div id="wg3" class="widgUD widgDn topDn">
            </div>
            <div style="position:relative;height:100%;background:#dda;"> 
              <div style="position:relative;background:#ecc">content
              </div>
              <div style="position:relative;background:#cec">more content
              </div>
            </div>
          </div>
    
          <div id="sidDiv1" onclick="run_sliDiv(this,'wg2','65px','10px');"
           style="position:absolute;bottom:0;height:10px;width:100%;background:#dfd;overflow:hidden;">
            <div id="wg2" class="widgUD widgUp">
            </div>
            <div style="position:relative;height:100%;background:#dda;"> 
              <div style="position:relative;background:#ecc">still content
              </div>
              <div style="position:relative;background:#cec"><a href="#" onclick="this.innerHTML+=', wow';">linked content</a> 
              </div>
            </div>
          </div>
    
        </div>
      </div>
    
      <div id="botDiv">
        <div id="wg1" class="widgUD widgUp" 
          style="border-left:12px solid #ada;border-right:12px solid #ada;"
          onclick="run_sliDiv(this.parentNode,'wg1','140px','10px');">
        </div>
        <div style="position:absolute;width:100%;height:10px;top:0;cursor:pointer;" 
          onclick="run_sliDiv(this.parentNode,'wg1','140px','10px');">
        </div>
        <div style="position:relative;width:100%;height:100%;background:#ded;padding:2em;">
        There could be a whole buncha stuff down here. 
        </div>
      </div>
    </div>
    </body>
    </html>

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    TTL,

    But what layout do you want for the page? A 2 column page, or 3 column, with header, etc.

    You said "the placement of the menu for me is not on the edge of the page." Where do you want the menu within the layout?

  8. #8
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    JVLB, that is some pretty cool code. I copied the code here at work and gave it a try… pretty cool stuff. When I have some time at home, I will have to play with it to see if I can get it to scroll left and right. I am also concerned if it will scroll over other HTML items (such as images, background images, other text).

    Addressing MikeFoster’s question… here is what my page design will look like…

    I will have a background image… the far left image will have rounded corners. Then I was hoping to place the menu next, then have a picture, then I will have a column of text, a 2nd column of text and then I will add a far right hand side image (rounded corners).

    I don’t have the code with me here at work but the code is something like this…

    Code:
    <table>
       <tr>
          <td>
             <img src=RoundedLeftSideImage />
          </td>
          <td>
              Here is where I want the horizontal menu… when it scrolls right, it will go over the image in the next column
          </td>
          <td>
             <img src=An image>
          </td>
          <td>
             Column of data
          </td>
          <td>
             A second column of data
          </td>
          <td>
             <img src=RoundedRightSideImage />   
          </td>
       </tr>
    </table>
    I will post back if I am able to get this to work.

  9. #9
    &#083;itePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44° 56.537' W 123° 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since the sliding div (or other block element) is absolutely positioned, it should appear over any content other than either another absolutely positioned element occupying the same space and appearing later in the markup, or a positioned element explicitly given a higher z-index.

    Although I've never tried it, I expect all it should take to switch to the horizontal is to modify the script to use width instead of height. If I get some time (a questionable likelihood at the moment) I'll try to work out the modifications.

  10. #10
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please, don't take time away from something pressing. I should be able to figure it out. What you have provided so far is a GREAT start. Thanks again.

  11. #11
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    TTL, sorry for the late reply.

    Here's a demo that illustrates a menu sliding out from under an adjacent column.

    Also, take a look at the CSS layout.


  12. #12
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Midwest
    Posts
    777
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is a good example of what I was trying to accomplish. I will have to take a closer look at how it was coded. Thank you very much for the example.


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
  •