Taslim Blogger: create a styled float menu with css and jquery

Previous post show how to create floating content and fixed floating content using for bookmarking tool and feedback button. But this post show how to create a main menu fixed on top when the pages is scrolling. Simple jquery tricks do it easily. For this you need to learn clearly css,html and jquery. But not very hard to try.

Hide Example Show Example

Download

You can try this two tutorial.

Fixed float element using jquery and css
Creating simple float menu using jquery

Final output of floating main menu on the top of the pages

Create a float menu

Now start coding to create a floating menu of the main menu on the top of the pages. When scorrling it will fixed on the top of the page. But when you come back on the top the main menu will be stay on the previous place of its own.Now start and for this we need css, html, jquery and sme images. The sample file structure is like.

float-main-menu/
 float-main-menu.html
 style.css
 float-main-menu.js
 back.jpg
 bar.jpg

Create a simple html file to locate links with html <ul> tags. It is a simple html file

float-main-menu.html

<html>
 <head>
  <title> Floating Main Navigation Bar</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">  
  <script type="text/javascript" src="float-main-menu.js"> </script>
 </head> 
  
 </head>
 <body>
  <br/><br/>
  <h1>Floating Main Navigation Bar</h1>
  
  <br></br>
  <div id="taslim">
   <a href="">Taslim</a>
   <a href="">Taslim</a>
   <a href="">Taslim</a>
   <a href="">Taslim</a>
   <a href="">Taslim</a>
   <span class="clear"></span>
  </div>
  <div id="ta">
   <h3>Floating Main Navigation Bar</h3>
   A navbar on tthe top of the page is fixed when the page is scrolling.  A navbar on tthe top of the page is fixed when the page is scrolling.  A navbar on tthe top of the page is fixed when the page is scrolling. 
   
   ......
   .....
   
   A navbar on tthe top of the page is fixed when the page is scrolling.  A navbar on tthe top of the page is fixed when the page is scrolling.
  </div>  
 </body>
</html>

float-main-menu.js

$(document).ready(function(){    
     var offset=$("#taslim").offset();
     var toppadding=10;
     var y=$(window).scrollTop() - offset.top + toppadding;
     var a=y-200;
     $(window).scroll(function() {
      if($(window).scrollTop()< 200){
       $("#taslim").stop().css({
        position: 'relative',
         marginTop:0,         
       });
      }      
      else if(($(window).scrollTop() > offset.top)&&($(window).scrollTop()>200)) {
       $("#taslim").stop().css({ 
         position: 'fixed',
         marginTop: y,         
       });       
      } 
      else  {
       $("#taslim").stop().css({         
         marginTop: 0
       });
      }
     });
    });

Now start to styling the html file with css. style.css

   
body{
 width:900px;
 margin:0 auto;
 background:url("back.jpg");    
}

h1{
 padding:10px;
 color:white;
}
#taslim{
 background:url("bar.png") repeat-x;    
 margin:6px 0;
 font-weight:bold;    
 color:white;
 width:930px;
 height:70px;
 padding:5px;
    
}
#taslim a{
 text-decoration:none;
 background:url("bar1.png") right 0px no-repeat;
 padding:10px  30px;
 float:left;
 color:white;    
}
#ta{
 background:#f1f1f1;
 padding:20px;
 width:900px;    
}

.clear{
 clear:both;
}

Pages - পৃষ্ঠাসমূহ

create a styled float menu with css and jquery

Final output of floating main menu on the top of the pages

Create a float menu

2 comments:

Popular Posts