Floating Nav

What you will be learning.

Today you will be learning to add a floating nav to your site. Now you may be thinking I thought a nav bar was at the top of your site. Now on some cases you are right, but you can have your main nav as a floating nav or a secondary nav that floats. It's useful to break up the main nav or just to make it easier to navigate the site in whole.

Some key terms before you continue.

.scroll() binds an event of scroll to an element.

.scrollTop() adds the current position of the verticle scroll bar to the first elemen that it is matched with.

Example

Due to the size of the example HERE is the example!

Code Required

HTML Markup

 <nav id="main">
 <ul>
 <li> <a href="#"> Home  </a> </li>
 <li> <a href="#"> About  </a> </li>
 <li> <a href="#"> Work  </a> </li>
 <li> <a href="#"> Contact  </a> </li>
 </ul>
 </nav>

CSS Markup

body{
	padding:100px;	
	  background-color: #6F94C5;
}
#main{
	position:relative;
	float:left;
  width: 195px;
  font-family: "Courier New";
	height:300;
  background-color: #5FCEFF;
  font-size: 24px;
}
#main ul, li {
  list-style: none;
  margin: 0;
  padding: 5px;
}
#main li {
  background: #5FCEFF;
  color: #FFF;
}
#main ul, li {
  list-style: none;
  margin: 0;
  padding: 5px;
}
#main a {
  color: #FFF;
  line-height: 160%;
  padding: 16px 8px 16px 28px;
  width: 164px;
}
#main a:hover {
  color: black;
}
#main span, #main a {
  display: inline-block;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  font-size: 18px;
  text-decoration: none;
}
div{
	  width: 950px;
  margin: 0 auto;
  color: white;
  line-height:2;
  font-size:25px;
}
h1{
 font-size:35px;	
	
h2{
 font-size:35px;	
}

Javascript Markup 

$(document).ready(function(){ // document is ready
$(window).scroll(function(){ // add scroll function
	$('#main').css('top',$(document).scrollTop()); // add css to id of main
}); // end scroll function
}); // end document

Back