I normally do not blogs on scripting. Yes, I am well aware that I am not the most prolific blogger on the planet to begin with. Whatever the view on that, here's a scripting tip / blog on website design.
Site / Page Designs That The Designer Really Loves
My common gripe with web page designers is that they love their designs too much; at the cost of functionality. I am of the view that most site visitors are more interested in the content than in the shades of colors applied to frame edges. I guess I'll have to agree to disagree. (It's still a stupid design.)
To be more specific, the designs that I am talking about are those where the top navigation bar fills almost the entire page with the content hidden at the bottom somewhere with the assumption that the user should utilize the scroll wheel on the mouse otherwise it might rust.
Me, I'd rather see some content. So, here's a simple technique. This allows for huge (ugly) header area on the page as well as allowing you to keep a small tidy navigation bar that is always visible even after you scroll down.
For an example, look at the navigation bar on Google+. As you scroll the page, the bar shrinks to a modest size.
The HTML Page
Here's the code to the HTML. You know that this uses JQuery. If you are not familiar with JQuery, oh, well...
<head>
<title>Expanding Menu</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="scripts.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="menubar">
<img id="logo" src="Logo.gif" />
<div id="menuitems">
<a href="#" class="menuitem">Menu 1</a>
<a href="#" class="menuitem">Menu 2</a>
<a href="#" class="menuitem">Menu 3</a>
<a href="#" class="menuitem">Menu 4</a>
</div> <!-- End of menu items div -->
</div> <!-- End of menu bar div -->
<div id="content">
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce egestas et augue sit amet pretium. Aliquam non turpis quis velit venenatis dignissim. Vivamus a ipsum tempor, dignissim nisi sit amet, feugiat felis. In a tortor quam. Pellentesque imperdiet augue at rutrum feugiat. Integer a diam id sem euismod pulvinar vel a mi. Ut lacinia tincidunt tortor, a facilisis purus hendrerit sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla accumsan lacus sed leo laoreet facilisis vitae et neque.</p>
<p>Donec auctor cursus purus, a commodo urna aliquet eget. Morbi malesuada hendrerit dui, condimentum tempor ante tempor eget. Nam nisi nisi, tristique faucibus mollis sed, ultricies sed tellus. Suspendisse lacinia felis vitae justo tincidunt, sed placerat nulla viverra. Aliquam commodo odio a lectus tristique malesuada. Quisque cursus dignissim lorem euismod accumsan. Suspendisse at nunc at risus molestie volutpat nec posuere massa. Curabitur sed ullamcorper odio. Quisque id euismod nunc. Nulla facilisi. Sed faucibus mauris vitae eros fringilla congue. Donec porta felis vitae vulputate fermentum. Mauris fermentum est quis est consequat, id egestas mi auctor. Cras non diam purus. Duis fringilla quam enim, sed auctor mauris lobortis ac.</p>
<p>Vestibulum blandit nibh a massa venenatis, nec condimentum arcu porttitor. Pellentesque dictum pretium sem in auctor. Mauris eget arcu eu lorem hendrerit fermentum. Sed ipsum turpis, mollis vitae dignissim sollicitudin, vulputate in metus. Praesent euismod felis eget fermentum blandit. Aenean fermentum viverra fermentum. Mauris sed libero nulla.</p>
<p>Vestibulum eget nulla nibh. Integer vitae libero id mauris porta faucibus. Mauris vitae arcu urna. Suspendisse suscipit cursus lorem, a facilisis sem fermentum eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc et accumsan erat. In hac habitasse platea dictumst. In vitae felis dictum, placerat dolor eget, accumsan magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque in vehicula dolor. Fusce nunc ligula, lacinia at odio eu, porttitor tincidunt risus. Donec porttitor odio et leo feugiat placerat. Vivamus molestie quis dolor bibendum sodales. Sed luctus ullamcorper ante, quis porta turpis.</p>
<p>Nullam pretium, dui vitae facilisis viverra, dolor libero rutrum justo, a pellentesque purus sapien ac quam. Sed dapibus, neque vel adipiscing pellentesque, justo erat ultricies orci, blandit posuere metus turpis ac nulla. Praesent at ligula risus. Phasellus vitae porta lacus. Fusce vestibulum suscipit tincidunt. In sit amet nisl condimentum, euismod velit vitae, mollis nulla. Phasellus lectus elit, hendrerit nec arcu quis, consequat consectetur odio. Mauris in urna mauris. Sed lacinia tincidunt dignissim. Cras et rhoncus nulla. Etiam id malesuada eros. Donec eu velit ultricies, auctor felis vitae, vestibulum libero. Mauris tellus lorem, congue in quam ut, tempus tempor urna. Pellentesque varius cursus erat, nec malesuada elit gravida ac. Aliquam ut tellus id lorem suscipit laoreet.</p>
<h1>Heading 2</h1>
<p>Vestibulum blandit nibh a massa venenatis, nec condimentum arcu porttitor. Pellentesque dictum pretium sem in auctor. Mauris eget arcu eu lorem hendrerit fermentum. Sed ipsum turpis, mollis vitae dignissim sollicitudin, vulputate in metus. Praesent euismod felis eget fermentum blandit. Aenean fermentum viverra fermentum. Mauris sed libero nulla.</p>
<p>Vestibulum eget nulla nibh. Integer vitae libero id mauris porta faucibus. Mauris vitae arcu urna. Suspendisse suscipit cursus lorem, a facilisis sem fermentum eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc et accumsan erat. In hac habitasse platea dictumst. In vitae felis dictum, placerat dolor eget, accumsan magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque in vehicula dolor. Fusce nunc ligula, lacinia at odio eu, porttitor tincidunt risus. Donec porttitor odio et leo feugiat placerat. Vivamus molestie quis dolor bibendum sodales. Sed luctus ullamcorper ante, quis porta turpis.</p>
<p>Nullam pretium, dui vitae facilisis viverra, dolor libero rutrum justo, a pellentesque purus sapien ac quam. Sed dapibus, neque vel adipiscing pellentesque, justo erat ultricies orci, blandit posuere metus turpis ac nulla. Praesent at ligula risus. Phasellus vitae porta lacus. Fusce vestibulum suscipit tincidunt. In sit amet nisl condimentum, euismod velit vitae, mollis nulla. Phasellus lectus elit, hendrerit nec arcu quis, consequat consectetur odio. Mauris in urna mauris. Sed lacinia tincidunt dignissim. Cras et rhoncus nulla. Etiam id malesuada eros. Donec eu velit ultricies, auctor felis vitae, vestibulum libero. Mauris tellus lorem, congue in quam ut, tempus tempor urna. Pellentesque varius cursus erat, nec malesuada elit gravida ac. Aliquam ut tellus id lorem suscipit laoreet.</p>
<h1>Heading 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce egestas et augue sit amet pretium. Aliquam non turpis quis velit venenatis dignissim. Vivamus a ipsum tempor, dignissim nisi sit amet, feugiat felis. In a tortor quam. Pellentesque imperdiet augue at rutrum feugiat. Integer a diam id sem euismod pulvinar vel a mi. Ut lacinia tincidunt tortor, a facilisis purus hendrerit sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla accumsan lacus sed leo laoreet facilisis vitae et neque.</p>
<p>Donec auctor cursus purus, a commodo urna aliquet eget. Morbi malesuada hendrerit dui, condimentum tempor ante tempor eget. Nam nisi nisi, tristique faucibus mollis sed, ultricies sed tellus. Suspendisse lacinia felis vitae justo tincidunt, sed placerat nulla viverra. Aliquam commodo odio a lectus tristique malesuada. Quisque cursus dignissim lorem euismod accumsan. Suspendisse at nunc at risus molestie volutpat nec posuere massa. Curabitur sed ullamcorper odio. Quisque id euismod nunc. Nulla facilisi. Sed faucibus mauris vitae eros fringilla congue. Donec porta felis vitae vulputate fermentum. Mauris fermentum est quis est consequat, id egestas mi auctor. Cras non diam purus. Duis fringilla quam enim, sed auctor mauris lobortis ac.</p>
<p>Vestibulum blandit nibh a massa venenatis, nec condimentum arcu porttitor. Pellentesque dictum pretium sem in auctor. Mauris eget arcu eu lorem hendrerit fermentum. Sed ipsum turpis, mollis vitae dignissim sollicitudin, vulputate in metus. Praesent euismod felis eget fermentum blandit. Aenean fermentum viverra fermentum. Mauris sed libero nulla.</p>
</div> <!-- End of content div -->
</body>
</html>
The Content div is just fleshed out a bit to allow scrolling to work.
Of interest here is only the div named "menubar". This contains two further div's so that we can see separate but related effects.
The first div contains the page logo while the second contains navigation links. Further div's may be added here with separate behaviors, such as hiding when the page is scrolled.
Note the use of id's and classes. This is simply to differentiate single versus multiple items that would be effected.
The CSS
The CSS for the menu follows:
@CHARSET "ISO-8859-1";
#menubar{
width: 100%;
background-color: black;
padding-bottom: 20px;
position: fixed;
opacity: 0.99;
top: 0;
left: 0;
z-index: 1;
}
#menubar.compact{
height: 50px;
}
#menuitems{
margin-left: 500px;
margin-top: 60px;
/* transition-duration: 300;*/
}
#menuitems.compact{
margin-left: 200px;
margin-top: 20px;
}
.menuitem{
font-size: 1.5em;
color: white;
font-weight: bold;
margin-right: 30px;
}
.menuitem.compact{
font-size: 1.2em;
margin-right: 20px;
}
a.menuitem{
text-decoration: none;
}
a.menuitem:link a.menuitem:visited a.menuitem:active{
color: white;
}
a.menuitem:hover{
color: yellow;
}
#logo{
position: absolute;
width: 250px;
height: 64px;
left: 100px;
margin-top:30px;
/* transition-duration: 300;*/
}
#logo.compact{
width: 125px;
height: 32px;
left: 60px;
margin-top: 10px;
}
#content{
margin-top: 120px;
}
The areas to note are:
The menubar has been given a "fixed" position to keep it on the page.
Note the absence of spaces where the "compact" class is use. This method is employed to indicate that an item has multiple classes.
In the compact items, the sizes have been reduced; the font is smaller, the margin has been reduced and the image has been resized to half its dimensions.
The JavaScript
Finally, we come to the JQuery functions that do the changes.
$(window).scroll(function(){
if ($(window).scrollTop() > 200){
//User has scrolled down. Shrink the menu, if needed
if (!$("#menubar").hasClass("compact")){
$("#menubar,#menuitems,.menuitem,#logo").addClass("compact",400,"easeInSine");
}
}else {
//User has scrolled up. Expand the menu, if needed
if ($("#menubar").hasClass("compact")){
$("#menubar,#menuitems,.menuitem,#logo").removeClass("compact",400,"easeOutSine");
}
}
});
The script uses the window's scroll event to see if it has been scrolled. The nested if is to stop it from continuously reapplying the styles.
Upon scrolling, all the bar-related items are selected to which the "compact" class is applied or removed, as needed.
And that is all it takes.
