The Cache: Technology Expert's Forum
 
*
Welcome, Guest. Please login or register. September 19, 2019, 05:56:13 AM

Login with username, password and session length


Pages: [1]
  Print  
Author Topic: CSS Drop Menu  (Read 7522 times)
DangerMouse
Expert
****
Offline Offline

Posts: 244



View Profile
« on: November 25, 2008, 02:36:24 AM »

Hey all,

Very quick question, I don't suppose any of you have come across a fully cross browser compatible CSS drop menu anywhere? Preferably one thats easy enough for a css noob like me to use lol.

Cheers,

DM
Logged
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #1 on: November 25, 2008, 09:52:56 AM »

In short, Nope. And I've looked pretty good.

There are several drop-down menus that work satisfactorily in FF, or IE7 and such, but true cross-browser capability (including the likes of IE6) is either not available in drop menus or REALLY complicated. Simple primary example: IE6 will not do a :HOVER event against anything but an <a>, so that really limits the ways that you can construct the menu.

If you must have drop menus, I recommend a hybrid JS/CSS implementation that goes more towards the LCD of the current rack of browsers. I have not moved this direction specifically because of the complexity of it.

Sorry mang.
« Last Edit: November 25, 2008, 10:50:37 AM by perkiset » Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
jairez
Expert
****
Offline Offline

Posts: 164


JTFC


View Profile
« Reply #2 on: November 25, 2008, 11:38:50 AM »

The only answer I can think of here that is probably 99% cross-browser safe is coding it in Adobe Flex and letting it run via Flash.  I've probably just pissed off the Gods of the Cache, but hey ... you're not living until you've ruffled a few feathers, right?   Grin
Logged

Spontaneity has it's time and place.  [Sluggo, 1990-ish]
DangerMouse
Expert
****
Offline Offline

Posts: 244



View Profile
« Reply #3 on: November 25, 2008, 11:56:51 AM »

I can see the benefits in what your saying jairez, but again that creates complexity where there really shouldn't need to be.

I did a bit of digging Perk and came to the same conclusion as you, without implementing more hacks than I could possibly keep track of with my limited jScript and CSS knowledge it is close to impossible to achieve a > IE5 compatable drop menu.

DM

Logged
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #4 on: November 25, 2008, 12:05:15 PM »

A flash option may well work, given a certain set of circumstances. I am not often moved to Flash for mechanics of a website, although I know there are many that do. Of course, this option would have the undesirable effect of hindering any SEO you might do against the menus/content of those menus.

It's unfortunate DM, I agree. I've seen it done, but not without some pretty radical hacks and things that would introduce a kind of brittleness that I am not fond of.
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
jairez
Expert
****
Offline Offline

Posts: 164


JTFC


View Profile
« Reply #5 on: November 25, 2008, 12:30:34 PM »

Quote
this option would have the undesirable effect of hindering any SEO you might do
Good point, Perkiset.  I believe that in the past Flex/Flash developers have counted on their directories being crawled for "other than content" and that's been suboptimal.  I've been dabbling a bit with this for the past few months and believe that using Flex's HTTPService() to read in an XML file (your menu perhaps?) will both render in the player and be available to a crawler.  But I'm totally guessing here.

Also, it looks like Adobe has recently released code to the major search engines so they can crawl these types of sites.
http://about.stompernet.com/blog/scrutinizer/2008-08-14/adobe-flex-interfaces-and-seo

Sorry 'bout the hijack.  Resume party.   Embarrassed
Logged

Spontaneity has it's time and place.  [Sluggo, 1990-ish]
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #6 on: November 25, 2008, 12:42:06 PM »

No hijack at all.

That's actually an interesting note: you wouldn't need to go XML to make that happen. You could have straight up, easily read and very tasty spiderfood provided on a page then a tiny javascript that moved innerHTML of points in your HTML into parameters of a FLASH animation. Very easy, it'd be fast and handle both issues nicely.

Interesting...  Idea...
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
dink
Expert
****
Offline Offline

Posts: 349


