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 3 of 3
  1. #1
    Regular Coder Deacon Frost's Avatar
    Join Date
    Feb 2008
    Location
    Between the Lines
    Posts
    279
    Thanks
    31
    Thanked 4 Times in 4 Posts

    Slide Menu Concept...

    Nevermind, I'm going to use onkey, and make the div's offscreen. If you still wanna solve this, cool, I may end up using the concept, but I'm gonna try this way instead.


    Old Post:
    I'm gonna be as descriptive as possible, but bear with me.

    The concept is simple, I know for a fact it can't be that hard to do, but it's just finding the resources. I'm not fantastic at Javascript, so I either have to have snippets to run off of, or simply use a free script.

    Anyways, I'm trying to take the slide menu effect (dhtml) and change it around a bit.

    http://www.dynamicdrive.com/dynamici...lide/index.htm

    That's the script I'm working on manipulating a bit, but I don't think it's going to work. I want that effect but I can't seem to get it how I want.

    Basically, there'll be several tabs on the side of the screen. The user clicks one of those tabs, and it slides open the larger IV.

    As is now, the script is not very lenient to that idea.

    The reason being, the size of the displayed bar has to be the same size as the size of the slide out menu. I sort of want to mimic a filing cabinet, where you have various tabs, and they are in different positions, and you pull on one of the tabs, and the larger file emerges. Yeah, you know, that.

    The concept is simple enough, I just can't figure out where to start. I really hate using this premade script though, because it uses a very different style of coding than I understand at the moment. Since the CSS isn't easily understandable, it's less easy to customize.

    Anyways, if you've seen this effect, or know where I should start, point me in the right direction please.

    If you need more descriptiveness, ask . I'll draw up a picture of how it'll look.
    Last edited by Deacon Frost; 06-02-2009 at 03:12 AM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Well, yeah, the divs have to be "offscreen". But what does onkey have to do with it? Don't you want to use onmouseover to cause the various menus to slide in????

    Doesn't look to me like it would be too hard. Pretty easy, if we use position:absolute for everything.

    I'd do it by using a pair of <div>s for each menu: One contains all the menu items, the other is the "tab" that sits on the top right of the menu items div, text turned on its side, as in the dd demo.

    Hmmm...What the hell...here's a "quick and dirty" version.

    Needs improvement here and there, but the concept is dead simple and you should be able to adapt it. Sloppy coding, but what do you want for 10 minutes?
    Code:
    <html>
    <head>
    <style>
    .menu { position: absolute; left: -100px;
            width: 120px; 
          }
    .menuitems { position: absolute; left: 0px; top: 0px;
                 width: 100px;
                 border: solid brown 1px;
                 background-color: yellow;
               }
    .menutab { position: absolute; left: 100px; top: 0px;
               width: 20px;
               background-color: brown;
               color: white;
             }
    </style>
    <script>
    var currentMenu = null;
    var slider = null;
    var direction = 0;
    var position = -100; // width of menuitems div
    var DELTA = 4; // must divide evenly into that width!
    
    function slidein(what,how)
    {
        var menu = document.getElementById(what);
        // if same menu and same direction, nothing to do
        if ( menu == currentMenu && direction == how ) return; 
        // cancel existing slide:
        if ( slider != null ) clearTimeout(slider);
        // if we changed menus, move other one all the way left again:
        if ( menu != currentMenu && currentMenu != null )
        {
            currentMenu.style.left = "-100px";
            currentMenu.style.zIndex = 5;
            position = -100;
        }
        // and start another:
        currentMenu = menu;
        currentMenu.style.zIndex = 10;
        direction = how;
        move( );
    }
    function move( )
    {
        if ( slider != null ) clearTimeout(slider);
        position += direction * DELTA;
        if ( position > 0 || position < -100 ) return; // done sliding
    
        currentMenu.style.left = position + "px";
        slider = setTimeout("move()", 50);
    }       
    </script>
    </head>
    <body>
    <div id="MENU1" class="menu" style="top: 50px;">
        <div class="menuitems" onmouseover="slidein('MENU1',1);" onmouseout="slidein('MENU1',-1);">
        Put some<br/>
        Menu items<br/>
        In Here<br/>
        As many<br/>
        As needed<br/>
        </div>
        <div class="menutab" onmouseover="slidein('MENU1',1);" onmouseout="slidein('MENU1',-1);">
        T<br/>
        A<br/>
        B<br/>
        1<br/>
        </div>
    </div>
    <div id="MENU2" class="menu" style="top: 125px;">
        <div class="menuitems" onmouseover="slidein('MENU2',1);" onmouseout="slidein('MENU2',-1);"
             style="background-color: white; border-color: black;">
        Put some<br/>
        Menu items<br/>
        In Here<br/>
        As many<br/>
        As needed<br/>
        </div>
        <div class="menutab" onmouseover="slidein('MENU2',1);" onmouseout="slidein('MENU2',-1);"
             style="background-color: black;">
        T<br/>
        A<br/>
        B<br/>
        2<br/>
        </div>
    </div>
    This is other<p>
    Junk on the page<p>
    This is other<p>
    Junk on the page<p>
    This is other<p>
    Junk on the page<p>
    This is other<p>
    Junk on the page<p>
    This is other<p>
    Junk on the page<p>
    </body></html>
    Colors are just to illustrate where things really are.

    Make that 15 minutes.

  • #3
    Regular Coder Deacon Frost's Avatar
    Join Date
    Feb 2008
    Location
    Between the Lines
    Posts
    279
    Thanks
    31
    Thanked 4 Times in 4 Posts
    Wow, you nailed it >.<...

    I see how it works .

    And it gave me some great changes for what I made last night.

    I was gonna do the tab thing, but I couldn't resolve it, so I ended up doing an onkey event instead. The desirable effect was achieved, but more can be done with it now :P.


  •  

    Posting Permissions

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