Posted By

e11world on 10/17/10


Tagged

scroll css javascript menu float html navigation jquery animated


Versions (?)

Who likes this?

4 people have marked this snippet as a favorite

trusktr
dekehooper
Tyster
verostudios


Animated Floating MENU scrolling with page


 / Published in: jQuery
 

URL: http://net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/

This is a very useful piece of code (html, css, jquery) to have a nice animated floating menu on your page. I totally love it. I used it with jquery 1.3.2 and up

  1. <h3>Menu</h3>
  2. <ul>
  3. <li><a onclick="return true;" href="#menu1">Menu1</a></li>
  4. <li><a onclick="return true;" href="#menu2">Menu2</a></li>
  5. <li><a onclick="return true;" href="#menu3">Menu3</a></li>
  6. </ul>
  7.  
  8. /*********************************************** FLOATING MENU *****/
  9.  
  10. #floatMenu {
  11. position:absolute;
  12. top:30%;
  13. left:10px;
  14. width:200px;
  15. background-color:#fff;
  16. margin:0;
  17. padding:0;
  18. font-size:11px;
  19. border-left:1px solid #ddd;
  20. border-right:1px solid #ddd;
  21. }
  22.  
  23. #floatMenu h3 {
  24. color:#fff;
  25. padding:3px;
  26. margin:0;
  27. background-color:#0E130F;
  28. border-bottom:1px solid #ddd;
  29. border-top:1px solid #ddd;
  30. font-size:13px;
  31. text-align:center;
  32. }
  33.  
  34. #floatMenu ul {
  35. margin:0;
  36. padding:0;
  37. list-style:none;
  38. }
  39.  
  40. #floatMenu ul li {
  41. padding-left:10px;
  42. background-color:#f5f5f5;
  43. border-bottom:1px solid #ddd;
  44. border-top:1px solid #ddd;
  45. }
  46.  
  47. #floatMenu ul li a {
  48. text-decoration:none;
  49. font-weight: normal;
  50. }
  51. #floatMenu ul li a:hover {
  52. color: #000;
  53. padding-left: 1px;
  54. }
  55.  
  56.  
  57.  
  58. /* floating menu */
  59. $(function(){
  60. function moveFloatMenu() {
  61. var menuOffset = menuYloc.top + $(this).scrollTop() + "px";
  62. $('#floatMenu').animate({top:menuOffset},{duration:500,queue:false});
  63. }
  64.  
  65. menuYloc = $('#floatMenu').offset();
  66.  
  67. $(window).scroll(moveFloatMenu);
  68.  
  69. moveFloatMenu();
  70. });

Report this snippet  

You need to login to post a comment.