I would like this fixed menu to scroll if the height of the browser window is less than the height of the vertical menu plus footer. Ideally the correct position (fixed or absolute) can be changed if the browser window height is resized, too.
An attempt with jQuery is in the HTML, but it does not work. I do not know how to define/target the elements that need to be compared.
Any help would be appreciated.
<!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=ISO-8859-1">
<meta http-equiv="content-language" content="en-us">
<meta http-equiv="content-style-type" content="text/css">
<title>Menu eXperiments</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<style type="text/css">
html,
body {
height:100%;
padding:0px;
margin:0px;
}
body {
color:#000;
font-size:100%;
font-family:Verdana,sans-serif;
background-color:#bdf; /* set the background-color of the browser window here #bdf */
overflow-y:scroll;
padding:0;
margin:0;
}
/* Opera Fix */
body:before { /* thanks to Maleika (Kohoutec) */
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px; /* thank you Erik J - negate effect of float */
}
#outer {
width:988px;
min-height:100%;
position:relative;
margin:-50px auto 0; /* footer height - this drags the outer 40px up through the top of the monitor */
}
.canvas {
background-color:#532; /* overall background-color */
border-radius:20px;
padding:15px 15px 15px 156px;
}
#footer {
height:50px;
clear:both;
}
#footer p {
font-size:0.75em;
font-family:'Trebuchet MS',sans-serif;
text-align:center;
padding-top:16px;
margin:0;
}
h1 {
height:10px;
border-top:50px solid #fff; /* soak up negative margin and allows header to start at top of page */
font-size:.6em;
text-align:center;
visibility:hidden;
margin:0;
}
.content {
background-color:#e9e8e4;
background-image:url('../imgs/newsprint1.jpg');
background-repeat:repeat;
background-attachment:scroll;
border-radius:12px;
width:769px; /* 817px wide */
min-height:600px;
padding:12px 24px 18px;
}
.frame {
position:relative; /* just in case you want to p:a something over the image */
}
#p .frame {
position:static; /* permits the menu tab to overlay the border around the poster image */
}
.frame img {
display:block;
border-radius:12px;
}
/* Navigation ( screen: height >= 590px; width >= 988px ) */
.nav {
list-style-type:none;
position:fixed; /* absolute (relative to #outer) */
left:50%;
top:22px; /* auto */
bottom:auto; /* 15px */
padding:0;
margin:0 0 0 -484px;
}
.nav li {
display:block;
width:138px;
text-align:center;
font-weight:bold;
font-size:18px;
font-family:Verdana,sans-serif;
padding:0;
margin:0;
}
.nav li + li {
margin-top:8px;
}
.nav li.urhere,
.nav li.dummy {
padding:8px 0;
width:134px;
}
.nav li.urhere {
border-top:2px solid #ffd700;
border-bottom:2px solid #ffd700;
border-left:2px solid #ffd700;
border-radius:10px 0 0 10px;
background-color:#fff;
color:#000;
padding-right:10px;
}
.nav li.dummy {
border:2px solid #865;
border-radius:9px;
background-color:#421;
color:#865;
}
.nav li.p {
margin-top:12px;
}
.nav li.a.urhere,
.nav li.c.urhere,
.nav li.f.urhere,
.nav li.l.urhere,
.nav li.r.urhere,
.nav li.s.urhere {
background-color:#e9e8e4;
background-image:url('../imgs/newsprint1.jpg');
background-repeat:repeat;
background-attachment:scroll;
}
.nav li.p.urhere {
background-color:#88c4e6;
position:relative;
}
.nav li.p.urhere:after {
content:"";
width:4px;
position:absolute;
top:0;
right:-4px;
bottom:0;
background-color:#88c4e6;
}
.nav li.i a {
display:table;
border:0;
border-radius:50%;
padding:2px;
margin:0 auto;
}
.nav li.i a:active {
background-color:#f00;
}
.nav a {
display:block;
border:2px solid #865;
border-radius:10px;
background-color:#421;
color:#f0f0f0;
text-decoration:none;
padding:8px 0;
}
.nav a:link,a:visited {}
.nav a:hover {
color:#00f;
border:2px solid #00f;
background-color:#ccc;
}
.nav a:active {
color:#f00;
border:2px solid #f00;
background-color:#eee;
}
.nav a img {
display:block;
border:none;
}
/* IMAGES */
.rogposter {
border:4px solid #ddb600; /* #ddb600 */
}
/* */
</style>
</head>
<body id="p">
<script type="text/javascript">
$(window).scroll(function() {
if ($(window).scrollTop() >= 900) { // offset?
$('.nav').css({'position':'fixed','top':'22px','bottom':'auto'});
} else {
$('.nav').css({'position':'absolute','top':'auto','bottom':'15px'});
}
});
</script>
<div id="outer">
<h1>Header Text Here</h1>
<ul class="nav">
<li class="i"><a href="#"><img src="imgs/RE_Logo128e-.png" alt="" width="128" height="128"></a></li>
<li class="p urhere">IMAA Rally of Giants 2013 Poster</li>
<li class="r"><a href="#">Registration</a></li>
<li class="l"><a href="#">Location</a></li>
<li class="f"><a href="#">Float Fly</a></li>
<li class="s"><a href="#">Local Sights</a></li>
<li class="a"><a href="#">Sponsors & Vendors</a></li>
<li class="c"><a href="#">Contact Us</a></li>
</ul>
<div class="canvas">
<div class="frame">
<img class="rogposter" src="imgs/RoGPoster2-.jpg" alt="" width="809" height="700">
</div>
</div>
</div>
<div id="footer">
<p id="datebot">Updated: Sunday, December 02, 2012</p>
</div>
</body>
</html>
. The menu is now at it’s maximum designed capacity. If I add one more button, the menu will extend past the bottom of the content area of the page when the page is scrolled to the bottom of the viewport (the button will be visible, but it will be sticking into the footer area). Rather than scrap the fixed menu, I am hoping to make it adapt to a longer menu (one more button, maybe) by scrolling with the bottom of the page.
).