Advanced Search

Animated Floating MENU scrolling with page

/ Published in: jQuery
Save to your folder(s)
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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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. });

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.