Solution Time
Thanks to all those that took part in another interesting little quiz. 
This quiz was another one that sounded impossible at first but with a little lateral thought we have again shown that if you put your mind to it then most things are possible.
The secret to this quiz was simply to use a fragment identifier on the href and have the browser scroll to an "in-page link" where the submenus were contained.
The submenus were simply hidden in an an absolute element that had overflow:hidden applied and the submenus were placed below the fold of the absolute element. This meant a height needed to be set for the absolute element so that we could put the menus out of reach. The element then had overflow:hidden to hide the scrollbars and to therefore hide the content.
When you clicked the link the browser scrolled the content to the top of the absolute element making them visible and accessible.
The rest of the code was just ensuring that each menu was out of the way of the next and didn't interefere with the display.
This technique could be used in many other scenarios such as simple hide and shows of blocks of content which would in fact be much easier than our menu because they could each occupy the same space. It could also be used for a simple image gallery that shows a larger image when clicked.
Here is a live example of my original code.
As mentioned this was mainly aimed at IE6 for quiz purposes but does work in most other browsers except in Opera. However Yurikolvsky added some extra divs and managed to get Opera to work as well (note the opera bug appears to be fixed in the next version according to Simon (zcorpan)).
For that reason Yurikilovsky is the winner of this quiz so well done
The other two entrants should also be commended for finding the solution and they are DanNl and Ryan.
Well done to all those that took part and those that watched in awe.
Here is the code to my original solution:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
margin:0;
padding:0
}
h1, h2 {
text-align:center;
margin:.5em 0;
}
p {
margin:1em 0;
}
ul {
list-style:none;
}
#navtest {
width:43em;
margin:20px auto;
position:relative;
}
ul#nav {
margin:0 0 1em;
float:left
}
ul#nav li {
float:left;
height:2em;
line-height:2em;
margin-right:-1px;
width:7em;
border:1px solid #000;
text-align:center;
position:relative;
}
ul#nav li a {
white-space:nowrap;
display:block;
padding:0;
height:2em;
color:#000;
text-decoration:none;
background:#ffffcc;
}
#sub ul {
position:absolute;
height:30em;
}
#sub li {
background:#ffffcc;
border:1px solid #000;
margin:-1px 0 0;
float:none;
height:auto;
width:auto;
position:relative;
}
#sub li a {
white-space:nowrap;
display:block;
text-decoration:none;
color:#000;
position:relative;
padding:6px 10px;
}
#navtest li a:hover {
background:red;
color:#fff;
}
ul#nav li.close a {
background:#000;
color:#fff;
font-weight:bold
}
ul#one {
margin-left:0px;
top:30em
}
ul#two {
margin-left:7.1em;
top:60em
}
ul#three {
margin-left:14.15em;
top:90em
}
ul#four {
margin-left:21.2em;
top:120em
}
ul#five {
margin-left:28.3em;
top:150em
}
ul#blank {
margin-left:0;
top:180em
}
ul#blank {
visibility:hidden
}
#navtest div {
clear:both;
position:absolute;
left:0;
top:2.1em;
height:20em;
width:50em;
overflow:hidden
}
.intro {
width:43em;
margin:auto;
}
ul#nav li b {
border-left:10px dashed transparent;
border-right:10px dashed transparent;
border-top:10px solid blue;
position:absolute;
right:10px;
top:10px;
}
ul#nav li a:hover b {
border-top:10px solid #fff
}
a:active, a:focus {
background:green!important
}
</style>
</head>
<body>
<div class="intro">
<h1>Click Drop Down Menu For IE6 </h1>
<h2>No Javascript - No conditional comments - <br />
Valid CSS HTML - No Images</h2>
<p>Click the menu to reveal the drop down and then you can select a link from the drop down. To close the menu click the close button at the end of the menu.</p>
</div>
<div id="navtest">
<ul id="nav">
<li><a href="#one">Link 1<b></b> </a></li>
<li><a href="#two">Link 2<b></b></a></li>
<li><a href="#three">Link 3<b></b></a></li>
<li><a href="#four">Link 4<b></b></a></li>
<li><a href="#five">Link 5<b></b></a></li>
<li class="close"><a href="#blank">Close menus</a></li>
</ul>
<div id="sub">
<ul id="one">
<li><a href="http://www.google.co.uk/">Link to somewhere</a></li>
<li><a href="http://uk.yahoo.com/?p=us">Somewhere else</a></li>
<li><a href="http://www.google.co.uk/">Less Links </a></li>
<li><a href="#">Just links </a></li>
<li><a href="#">More links </a></li>
<li><a href="#">Less Links </a></li>
<li><a href="#">Just links </a></li>
</ul>
<ul id="two">
<li><a href="http://www.pmob.co.uk">Link2 to somewhere</a></li>
<li><a href="#">Link2 to somewhere else</a></li>
<li><a href="#">More2 links </a></li>
<li><a href="#">Less2 Links </a></li>
</ul>
<ul id="three">
<li><a href="#">Link3 to somewhere</a></li>
<li><a href="#">Link3 to somewhere else</a></li>
<li><a href="#">More3 links </a></li>
<li><a href="#">Less3 Links </a></li>
<li><a href="#">Just3 links </a></li>
<li><a href="#">Less Links </a></li>
<li><a href="#">Just links </a></li>
<li><a href="#">Less Links </a></li>
<li><a href="#">Just links </a></li>
</ul>
<ul id="four">
<li><a href="#">Link4 to here</a></li>
<li><a href="#">Link4 to there</a></li>
<li><a href="#">More4 links </a></li>
<li><a href="#">Less4 Links </a></li>
<li><a href="#">Just4 links </a></li>
<li><a href="#">Less Links </a></li>
<li><a href="#">Just links </a></li>
</ul>
<ul id="five">
<li><a href="#">Link5 to somewhere</a></li>
<li><a href="#">Link5 to somewhere else</a></li>
<li><a href="#">More5 links </a></li>
<li><a href="#">Less5 Links </a></li>
<li><a href="#">Just5 links </a></li>
<li><a href="#">Less Links </a></li>
<li><a href="#">Just links </a></li>
<li><a href="#">Less Links </a></li>
<li><a href="#">Just links </a></li>
</ul>
<ul id="blank">
<li> </li>
</ul>
</div>
<p>This dropdown menu uses no javascript and uses valid css and html without the need for conditional comments and without the need for any hacks at all. The drop downs are removed from the flow and will overlap following content such as this.</p>
<p>This is an experimental layout specially provided for my CSS quizzes at Sitepoint and is not meant to be anthng more than an example of what css can do. The code is not very semantic in this example but the techniques used could be used semantically for similar layouts. </p>
<p>The links can be tabbed via the keyboard but the effect is rather strange</p>
<h3>Works in IE5 - 8, Firefox 3, Safari 3 - Doesn't work in Opera</h3>
</div>
</body>
</html>
Yurikolvsky's entry:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Clicking Dropdowns - YuriKolovsky - notcleaned xD</title>
<style type="text/css">
a {
text-decoration:none;
display:block;
}
ul {
list-style-type:none;
margin:0;
padding:0;
display:block;
}
.container {
border:green 1px solid;
position:relative;
height:22px;
width:915px;
}
.navigation {
background-color:#999;
overflow:hidden;
z-index:2;
position:relative;
}
.navigation li {
float:left;
background-color:#000;
width:150px;
text-align:center;
border:solid white 1px;
position:relative;
height:20px;
}
.navigation li a {
color:#fff;
}
.dropdowns {
height:400px;/*this is needed in order to hide the opera horizontal scrollbar, it creates a limitation in terms of vertical drop down height, but is needed for opera*/
width:1000px;
position:relative;
}
#reset {
display:block;
height:1000px;
}
.reset a {
background-color:#666;
}
.dropdowns ul {
border:solid #000000 1px;
position:absolute;
top:1000px;
border-bottom:0;
border-top:solid green 1px;
}
.dropdowns ul li {
padding:1px;
border-bottom:1px solid #000000;
background-color:#fff;
}
.dropdowns ul li a {
color:#000;
padding:4px;
}
.dropdowns ul li a:hover {
color:#fff;
background-color:#000;
}
/*below is the opera fix xD*/
.operafix {
position:relative;
float:left;/*ie-operafix, ie stop showing the dropdowns fix*/
border-top:0;
overflow:hidden;/*the trick is here*/
}
.dropdowns {
overflow:scroll;/*and here*/
overflow-y:hidden;
margin-bottom:-18px;/*and here*/
}
/*above is the opera fix*/
.operafix {
position:absolute;
left:0;
top:22px;
}
#two {
left:152px;
top:2000px;
}
#three {
left:304px;
top:3000px;
}
#four {
left:456px;
top:4000px;
}
#five {
left:608px;
top:5000px;
}
#spacer {
top:6000px;
}
</style>
</head>
<body>
<h1>Click DropDown Menu</h1>
<p>text text text</p>
<div class="container">
<ul class="navigation">
<li><a href="#one">link to 1</a></li>
<li><a href="#two">link to 2</a></li>
<li><a href="#three">link to 3</a></li>
<li><a href="#four">link to 4</a></li>
<li><a href="#five">link to 5</a></li>
<li class="reset"><a href="#reset">Close menus</a></li>
</ul>
<div class="operafix">
<div class="dropdowns"> <span id="reset"> </span>
<ul id="one">
<li><a href="#superspot">Link to super spot</a></li>
<li><a href="#someplace">Link to someplace</a></li>
<li><a href="#">Generic Unclickable Link</a></li>
<li><a href="#">Generic Unclickable Link</a></li>
<li><a href="#">Generic Unclickable Link</a></li>
<li><a href="#">Generic Unclickable Link</a></li>
<li><a href="#">Generic Unclickable Link</a></li>
<li><a href="#">Generic Unclickable Link</a></li>
</ul>
<ul id="two">
<li><a href="#">Generic Longer Unclickable Link</a></li>
<li><a href="#">Generic Longer Unclickable Link</a></li>
<li><a href="#">Generic Longer Unclickable Link</a></li>
<li><a href="#">Generic Unclickable Link</a></li>
</ul>
<ul id="three">
<li><a href="#whoops">Whoops</a></li>
<li><a href="#something">A Blob</a></li>
<li><a href="#">Myblog</a></li>
<li><a href="#">Myspace</a></li>
<li><a href="#">Mylife</a></li>
<li><a href="#">Mystuff</a></li>
<li><a href="#">Myland</a></li>
<li><a href="#">Myland???</a></li>
</ul>
<ul id="four">
<li><a href="#">LAzer Fiyring??</a></li>
<li><a href="#b">Underground Net Culture??!?</a></li>
<li><a href="#">internet rules? it rules!</a></li>
<li><a href="#">something werid</a></li>
<li><a href="#">things</a></li>
<li><a href="#">Mylife</a></li>
<li><a href="#">Mystuff</a></li>
<li><a href="#">Myland</a></li>
<li><a href="#someplace">Link to someplace</a></li>
<li><a href="#">Generic Unclickable Link</a></li>
</ul>
<ul id="five">
<li><a href="#">portfolio</a></li>
<li><a href="#">contact</a></li>
</ul>
<ul id="spacer">
</ul>
</div>
</div>
</div>
<p>text text text</p>
</body>
</html>
DanNl
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sitepoint's Paul O'B's CSS Quiz 19</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
font-size: 14px;
}
p {
margin-bottom: 14px;
}
h1 {
font-size: 28px;
}
h2 {
font-size: 22px;
}
h3 {
font-size: 18px;
}
.blue {
color:blue;
}
.link {
margin-top:900px;
padding-bottom:900px;
}
.clear_menu {
clear:both;
margin-bottom:60px;
}
.menu {
position:absolute;
}
.menu li {
list-style:none;
float:left;
width:85px;
background-color:blue;
}
.menu li a {
display:block;
padding:5px 5px 0 5px;
height:22px;
border-top:solid 1px #000;
border-right:solid 1px #000;
border-bottom:solid 1px #000;
background-color:#ffffcc;
position:relative;
text-decoration:none;
color:#000;
}
.menu a.first_horizontal {
border-left:solid 1px #000;
}
.menu a:active, .menu a:focus {
outline:none;
background-color:green;
}
.menu a.close_menu {
background-color:#000;
color:#fff;
}
#submenus {
position: absolute;
margin-top:29px;
background-color:transparent;
overflow:hidden;
height:140px;
}
.submenu li {
list-style: none;
width:130px;
}
.submenu a {
display:block;
padding:5px 5px 0 5px;
height:22px;
background-color:#ffffcc;
border-top:none;
border-left:solid 1px #000;
border-right:solid 1px #000;
border-bottom:solid 1px #000;
text-decoration:none;
color:#000;
}
.submenu a:hover {
background-color:red;
}
#nolink {
height:140px;
}
#link2_submenu {
margin-left:84px;
}
#link3_submenu {
margin-left:169px;
}
#link4_submenu {
margin-left:254px;
}
#link5_submenu {
margin-left:339px;
}
</style>
</head>
<body>
<div id="content_wrapper">
<div>
<h1>Click Drop Down Menu For IE6</h1>
<h2>No Javascript - No conditional comments -<br>
Valid CSS HTML - No Images</h2>
<p>Click the menu to reveal the drop down and then you can select a link from the drop down. To close the menu click the close button at the end of the menu.</p>
<ul class="menu">
<li><a href="#link1_submenu" class="first_horizontal">link 1 <span class="blue">▼</span></a></li>
<li><a href="#link2_submenu">link 2 <span class="blue">▼</span></a></li>
<li><a href="#link3_submenu">link 3 <span class="blue">▼</span></a></li>
<li><a href="#link4_submenu">link 4 <span class="blue">▼</span></a></li>
<li><a href="#link5_submenu">link 5 <span class="blue">▼</span></a></li>
<li><a href="#nolink" class="close_menu">close menus</a></li>
</ul>
<div id="submenus">
<ul id="nolink" class="submenu">
<li></li>
</ul>
<ul id="link1_submenu" class="submenu">
<li><a href="#">menu 1 sublink 1</a></li>
<li><a href="#">sublink 2</a></li>
<li><a href="#">sublink 3</a></li>
<li><a href="#">sublink 4</a></li>
<li><a href="#">sublink 5</a></li>
</ul>
<ul id="link2_submenu" class="submenu">
<li><a href="#">menu 2 sublink 1</a></li>
<li><a href="#">sublink 2</a></li>
<li><a href="#">sublink 3</a></li>
<li><a href="#">sublink 4</a></li>
<li><a href="#">sublink 5</a></li>
</ul>
<ul id="link3_submenu" class="submenu">
<li><a href="#">menu 3 sublink 1</a></li>
<li><a href="#">sublink 2</a></li>
<li><a href="#">sublink 3</a></li>
<li><a href="#">sublink 4</a></li>
<li><a href="#">sublink 5</a></li>
</ul>
<ul id="link4_submenu" class="submenu">
<li><a href="#">menu 4 sublink 1</a></li>
<li><a href="#">sublink 2</a></li>
<li><a href="#">sublink 3</a></li>
<li><a href="#">sublink 4</a></li>
<li><a href="#">sublink 5</a></li>
</ul>
<ul id="link5_submenu" class="submenu">
<li><a href="#">menu 5 sublink 1</a></li>
<li><a href="#">sublink 2</a></li>
<li><a href="#">sublink 3</a></li>
<li><a href="#">sublink 4</a></li>
<li><a href="#">sublink 5</a></li>
</ul>
</div>
<div class="clear_menu"></div>
<p>This dropdown menu uses no javascript and uses valid css and html without the need for conditional comments and without the need for any hacks at all. The drop downs are removed from the flow and will overlap following content such as this.</p>
<p>This is an experimental layout specially provided for my CSS quizes at Sitepoint and is not meant to be anything more than an example of what css can do. The code is not very semantic in this example but the techniques used could be used semantically for similar layouts.</p>
<p>The links can be tabbed via the keyboard but the effect is rather strange.</p>
<h3>Works in IE5 - 8, Firefox 3, Safari 3 - Doesn't work in Opera</h3>
</div>
</div>
</body>
</html>
Ryan
Code:
<!doctype html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
* {margin:0;padding:0}
a
{
position:absolute;
left:0;
width:100px;
text-align:center;
text-decoration:none;
color:#FFF;
background:pink;
height:30px;
z-index:9999;
border:1px solid #000;
line-height:30px;
}
a.two
{
left:101px;
}
a.three
{
left:202px;
}
a.four
{
left:303px;
}
a.five
{
left:404px;
}
a.close
{
background:#000;
color:#FFF;
left:505px;
}
div
{
background:blue;
color:#FFF;
position:relative;
width:102px;
height:30px;
top:0;
left:0;
text-align:center;
}
#link1
{
left:0;
}
#link2
{
left:101px;
}
#link3
{
left:201px;
}
#link4
{
top:1px;
left:303px;
}
#link5
{
left:404px;
top:2px;
}
#close
{
left:505px;
visibility:hidden;
}
#ap
{
overflow:hidden;
position:absolute;
top:30px;
width:600px;
height:30px;
background:white;
left:0;
}
*+html #ap
{
width:100%;
left:-450px;
}
* html #ap
{
width:100%;
left:-450px;
}
</style>
</head>
<body>
<a href="#link1">Link 1</a>
<a class="two" href="#link2">Link 2</a>
<a class="three" href="#link3">Link 3</a>
<a class="four" href="#link4">Link 4</a>
<a class="five" href="#link5">Link 5</a>
<a class="close" href="#close">Close</a>
<div id="ap">
<div id="link1">Submenu1</div>
<div id="link2">Submenu2</div>
<div id="link3">Submenu3</div>
<div id="link4">Submenu4</div>
<div id="link5">Submenu5</div>
<div id="close"></div>
</div>
</body>
</html>
Thanks to all that took part and look out for the next quiz in about a weeks time.
Originally Posted by RyanReese
.
Bookmarks