View Profile
« Reply #7 on: November 27, 2008, 11:07:33 AM »

Here is one example that will do almost everything you would want.
From my old friends:  http://www.positioniseverything.net/css-dropdowns.html

Quote
The entire nav is semantically just a set of nested lists, making for reasonable accessibility.

This nav works in IE5, IE5.5, IE6, Op7, Gecko, Konqueror, and Safari. IEmac fails to support the hover method used, and so gets the expanded nav instead. IEwin with scripting disables also gets the expanded nav. Nav 4 does not support this method, or much else for that matter.

css and js in the head section....modify as needed:
Code:
<head>
<script type="text/javascript">if (window.self != window.top) window.top.location = window.self.location; </script>

<!--[if gt IE 6]>
  <style type="text/css">

.button .dropdown li, .nav a {{zoom: 1;}

  </style>
<![endif]-->
<!-- This CC feeds a modified Holly hack to IE7 and up. The old star-html hack is
ignored by IE7, and IE7 correctly obeys the "height: 1%" layout-triggering fix, so
use a targeted CC and change the fix to "zoom: 1;" to achieve the same layout fix. -->

<style type="text/css">

/*XXXXXXXXXX Generic page styling rules XXXXXXXXXX*/

html, body, ul, li { padding: 0; margin: 0; list-style: none;}

body {
  margin: 20px 0;
  text-align: center;
  font-family: arial, sans-serif;
  font-size: 100.01%;
  }

#wrapper {
  margin: 0 auto;
  padding: 79px 0 0;
  width: 760px;
  border: 1px solid #888;
  text-align: left;
  background: #fffaee url(images/flyoutbanner.gif) no-repeat;
  }

/* Box model hack \*/
* html #wrapper {
  width: 762px;
  w\idth: 760px;
  }
/* */

.textbox {
padding: 1px 1em;
font-size: .9em;
}

