Slide Menu Concept...

Deacon Frost

06-02-2009, 02:45 AM

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/dynamicindex1/omnislide/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.

Old Pedant

06-02-2009, 06:34 AM

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?

<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.

Deacon Frost

06-02-2009, 08:25 PM

Wow, you nailed it >.<...

I see how it works :p.

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.