Hello I am trying to make a mostly CSS dropdown with some jQuery handling the showing and form submission. One thing I am struggling with is making it so the dropdown list does not push the other elements down. Any other suggestions are welcome here is my code ( I know shouldnt be using tables at all but have to fit this in a legacy UI so bear with me )
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.js"> </script>
<style>
*{padding:0;margin:0;}
span.icon{
display:inline;
height:15px;
width:15px;
}
span.icon.left{
float:left;
padding-left:5px;
}
span.icon.right{
float:right;
padding-right:5px;
}
div.dropDown{
height:20px;
width:200px;
margin:10px;
padding:2px 0;
cursor:pointer;
border:1px solid #ccc;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
background-color:#f5f5f5;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(230,230,230)),
color-stop(0.84, rgb(255,255,255))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(230,230,230) 0%,
rgb(255,255,255) 84%
);
}
div.dropDown:hover{
border:1px solid #777;
background-color:#eee;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(255,255,255)),
color-stop(0.84, rgb(230,230,230))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(255,255,255) 0%,
rgb(230,230,230) 84%
);
box-shadow:0px 0px 3px #ccc;
-moz-box-shadow:0px 0px 3px #ccc;
-webkit-box-shadow:0px 0px 3px #ccc;
}
div.dropDown span{padding-top:1px;}
span.dropHeader{
padding-left:10px;
color:#333;
text-shadow:1px 1px 0px #fff;
}
ul.optionList{
width:200px;
display:none;
border:1px solid #ccc;
border-radius:0px 0px 3px 3px;
-webkit-border-radius:0px 0px 3px 3px;
-moz-border-radius:0px 0px 3px 3px;
padding:5px 0;
box-shadow:1px 1px 5px #ccc;
-moz-box-shadow:1px 1px 5px #ccc;
-webkit-box-shadow:1px 1px 5px #ccc;
}
li.option{
list-style-type:none;
padding:3px 2px;
border:1px solid transparent;
border-bottom:1px solid #eee;
}
li.option:last-child {
border-bottom:0;
}
span.optTitle{
padding-left:10px;
color:#333;
}
li.option:hover{
background-color:#FB880C;
cursor:pointer;
border:1px solid #cf7310;
box-shadow:inset 0px 0px 6px #9e5303;
-moz-box-shadow:inset 0px 0px 6px #cf7310;
-webkit-box-shadow:inset 0px 0px 6px #cf7310;
}
li.option:hover span.optTitle{
color:#fff;
text-shadow:1px 1px 0px #9e5303;
}
input{clear:both}
img.dropArrow{width:10px;height:10px;}
.iconName1 {width:15px;height:15px;background:#333;border:1px solid #000;}
.iconName2 {width:15px;height:15px;background:#ccc;border:1px solid #333;}
</style>
</head>
<body> <br/><br/><br/><br/>
<form name="search" action="/">
<table><tr>
<td>
<div id="selectName" class="dropDown">
<span class="icon left"><img src="px.gif" id="sprite" class="iconName1" /></span>
<span class="dropHeader">Option1</span>
<span class="icon right"><img src="down-arrow.png" class="dropArrow" /></span>
</div>
<ul id="selectName" class="optionList">
<li id="value0" class="option">
<span class="icon left"><img src="px.gif" class="iconName1" /></span>
<span class="optTitle">Option1</span>
</li>
<li id="value1" class="option">
<span class="icon left"><img src="px.gif" class="iconName2" /></span>
<span class="optTitle">Option2</span>
</li>
<li id="value0" class="option">
<span class="icon left"><img src="px.gif" class="iconName1" /></span>
<span class="optTitle">Option3</span>
</li>
<li id="value1" class="option">
<span class="icon left"><img src="px.gif" class="iconName2" /></span>
<span class="optTitle">Option4</span>
</li>
</ul>
<input type="hidden" id="selectName2" name="selectName" value="" />
<!--[if IE 6]>
<select name="selectName">
<option value="value">Option1</option>
<option value="value">Option2</option>
<option value="value">Option3</option>
<option value="value">Option4</option>
</select>
<![endif]-->
<div id="selectName2" class="dropDown">
<span class="icon left"><img src="px.gif" id="sprite" class="iconName1" /></span>
<span class="dropHeader">Option1</span>
<span class="icon right"><img src="down-arrow.png" class="dropArrow" /></span>
</div>
<ul id="selectName2" class="optionList">
<li id="value0" class="option">
<span class="icon left"><img src="px.gif" class="iconName1" /></span>
<span class="optTitle">Option1</span>
</li>
<li id="value1" class="option">
<span class="icon left"><img src="px.gif" class="iconName2" /></span>
<span class="optTitle">Option2</span>
</li>
<li id="value0" class="option">
<span class="icon left"><img src="px.gif" class="iconName1" /></span>
<span class="optTitle">Option3</span>
</li>
<li id="value1" class="option">
<span class="icon left"><img src="px.gif" class="iconName2" /></span>
<span class="optTitle">Option4</span>
</li>
</ul>
<input type="hidden" id="selectName2" name="selectName" value="" />
<!--[if IE 6]>
<select name="selectName2">
<option value="value">Option1</option>
<option value="value">Option2</option>
<option value="value">Option3</option>
<option value="value">Option4</option>
</select>
<![endif]-->
</td></tr></table>
</form>
<script>
$(function(){
if($.browser.msie && $.browser.version == '6.0'){
$('div.dropDown').hide();
}
$('div.dropDown').hover(function(){
var ultoshow = $(this).attr('id');
$('ul#'+ultoshow).toggle();
});
$('li.option').click(function(){
var selectName = $(this).parent('ul.optionList').siblings('div.dropDown').attr('id');
var value = $(this).attr('id');
var optTitle = $(this).children('span.optTitle').html();
var iconClass = optTitle.toLowerCase();
$(this).parent('ul.optionList').siblings('div.dropDown').children('span.icon').children('img#sprite').attr('class',iconClass);
$(this).parent('ul.optionList').siblings('div.dropDown').children('span.dropHeader').html(optTitle);
$('input#'+selectName).attr('value',value);
document.search.submit();
});
});
</script>
</body>
</html>
If you take your menu out of the normal flow of the document, it won’t push any other elements out of it’s way.
You can do this by adding
position:absolute;or by usingfloat:leftorfloat:right. These commands remove your menu from the rest of the flow, allowing it to go above or below other elements.Be careful with
floatthough, because if you float other elements they can start running into each other. You should go withposition:absolutein that case. If you need to move the position of the menu, useleft: 100px; top:200pxetc.