Css Menu -- A Little Help Needed

matak

Dec 13 2006, 07:25 PM

ok, basicly i learned on trap17 that tables are bad for webdesign beacouse of their slow loading and incompability with browsers.
since i have some html, css and even php skills (very little indeed but i have the will) i'm building this new website for local alternative club.
i have enough time to build it, so it means i can practice on those skills..

i basicly know how to build css website (and i have a good book about it

) so i wont bother you much with all of it, just this menu i have the idea for.

i want it to be like a drawer

IPB Image

now when mouse is not on the menu i want it to be closed

when i hover mose over, i want the drawer to look opened..
and, i know it is not a problem, but the second thing i wanted on that is that when mose is over a drawer and it is opened user can see files inside it... (which are hiperlinks) but when user hovers mouse over those files i want it to show another image (or description of that)

now the thing that's bothering me is that mose hover, beacouse it can get really tricky when user is trying to find a link, he has to move mose, and that could close the drawer (menu) and he would have to start all over again.

and ideas?

Comment/Reply (w/o sign-up)

jlhaslip

Dec 13 2006, 08:25 PM

to start with, google on 'sliding doors css on:hover' or see if this helps you:
http://www.alistapart.com/articles/slidingdoors

Comment/Reply (w/o sign-up)

Saint_Michael

Dec 13 2006, 08:41 PM

On top of what haslip suggestion I would go with a bigger image and I mean big like website design big. Of course with that you would have to use a graphics program and design the drawer with folders in it. Because those links will be pretty small to see.

Of if you have flash skills design it that way. so you can make the folders at a set size along with the text. But thats just me.

Comment/Reply (w/o sign-up)

hts

Dec 13 2006, 09:05 PM

you may try cssplay.co.uk - in the menus section, maybe you`ll find what you need

Comment/Reply (w/o sign-up)

matak

Dec 15 2006, 11:41 AM

Here's what i've created with CSS, but it doesn't work in IE..

Help me with that please (just without java script, php or any other code)

1. CSS CODE

CODE

@charset "iso-8859-1";
/* Test CSS file */
h1#botun {
    padding-top: 50px; /* height of the replacement image */
    width: 100px;
    height: 0px;/* needed to see image */
    overflow: hidden; /* needed to see image */
    background: url("../slike/botun1.png");
    background-repeat: no-repeat;
}
#botun:hover {
    padding-top: 50px; /* height of the replacement image */
    width: 100px;
    height: 0px;/* needed to see image */
    overflow: hidden; /*  needed to see image */
    background: url("../slike/botun2.png");
    background-repeat: no-repeat;
}

2. HTML CODE

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/test_css.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1 id="botun">Botun</h1>
</body>
</html>

Result...

Please help me make this work for IE...

Comment/Reply (w/o sign-up)

minimcmonkey

Sep 17 2008, 09:32 PM

I dont have time to write the code right now, but if you want i may be able to another time.
I would suggest making each drawer a <DIV> and control ints position by CSS, make sure its position is absolute.
Then, set the background images to a closed drawer.
As well as adding the top and bottom of the drawer after for a good look.
The, in the DIVs attributes, onmouseover, use javascript to hide the closed drawer, and make a div with an open draw visible.
Then, as the open draw is a background image, with some basic formatting (indent ect.) you can put liks over the draw.

Comment/Reply (w/o sign-up)

Css Menu -- A Little Help Needed - i want a cool menu

Css Menu -- A Little Help Needed - i want a cool menu