Need some help

Discussion in 'JavaScript' started by Dragontheory, Aug 20, 2010.

0
  1. #1
    Hello all,

    I need to emulate the below slide out menu (the left one) in jQuery. Must be able to slide out multiple sub level menus and or dynamic XHTML page content such as forms. As per the demo (see menu item "Fun Videos"), if height of menu or content page exceeds height of window it must vertically scroll.

    Does anyone know where I can find something like this? I see peaces of it all over (slide out menu here, vertically scroll content there). But I have yet to find all these peaces put together like this.

    http://s3.envato.com/files/282292/index.html

    Thanks for any help you can give me.
     
    Dragontheory, Aug 20, 2010 IP
  2. wab

    wab Member

    Messages:
    57
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #2
    that can help you to start:
    
<html>
  <head>
     <style>
         body{
            margin:0px;     
            padding:0px;    
         }

         #menu-1{
            width:200px;
            height:100%;
            position:absolute;
            background-color:#e9e9e9;
            cursor:pointer;  
         }  

         #menu-2{
            width:50px;
            height:100%;
            position:absolute;
            background-color:#595959;
            cursor:pointer;  
         } 
     </style>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
     <script type="text/javascript">
        $(document).ready(function(){
             $('#menu-1').width(0);
             $('#menu-2').hover(function(){
                 $(this).animate({width: 0}, 500);
                 $('#menu-1').animate({width:200},1000);
             });
        });
     </script>
  </head>
  <body>
     <div id="menu-1"></div>
     <div id="menu-2"></div>  
  </body> 
</html>
    Code (markup):
     
    wab, Aug 23, 2010 IP
  3. Dragontheory

    Dragontheory Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks so much for your time and effort. How do I get menu-1 and menu-2 to not show up on top of each other but side by side? Thanks again for your generous help.
     
    Dragontheory, Aug 23, 2010 IP
  4. wab

    wab Member

    Messages:
    57
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #4
    you can add
    
left:50px;
    Code (markup):
    for the menu-1 css style.
    But if you keep the animation like this you gonna have a gap.
    You should remove
    
$(this).animate({width: 0}, 500);
    Code (markup):
    from the $(".menu-2").hover() function
    and if you want to reverse the animation, just add the following code in your javascript
    
$(function(){
           $('#menu-1').hover(function(){
           },function(){
                 $(this).animate({width: 0},1000);
           });
        });
    Code (markup):
     
    wab, Aug 23, 2010 IP