CSS Dropdowns display list over other elements
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 using float:left or float:right. These commands remove your menu from the rest of the flow, allowing it to go above or below other elements.
Be careful with float though, because if you float other elements they can start running into each other. You should go with position:absolute in that case. If you need to move the position of the menu, use left: 100px; top:200px etc.
加载中,请稍侯......
精彩评论