CSS Dropdown Menu, need some help... :(

[Klaas Koopman]

Hey All,


How are you all doing, been a while for me to be here but i'm back with a question!

I am working on this great design of mine and I want to make quite a nice menu in it.

http://tutorials.alsacreations.com/d...t/cssmenu3.htm

It will look alot like this ( a bit different cause i want the submenu to come above mine but i can fix that i guess )

But is there a way to make that menu without javascript? Cause that is my goal in this. I have checked alot of websites who all make dropdown menu's without css but none like the one i'm looking for.

Thanks ahead for your help and time.


Klaas Koopman

[megamoose]

I'm not really sure if you could have one exactly like that, but I'm sure there are people here with a better understanding of CSS than me.

I looked aroudn the web a little for you and came across this site:
CSS Drop Down Menu

It looks like it doesn't use any javascript, and maybe you could use something like that?

Here's something else I just found. CSS Drop Out Menu

Mark

[Klaas Koopman]

hey megamoose thanks for replying, i appreciate it!

But it's not what I want I've seen alot of those, but one that displays the items horizontally

[StupidScript]

The concept is this:

onmouseover = make visible the submenu for that item
onmouseout = make hidden the submenu for that item

This is accomplished using a combination of HTML, Javascript and CSS ... DHTML (Dynamic HTML), if you will.

The CSS describes the "visibility" property of the HTML division as "visible" or "hidden". (The property's value is a string and must be delineated by single- or double-quotes.) The Javascript provides the trigger for the change in the state of the "visibility" property.

For example:

<a
 onmouseover="document.getElementById('item1menu').visibility='visible'" 
 onmouseout="document.getElementById('item1menu').visibility='hidden'">Item 1</a>
 <div id="item1menu" style="visibility:hidden" ...>

(There's actually more code required so that when the user moves the cursor off of the "trigger" and onto the now-revealed submenu that the submenu doesn't go "hidden", but it's a simple example. )

Helpful? Hope so.

[Klaas Koopman]

Originally Posted by StupidScript

The concept is this:

onmouseover = make visible the submenu for that item
onmouseout = make hidden the submenu for that item

This is accomplished using a combination of HTML, Javascript and CSS ... DHTML (Dynamic HTML), if you will.

The CSS describes the "visibility" property of the HTML division as "visible" or "hidden". (The property's value is a string and must be delineated by single- or double-quotes.) The Javascript provides the trigger for the change in the state of the "visibility" property.

For example:

<a
 onmouseover="document.getElementById('item1menu').visibility='visible'" 
 onmouseout="document.getElementById('item1menu').visibility='hidden'">Item 1</a>
 <div id="item1menu" style="visibility:hidden" ...>

(There's actually more code required so that when the user moves the cursor off of the "trigger" and onto the now-revealed submenu that the submenu doesn't go "hidden", but it's a simple example. )

Helpful? Hope so.

Thanks alot i've seen something like this ( something like it haha ) but is it also possible to do this without javascript?

I've asked a teacher of mine yesterday who is going to come with some code to check it out and see if it's possible. If not, i'll have to think about flash and javascript, which would be best regarding search engines and visitors?

[StupidScript]

Javascript, in answer to your last question. Flash is too proprietary to depend on for many users over many years, although it can be used to do some pretty cool things. You don't need it for this.

What you can do with pure CSS is, basically, "crop" a container. It's "cropped" to hide the submenu and then "expanded" to reveal the submenu on ":hover".

<style ...>
#menu1 { left:20px;top:40px;position:absolute;clip:rect(0,24,12,0) }
#menu1:hover { clip:rect(0,24,24,0) }
</style>
...
<div id="menu1" style=">Menu Item<br />SubItem 1</div>

"Clip" ("crop") that box so only "Menu Item" is visible, and onmouseover (":hover"), expand the visible area to include the submenu.

Clipping can only be applied to an absolutely-positioned element, so that's the tricky part, really.

Keep in mind that some browsers respond to the :hover condition on a DIV element and some do not, so ... ya takes ya chances ... and ... if they don't have Javascript enabled, they won't be able to use the CSS, either. It's driven by the same engine.

[Klaas Koopman]

Would there be anyone who knows a % of surfers that don't have js enabled? Is it like a big part or ...

And would it be worth? I mean it can be done with js but won't be animated and butt ugly.

[StupidScript]

The JS+CSS solution can be made to be just as functional (and good-looking) as a pure CSS solution. And since the visitor needs to have JS enabled to view either one, you're stuck with users that have JS enabled if you want any type of dynamic menu.

But take heart ... almost everyone who surfs the web has Javascript enabled, unless they have specifically disabled it (either because of paranoia, a Microsoft suggested 'fix' for a security issue, or because their systems are simply incapable of using it). Just make sure that the primary menu items are clickable and lead to a page where normal, non-scripted links are available for the submenu items. That way, if the visitor doesn't use JS for some reason, they can still navigate your site.

Actually, the JS+CSS solution is more useful than the pure CSS solution due to the reason I mentioned earlier; that some browsers don't respond to a :hover event over a DIV, while they all respond to an onmouseover event.

[StupidScript]

Here's pure CSS:

<style type="text/css">
.menu1 { background-color:#dedeff }
#menu1 { position:absolute;clip:rect(0,80,20,0) }
#menu1:hover { clip:rect(0,190,72,0) }
.menu2 { background-color:#ffdede }
#menu2 { position:absolute;left:100px;clip:rect(0,80,20,0) }
#menu2:hover { clip:rect(0,190,72,0) }
</style>
<div id="menu1">Menu Item 1<br />
 <span class="menu1">SubItem 1.1 | SubItem 1.2</span></div>
<div id="menu2">Menu Item 2<br />
 <span class="menu2">SubItem 2.1 | SubItem 2.2</span></div>

[StupidScript]

Here's JS+CSS:

<style type="text/css">
.menu1 { background-color:#dedeff }
#menu1 { position:absolute }
.menu2 { background-color:#ffdede }
#menu2 { position:absolute;left:100px }
A { text-decoration:none;color:black }
</style>
<script type="text/javascript">
function showDiv(div,state) {
 if (state) { vis="visible"; }
 else { vis="hidden"; }
 thisdiv=document.getElementById(div);
 thisdiv.style.visibility=vis;
}
</script>
<div id="menu1">
 <a href="#"
  onmouseover="showDiv('sub1',1)"
  onmouseout="showDiv('sub1',0)">Menu Item 1</a><br />
 <div id="sub1" style="visibility:hidden">
  <span class="menu1">SubItem 1.1 | SubItem 1.2</span>
 </div>
</div>
<div id="menu2">
 <a href="#"
  onmouseover="showDiv('sub2',1)"
  onmouseout="showDiv('sub2',0)">Menu Item 2</a><br />
 <div id="sub2" style="visibility:hidden">
  <span class="menu2">SubItem 2.1 | SubItem 2.2</span>
 </div>
</div>

And still there's extra code needed to keep the sub-divs visible when the cursor rolls off the links, but there you have the basic idea ... Remember those browsers that don't support :hover on divs ... there's got to be an alternative for them.