Topic: Simple Dropdown Menu (show layer onmouseover) (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=30253" title="Pages that link to Topic: Simple Dropdown Menu (show layer onmouseover) (Page 1 of 1)" rel="nofollow" >Topic: Simple Dropdown Menu (show layer onmouseover) <span class="small">(Page 1 of 1)</span>\

 
Nimraw
Paranoid (IV) Inmate

From: Sthlm, Sweden
Insane since: Sep 2000

posted posted 05-07-2008 10:54

Hi all

I might just be extremely thick or it might be my antihisthamine meds messing with my brain (yeah, right) but I can't figure this out nor be able to google it.

I need to make the simplest of layer dropdown menus, where the mouseover of an image-header shows a layer with 2 imagelinks like;

----------------------
Header (mouseout)
----------------------




and

----------------------
Header (moseover)
----------------------
img link 1
img link 2
----------------------

Mouseover the header should show the layer with the menu selections and a mouseout of the layer should hide it.


This *should* be straightforward and I should be able to do it using CSS and layers right?

I have googled for quite a while and only find very complex or nested versions that I can't untangle (I'm a very crappy coder so I need a base to start from/manipulate).

Is there anyone that could spend a minute or two to give me a pointer or to a tut on this ?

Many Thanks
nimraw

(e) typos

(Edited by Nimraw on 05-07-2008 13:45)

WarMage
Maniac (V) Mad Scientist

From: Rochester, New York, USA
Insane since: May 2000

posted posted 05-07-2008 13:28
code:
<ul class="menu">
  <li>
     <a href="">Header</a>
     <ul class="submenu">
        <li><img src=""/> Link 1</li>
        <li><img src=""/> Link 2</li>
     </ul>
  </li>



There are plenty of ways of controlling this. I believe there are CSS only as well as CSS/JavaScript solutions. Google "CSS dropdown menu" and you should come up with a ton.

If you want the image controlled via CSS, then you will want to apply class attributes to the li and control it in the class style.

Dan
Code Town | Zombie Head | How Much TP? | Feed The Blob

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

posted posted 05-07-2008 13:57

Alas you need a tiny bit of JS to make up for IE's lack of support of the :hover pseudo class on other elements than A tags.

See the navigation on my site for example.

Nimraw
Paranoid (IV) Inmate

From: Sthlm, Sweden
Insane since: Sep 2000

posted posted 05-07-2008 14:06

Thanks for the tip Dan

However I'm looking for something that makes the layer visible on mouseover (might have explained myself badly), thus creating a drop down, much like the Forum Drop Down Menu on the top right of this page (only triggered by OnMouseOver instead of onClick.. or OnClick could work as well).


I've found tons of scripts, but most are adding a lot of fancy stuff (rollover bgcolor change, delays etc) which messes with my feeble understanding of code.

I just found a rather bloated codechink that I am stripping of unwanted stuff a minute ago and it seems to work. However I can't help but thinking that this should something that could be done without 50lines of javascript...


I'll continue digging...

CPrompt
Maniac (V) Inmate

From: there...no..there.....
Insane since: May 2001

posted posted 05-07-2008 14:24

http://www.cssplay.co.uk/menus/final_drop.html

Later,

C:\

Seymour
Bipolar (III) Inmate

From: K-town, FL, USA
Insane since: Jun 2002

posted posted 06-21-2008 18:51

http://css.maxdesign.com.au/listamatic/index.htm

I use this site a lot when I just need the basic code for a menu. It should do a pretty good job of getting you started in the right direction. I would say just look through some of the examples that they have and decide what you want from there.

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

posted posted 06-21-2008 23:16
quote:
poi said:

Alas you need a tiny bit of JS to make up for IE's lack of support of the :hover pseudo class on other elements than A tags.See the navigation on my site for example.

IE6, that is.

quote:
CPrompt said:

http://www.cssplay.co.uk/menus/final_drop.html

Garbage (uses non-standard/proprietary code).

(Edited by reisio on 06-21-2008 23:19)



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu