Jump to content
xisto Community
Sign in to follow this  
Followers 0
matak

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

By matak, in Programming

Recommended Posts

matak    2

matak
Posted

ok, basicly i learned on Xisto 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 :lol: ) 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

 

Posted 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?

Share this post

Link to post
Share on other sites

Saint_Michael    3

Saint_Michael
Posted

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.

Share this post

Link to post
Share on other sites

matak    2

matak
Posted (edited)

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

@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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://forums.xisto.com/no_longer_exists/ 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...
Edited by matak (see edit history)

Share this post

Link to post
Share on other sites

minimcmonkey    0

minimcmonkey
Posted

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.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  
Followers 0
Go To Topic Listing
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.

  I accept