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?

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

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.

hts

Dec 13 2006, 09:05 PM

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

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

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE

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

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