movieprodw
asked on
CSS Menu footer popup
Hello,
I have the below code as an example.
I need the nav bar to sit on the bottom and have the options display up not down.
Please let me know if this is possible.
Thanks,
Matt
I have the below code as an example.
I need the nav bar to sit on the bottom and have the options display up not down.
Please let me know if this is possible.
Thanks,
Matt
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style>
body{
margin:0;
padding:0;
}
/* These styles just pretty up the page a bit. */
#navbar {
position:absolute;
bottom:0;
width:100%;
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 3px 8px;
background-color: #5e8ce9;
color: #fff;
text-decoration: none; }
#navbar li ul {
display: none;
width: 10em; /* Width to help Opera out */
background-color: #69f;}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #69f;
border-bottom: 1px solid #fff;
color: #000; }
#navbar li li a:hover {
background-color: #8db3ff; }
</style>
</head>
<body>
<ul id="navbar">
<!-- The strange spacing herein prevents an IE6 whitespace bug. -->
<li><a href="#">Item One</a><ul>
<li><a href="#">Subitem One</a></li><li>
<a href="#">Second Subitem</a></li><li>
<a href="#">Numero Tres</a></li></ul>
</li>
<li><a href="#">Second Item</a>
<ul>
<li><a href="#">Just one subitem</a></li></ul>
</li>
<li><a href="#">No Subitem</a></li>
<li><a href="#">Number Four</a>
<ul>
<li><a href="#">Subitem One</a></li><li>
<a href="#">Second Subitem</a></li><li>
<a href="#">Numero Tres</a></li><li>
<a href="#">Fourth Thinger</a></li></ul>
</li>
</ul>
</body>
</html>ASKER
That did make them show above the line but I would like them to look exactly like they do, but step up instead of having them be a fixed size
close with jQuery
needs a bit more tweeking...
needs a bit more tweeking...
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript" ></script>
<script>
$(document).ready(function() {
$("#navbar li ul").each(function(){
var n = $("li",$(this)).length;//alert(n);
var m = $(this).height() + (n*3);
$(this).css("top",-m );
});
});
</script>
adding 4 makes it better
<script>
$(document).ready(function() {
$("#navbar li ul").each(function(){
var n = $("li",$(this)).length;alert(n);
var m = $(this).height() + (n*3) + 4;
$(this).css("top",-m );
});
});
</script>
this one runs perfect in IE
<script>
$(document).ready(function() {
$("#navbar li ul").each(function(){
var n = $("li",$(this)).length; //alert(n);
var m = $(this).height() + (n*1) + 0;
$(this).css("top",-m );
});
});
</script>ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
great job
#navbar li ul {
position: absolute;
top: -100px; // this should be fixed but dont know how :)
}