Jump to content



Welcome to KnowledgeSutra - Dear Guest , Please Register here to get Your own website. - Ask a Question / Express Opinion / Reply w/o Sign-Up!
- - - - -

Css Menu -- A Little Help Needed

Started by matak, Dec 13 2006 07:25 PM

5 replies to this topic

#1 matak

    Super Member

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 416 posts
  • Location:Psychedelic Realms
  • Interests:Psychedelic

Posted 13 December 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 :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?

#2 jlhaslip

    Insert Custom Title Here

  • [MODERATOR]
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 5,040 posts
  • Gender:Not Telling
  • Location:Linux, DOS and Windows…the good, the bad and the ugly
  • myCENT:81.07
  • Spam Patrol

Posted 13 December 2006 - 08:25 PM

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

#3 Saint_Michael

    $p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3

  • [MODERATOR]
  • PipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPipPip
  • 7,459 posts
  • Gender:Male
  • Location:9r33|\| 399$ 4|\|D 5P4/\/\
  • Interests:$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3
  • myCENT:71.24

Posted 13 December 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.

#4 hts

    Advanced Member

  • Kontributors
  • PipPipPipPipPipPipPip
  • 138 posts
  • Location:Iasi, Romania

Posted 13 December 2006 - 09:05 PM

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

Edited by hts, 13 December 2006 - 09:05 PM.

#5 matak

    Super Member

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 416 posts
  • Location:Psychedelic Realms
  • Interests:Psychedelic

Posted 15 December 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

@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://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...

Edited by matak, 15 December 2006 - 11:42 AM.

#6 minimcmonkey

    Super Member

  • Kontributors
  • PipPipPipPipPipPipPipPipPip
  • 414 posts
  • Gender:Male
  • Location:United Kingdom
  • myCENT:62.89

Posted 17 September 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.
Back to CSS (Cascading Style Sheets) · Next Unread Topic →

Reply to this topic


This post will need approval from a moderator before this post is shown.

  


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

  1. Discuss Anything
  2. → Main
  3. → Computers
  4. → Programming Languages
  5. → CSS (Cascading Style Sheets)
  6. Welcome - Start here! - Free Web Hosting