<script type="text/javascript">
function countdown (num) {
alert('testing ...');
for (var i = 0; i <= num; i += 1) {
// setTimeout(function(){doAlerts(num,i)} , i * 1000);
setTimeout('doAlerts('+num+','+i+');' , i * 1000);
}
}
//
function doAlerts(num,i)
{
alert(num - i);
}
//countdown(5);
var g_display = 'block';
function toggleSubMenu(sender)
{
var display = sender.getElementsByTagName('ul')[0].style.display;
//alert(display);
if(display != null && display != '')
{
g_display = display ;
sender.getElementsByTagName('ul')[0].style.display = '';
}
else
{
sender.getElementsByTagName('ul')[0].style.display = g_display;
}
}
</script>
<style type="text/css">
.menu
{
}
.menu > li
{
float:left;
margin-right:1px;
padding: 0px 5px 0px 5px;
list-style-type:none;
border: solid 1px #c4c4c4;
background-color:#c1c1c1;
width:120px;
}
.menu > li:hover
{
/* background-color : blue; */
}
ul
{
padding: 0px 5px 0px 5px;
list-style-type:none;
border: solid 1px #c4c4c4;
}
ul li ul
{
display:none;
padding: 0px 0px 0px 0px;
list-style-type:none;
border: solid 1px #c4c4c4;
}
ul li ul li
{
display:block;
}
ul li ul li:hover
{
background-color:#549ade;
}
</style>
<input onclick="countdown(5);" type="button" value="Do It" />
<ul class="menu">
<li onmouseout="toggleSubMenu(this);" onmouseover="toggleSubMenu(this);">
Thing 1
<ul>
<li>Subthing A</li>
<li>Subthing B</li>
<li>Subthing C</li>
</ul>
</li>
<li onmouseout="toggleSubMenu(this);" onmouseover="toggleSubMenu(this);">
Thing 2
<ul>
<li>Subthing D</li>
<li>Subthing E</li>
<li>Subthing F</li>
</ul>
</li>
<li onmouseout="toggleSubMenu(this);" onmouseover="toggleSubMenu(this);">
Thing 3
<ul>
<li>Subthing G</li>
<li>Subthing H</li>
<li>Subthing I</li>
</ul>
</li>
</ul>
Showing posts with label css. Show all posts
Showing posts with label css. Show all posts
Saturday, July 3, 2010
css dropdown menu
just a very simple css styling with a bit of javascript code to create a drop down list with one just one level of nesting for now. will put here for reference
Monday, April 12, 2010
Tableless
I just wanted to post this html code here for my future reference. This document was originally auto-generated to show some images. The tool generated table tags and used rowspan and colspan in ways that caused most browsers to show gaps between certain images.
I converted the code to use ol tag and with some css styling (using float and display properties) the images lined up perfectly on standards compliant browsers (chrome, firefox) .
For IE7 and below I used conditional commenting to raise up some of the images.
Note that when using a layout like the one shown below and when the browser's window is resized, the images will move to fit new window's size. To prevent images relocation, I set the display property of the ol tag to table so it will behave like a table. However IE6 and I think IE7 does not respect this property so I added an actual table around the ol tag.
I converted the code to use ol tag and with some css styling (using float and display properties) the images lined up perfectly on standards compliant browsers (chrome, firefox) .
For IE7 and below I used conditional commenting to raise up some of the images.
Note that when using a layout like the one shown below and when the browser's window is resized, the images will move to fit new window's size. To prevent images relocation, I set the display property of the ol tag to table so it will behave like a table. However IE6 and I think IE7 does not respect this property so I added an actual table around the ol tag.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body
{
margin:0px;
padding:0px;
}
table
{
margin:0px;
padding:0px;
}
img
{
display:block;
margin:0px;
padding:0px;
background-color:#75b044;
}
ol
{
list-style-position: outside;
list-style-type:none;
margin:0px;
padding:0px;
display:table;
}
li
{
margin:0px;
padding:0px;
}
.li1
{
float:left;
margin-top:0px;
}
.li2
{
float:left;
margin-top:-1px;
}
.moveleft
{
margin-left:-1px;
}
</style>
</head>
<body>
<!--[if lte IE 7]>
<style>
.li1
{
margin-top:-4px;
}
.li2
{
margin-top:-20px !important;
}
</style>
<![endif]-->
<table cellpadding="0" cellspacing="0"><tr><td> <!-- added table to prevent images from re-locating-->
<!-- when window is re-sized in IE6 because it does not -->
<!-- respect display:table css property -->
<ol>
<li>
<img id="banner" alt="" src="" />
</li>
<li class="li1">
<img id="leftRowSpan1" alt="" src="" />
</li >
<li class="li1">
<img id="leftRowSpan2" alt="" src="" />
</li>
<li class="li1">
<img id="rightRowSpan1" alt="" src="" />
<img id="rightRowSpan2" alt="" src="" />
</li>
<li style="clear:both;" > </li>
<!-- third row -->
<li class="li2 ieli2">
<img id="leftRowSpan3" alt="" src="" />
</li>
<li class="li2 ieli2">
<img id="leftRowSpan4" alt="" src="" />
</li>
<!-- third row right images -->
<li class="li2 ieli2 moveleft">
<img id="rightRowSpan3" alt="" src="" />
<img id="rightRowSpan4" alt="" src="" />
</li>
<li style="clear:both;"></li>
<li class="li2 ieli2">
<img id="leftColSpan1" alt="" src="" />
</li>
<li class="li2 moveleft">
<img id="rightColSpan2" alt="" src="" />
</li>
<li style="clear:both;"></li>
<li class="li2 ieli2">
<img alt="" src=""/>
</li>
<li class="li2 ieli2 moveleft">
<img alt="" src="" />
</li>
<li style="clear:both;">
<img id="footer" alt="" src=""/>
</li>
</ol>
</td></tr></table>
</body>
</html>
Subscribe to:
Posts (Atom)