.textbox a {color: #000;}

.back {text-align: right; padding: 10px 10px 0 0;}

.alignright {margin: 0 30px 20px 0; text-align: right;}

.small {font-size: .8em;}

h1 {position: absolute; left: -3000px;}

h2 {font-size: 1em;}

p {margin: .8em 1em .8em 1.6em;}


/*XXXXXXXXXXXX Primary top nav rules XXXXXXXXXXX*/

.nav {
position: relative;
background: #def;
border: 1px solid #888; /* borders the bottom of the top nav */
border-width: 1px 0;
width: 100%;
}

.button {
width: 190px;
float: left;
}

.parent {position: relative;}
/* this parent div does not provide "sticky hovering", but instead fixes a
strange bug in Op7. When an element serves as a hovered popup "parent" element,
that element must not also be floated or all heck breaks loose in Opera 7.
To prevent this, we have floated the top level list items, while nesting
hoverable parent divs inside that are then hovered to generate the dropdowns.
Thus the ugly (but interesting) Op7 bug is defeated. */

.floatfix {margin-right: -3px;}
/* this fixes the IE 3px bug that is common in this type of float arrangement */

/*XXXXXXXXXXXX Primary dropdown/flyout rules XXXXXXXXXXX*/

.dropdown { /* rules for dropdown div */
width: 250px;
position: absolute;
left: -3000px;
top: auto; /* puts dropdowns directly under top nav */
text-align: left; /* needed because IE misapplies text centering to boxes */
background: url(images/bgfix.gif);
}

.dropdown div {
width: 220px;
position: absolute;
left: -3000px;
top: 0;
background: url(images/bgfix.gif);
text-align: left; /* needed because IE misapplies text centering to boxes */
}

/* The margins on the UL's replace the div paddings to create "sticky hovering"
zones,  and the margins should "fill" the divs, making the IE BG fix unnecessary.
Unfortunately the BG fix is still needed, altho this method does eliminate
possible box model problems */

.dropdown ul {
  width: 189px; /* tweaked so that dropdowns appear to "line up" with top links */
  margin: 0 30px 30px 30px; /* creates "sticky hovering" zones for dropdowns */
  border: 1px solid #888;
  border-width: 1px 1px 0;
  } /* borders sides and top of the dropdowns and flyouts; links provide the bottom border */

.dropdown div ul {margin: 30px 30px 30px 0;} /* creates "sticky hovering" zones for flyouts */

.four .dropdown ul {width: 190px;} /* modifies width for rightmost "visible" dropdown (tweak) */

.four .dropdown div ul {margin: 30px 0 30px 30px; position: relative;} /* rule reversal for "visible" right drop flyouts */

.nav li {text-align: center;}

.nav a {
  display: block;
  color: #800;
font-weight: bold;
font-size: .9em;
text-decoration: none;
padding: 6px 0 5px;
border-right: 1px solid #888;  /* makes the dividers between the top nav links */
}

.four a {border-right: 0;} /* kills right border on last top link */

.nav ul ul a {
  color: #fff;
  border-right: 0; /* negates right border for dropdowns and flyouts */
  border-bottom: 1px solid #888;  /* borders the bottoms of the dropdown and flyout links */
  }

.dropdown li {
  position: relative;
  vertical-align: bottom; /* IE5/win bugfix */
  }

.parent:hover {background-image: url(images/bgfix.gif);}
/* this hover calls a transparent GIF only to defeat the IE failed hover bug. Any
background change on hovering div.parent will make IE obey and display the dropdown.
While the call itself will fix the bug, make sure you actually call a real image
file so that your site error logs will not fill with failed image calls. */

.parent:hover div.dropdown {left: -31px;} /* hover rule for dropdowns */
/* extra pixel makes dropdowns "line up" with top links */

.dropdown li:hover div { /* hover rule for flyouts */
left: 180px; /* this value controls the amount of flyout "overlap" */
top: -26px; /* this value controls the amount of flyout vertical offset */
}

.four li:hover div { /* reversed flyout rules for rightmost drop flyouts */
left: -210px;
top: -26px;
}

.nav div.mini-zone { /* special hover zone that covers the "danger corner" */
  padding: 0;
  width: 15px;
height: 15px;
font-size: 1px;
left: -3000px;
bottom: -15px;
top: auto;
background: url(images/bgfix.gif);
}

.nav .dropdown li:hover div.mini-zone { /* hover rule for mini-zones */
left: auto;
right: 8px;
top: auto;
}

.nav .four li:hover div.mini-zone { /* reversed hover rule for rightmost drop mini-zones */
left: 8px;
}

.dropdown li:hover {background: #235;} /* hover color effect on dropdown links */

.dropdown div li:hover {background: #ff7;} /* hover color effect on flyout links */


/*XXXXXXXXXXX Primary dropdown backgrounds XXXXXXXXXX*/

.one ul {background: #d79b00;}
.two ul {background: #459;}
.three ul {background: #4a3;}
.four ul {background: #790000;}
.dropdown div ul {background: #eda;} /* colors BG of flyouts */
.dropdown div ul a {color: #400;} /* colors text of  flyouts */


/*XXXXXXXXXX z-index rules for top nav XXXXXXXXXXX*/

.one {z-index: 10;}
.two {z-index: 20;}
.three {z-index: 30;}
.four {z-index: 40;}
.four:hover {z-index: 20;}
/* this last is a special trick that reverses the stacking order of the rightmost
top link when it or its children are hovered. This, and the previous rules work
together so that when a user is on the top link of any flyout, they can move
vertically to the top link directly above and not have the sticky hoivering zone
on the flyout get in the way of hovering that top link. */


/*XXXXXXXXXXX Special fixes XXXXXXXXXXX*/

/* This is to hide the following from IE/Mac. \*/
* html .button .dropdown li {
height: 1%;
margin-left: -16px;
mar\gin-left: 0;
}
/* */

* html .nav a
 {height: 1%;}

/* The first 2 rules above fix "bullet region" problems in IE5.x/win,
and the 2nd is to make all links fully clickable. */

.brclear { /* Use a break with this class to clear float containers */
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

/*\*/ /*/
.nav .dropdown, .nav .dropdown div {width: 189px;}
.nav .button .dropdown ul {margin: 0px;}
.nav .dropdown, .nav .dropdown div {position: static;}
.nav .dropdown ul {border: 0;}
.mini-zone {display: none;}
/* this rule block "dumbs down" the nav for IEmac */


</style>


<!--[if lte IE 6]>
  <style type="text/css">
body {behavior: url(sidepages/csshover.htc);}
  </style>

  <noscript>
<style type="text/css">

.nav .dropdown, .nav .dropdown div {width: 189px;}
.nav .button .dropdown ul {margin: 0px;}
.nav .dropdown, .nav .dropdown div {position: static;}
.nav .dropdown ul {border: 0;}
.mini-zone {display: none;}

</style>
  </noscript>
<![endif]-->
<!-- The above block calls the special .htc script that forces compliance in IE6
and lower, and also "dumbs down" the nav when IE is set not to allow scripting.
Only IE6 and lower can read this block. -->

</head>

The part within the body where the actual links go:

Code:
<body>

<div id="wrapper">

<h1>Deluxe CSS Dropdowns and Flyouts</h1>

<div class="nav">

<ul>

<li class="button"><div class="parent one"><a href="#">First Link</a>
<div class="dropdown">
    <ul>
<li style="z-index: 10;">
<a href="#">Sublink One</a>
<div class="mini-zone"></div>
<div>
    <ul>

<li><a href="#">One.One</a></li>
<li><a href="#">One.Two</a></li>
<li><a href="#">One.Three</a></li>
<li><a href="#">One.Four</a></li>
<li><a href="#">One.Five</a></li>
</ul>

</div>
</li>
<li style="z-index: 9;">
<a href="#">Sublink Two</a>
<div class="mini-zone"></div>
<div>
<ul>
<li><a href="#">Two.One</a></li>

<li><a href="#">Two.Two</a></li>
<li><a href="#">Two.Three</a></li>
<li><a href="#">Two.Four</a></li>
<li><a href="#">Two.Five</a></li>
</ul>
</div>
</li>

<li style="z-index: 8;">
<a href="#">Sublink Three</a>
<div class="mini-zone"></div>
<div>
<ul>
<li><a href="#">Three.One</a></li>
<li><a href="#">Three.Two</a></li>

<li><a href="#">Three.Three</a></li>
<li><a href="#">Three.Four</a></li>
<li><a href="#">Three.Five</a></li>
</ul>
</div>
</li>
<li style="z-index: 7;">

<a href="#">Sublink Four</a>
<div class="mini-zone"></div>
<div>
<ul>
<li><a href="#">Four.One</a></li>
<li><a href="#">Four.Two</a></li>
<li><a href="#">Four.Three</a></li>

<li><a href="#">Four.Four</a></li>
<li><a href="#">Four.Five</a></li>
</ul>
</div>
</li>
<li style="z-index: 6;">
<a href="#">Sublink Five</a>

<div class="mini-zone"></div>
<div>
<ul>
<li><a href="#">Five.One</a></li>
<li><a href="#">Five.Two</a></li>
<li><a href="#">Five.Three</a></li>
<li><a href="#">Five.Four</a></li>

<li><a href="#">Five.Five</a></li>
</ul>
</div>
</li>
</ul>
</div></div>
</li>

<li class="button"><div class="parent two"><a href="#">Second Link</a>
<div class="dropdown">

    <ul>
<li style="z-index: 10;">
<a href="#">Sublink One</a>
<div class="mini-zone"></div>
<div>
    <ul>
<li><a href="#">One.One</a></li>
<li><a href="#">One.Two</a></li>

<li><a href="#">One.Three</a></li>
<li><a href="#">One.Four</a></li>
<li><a href="#">One.Five</a></li>
</ul>
</div>
</li>
<li style="z-index: 9;">

<a href="#">Sublink Two</a>
<div class="mini-zone"></div>
<div>
<ul>
<li><a href="#">Two.One</a></li>
<li><a href="#">Two.Two</a></li>
<li><a href="#">Two.Three</a></li>

<li><a href="#">Two.Four</a></li>
<li><a href="#">Two.Five</a></li>
</ul>
</div>
</li>
<li style="z-index: 8;">
<a href="#">Sublink Three</a>

<div class="mini-zone"></div>
<div>
<ul>
<li><a href="#">Three.One</a></li>
<li><a href="#">Three.Two</a></li>
<li><a href="#">Three.Three</a></li>
<li><a href="#">Three.Four</a></li>

<li><a href="#">Three.Five</a></li>
</ul>
</div>
</li>
<li style="z-index: 7;">
<a href="#">Sublink Four</a>
<div class="mini-zone"></div>
<div>

<ul>
<li><a href="#">Four.One</a></li>
<li><a href="#">Four.Two</a></li>
<li><a href="#">Four.Three</a></li>
<li><a href="#">Four.Four</a></li>
<li><a href="#">Four.Five</a></li>

</ul>
</div>
</li>
<li style="z-index: 6;">
<a href="#">Sublink Five</a>
<div class="mini-zone"></div>
<div>
<ul>

<li><a href="#">Five.One</a></li>
<li><a href="#">Five.Two</a></li>
<li><a href="#">Five.Three</a></li>
<li><a href="#">Five.Four</a></li>
<li><a href="#">Five.Five</a></li>
</ul>

</div>
</li>
</ul>
</div></div>
</li>

<li class="button"><div class="parent three"><a href="#">Third Link</a>
<div class="dropdown">
    <ul>
<li style="z-index: 10;">
<a href="#">Sublink One</a>

<div class="mini-zone"></div>
<div>
    <ul>
<li><a href="#">One.One</a></li>
<li><a href="#">One.Two</a></li>
<li><a href="#">One.Three</a></li>
<li><a href="#">One.Four</a></li>

<li><a href="#">One.Five</a></li>
</ul>
</div>
</li>
<li style="z-index: 9;">
<a href="#">Sublink Two</a>
<div class="mini-zone"></div>
<div>

<ul>
<li><a href="#">Two.One</a></li>
<li><a href="#">Two.Two</a></li>
<li><a href="#">Two.Three</a></li>
<li><a href="#">Two.Four</a></li>
<li><a href="#">Two.Five</a></li>

</ul>
</div>
</li>
<li style="z-index: 8;">
<a href="#">Sublink Three</a>
<div class="mini-zone"></div>
<div>
<ul>

<li><a href="#">Three.One</a></li>
<li><a href="#">Three.Two</a></li>
<li><a href="#">Three.Three</a></li>
<li><a href="#">Three.Four</a></li>
<li><a href="#">Three.Five</a></li>
</ul>

</div>
</li>
<li style="z-index: 7;">
<a href="#">Sublink Four</a>
<div class="mini-zone"></div>
<div>
<ul>
<li><a href="#">Four.One</a></li>

<li><a href="#">Four.Two</a></li>
<li><a href="#">Four.Three</a></li>
<li><a href="#">Four.Four</a></li>
<li><a href="#">Four.Five</a></li>
</ul>
</div>
</li>

<li style="z-index: 6;">
<a href="#">Sublink Five</a>
<div class="mini-zone"></div>
<div>
<ul>
<li><a href="#">Five.One</a></li>
<li><a href="#">Five.Two</a></li>

<li><a href="#">Five.Three</a></li>
<li><a href="#">Five.Four</a></li>
<li><a href="#">Five.Five</a></li>
</ul>
</div>
</li>
</ul>

</div></div>
</li>

<li class="button floatfix"><div class="parent four"><a href="#">Fourth Link</a>
<div class="dropdown">
    <ul>
<li style="z-index: 10;">
<a href="#">Sublink One</a>
<div class="mini-zone"></div>
<div>

    <ul>
<li><a href="#">One.One</a></li>
<li><a href="#">One.Two</a></li>
<li><a href="#">One.Three</a></li>
<li><a href="#">One.Four</a></li>
<li><a href="#">One.Five</a></li>

</ul>
</div>
</li>
<li style="z-index: 9;">
<a href="#">Sublink Two</a>
<div class="mini-zone"></div>
<div>
<ul>

<li><a href="#">Two.One</a></li>
<li><a href="#">Two.Two</a></li>
<li><a href="#">Two.Three</a></li>
<li><a href="#">Two.Four</a></li>
<li><a href="#">Two.Five</a></li>
</ul>

</div>
</li>
<li style="z-index: 8;">
<a href="#">Sublink Three</a>
<div class="mini-zone"></div>
<div>
<ul>
<li><a href="#">Three.One</a></li>

<li><a href="#">Three.Two</a></li>
<li><a href="#">Three.Three</a></li>
<li><a href="#">Three.Four</a></li>
<li><a href="#">Three.Five</a></li>
</ul>
</div>
</li>

<li style="z-index: 7;">
<a href="#">Sublink Four</a>
<div class="mini-zone"></div>
<div>
<ul>
<li><a href="#">Four.One</a></li>
<li><a href="#">Four.Two</a></li>

<li><a href="#">Four.Three</a></li>
<li><a href="#">Four.Four</a></li>
<li><a href="#">Four.Five</a></li>
</ul>
</div>
</li>
<li style="z-index: 6;">

<a href="#">Sublink Five</a>
<div class="mini-zone"></div>
<div>
<ul>
<li><a href="#">Five.One</a></li>
<li><a href="#">Five.Two</a></li>
<li><a href="#">Five.Three</a></li>

<li><a href="#">Five.Four</a></li>
<li><a href="#">Five.Five</a></li>
</ul>
</div>
</li>
</ul>
</div></div>
</li>

        </ul>
<br class="brclear" />

</div> <!--// close nav -->
.
.
</body>



ymmv
Logged

[quote Nutballs]
the universe has a giant fist, and its got enough whoop ass for everyone.
[/quote]
DangerMouse
Expert
****
Offline Offline

Posts: 244



View Profile
« Reply #8 on: November 27, 2008, 12:04:41 PM »

Thanks dnk, that looks great. I also found that the term "suckerfish" is a good one to search on, that provides alot of accessible options.

Ta

DM
Logged
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #9 on: November 27, 2008, 01:52:32 PM »

hmmm... I may stand corrected, but I'll have to look at it. Nice one Dink

Doesn't really pass the uncomplicated test though  ROFLMAO and I'm wondering how brittle is it.
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
dink
Expert
****
Offline Offline

Posts: 349


View Profile
« Reply #10 on: November 30, 2008, 10:36:42 AM »

@Danger. . . my pleasure.

@perk . . . my qualifier was 'almost'.  Ya, it is complicated looking.  Once you get all of your requirements put in the (hopefully) external stylesheet, the on page stuff is simple enough.

As for the brittle part, don't know.  Haven't had any complaints on a couple of sites that that hack runs on.  I've used their style suggestions on a lot of full css sites in the past and they are still cookin.

My personal preference is any style that will gracefully degrade when one of the off brand browsers happen by.  The greatest number of users on my shopping sites use one of the M$ browsers.  Mostly newer.  So not too worried by them. 

The techy types that happen on one of my other sites are used to pages that don't behave.  lol  Therefore, the "satisfy the greatest number of users and move on" mantra.
Logged

[quote Nutballs]
the universe has a giant fist, and its got enough whoop ass for everyone.
[/quote]
Pages: [1]
  Print  
 
Jump to:  

Perkiset's Place Home   Best of The Cache   phpMyIDE: MySQL Stored Procedures, Functions & Triggers
Politics @ Perkiset's   Pinkhat's Perspective   
cache
mart
coder
programmers
ajax
php
javascript
Powered by MySQL Powered by PHP Powered by SMF 1.1.2 | SMF © 2006-2007, Simple Machines LLC
Seo4Smf v0.2 © Webmaster's Talks


Valid XHTML 1.0! Valid CSS!