Posted By

genik on 05/07/11


Tagged

link


Versions (?)

Access Fast Link on Fixed Bottom Page


 / Published in: jQuery
 

Show link on bottom page.

  1. /*Javascript********************************************************************************/
  2. $(function(){
  3. /*Just sample data*/
  4. for(i=1;i<=50;i++) $('body').append('<h1>text '+i+': blah...blah...blah...</h1>');
  5.  
  6. /*Here's the code*/
  7. $('.button').toggle(function(){
  8. $(this).html('&#171;');
  9. $('.content').slideUp(300);
  10. }, function(){
  11. $(this).html('&#187;');
  12. $('.content').slideDown(300);
  13. });
  14. });
  15.  
  16.  
  17. /*CSS**************************************************************************************/
  18. body{margin:0;padding:0;color:#CCC;}
  19.  
  20. .footer{
  21. position:fixed;
  22. z-index:100;
  23. width:100%;
  24. bottom:0px;
  25. border-top:#222 solid 1px;
  26. }
  27.  
  28. .footer .button{
  29. position:fixed;
  30. right:0px;
  31. bottom:0px;
  32. width:10px;
  33. text-align:center;
  34. padding:5px;
  35. background:#333;
  36. color:#FFF;
  37. font-weight:bold;
  38. cursor:pointer;
  39. }
  40.  
  41. .footer .button:hover{
  42. background:#F60;
  43. }
  44.  
  45. .footer .content{
  46. text-align:center;
  47. background:#000;
  48. padding:5px;
  49. }
  50.  
  51. .footer .content a{
  52. color:#FFF;
  53. margin:0 5px 0 5px;
  54. }
  55.  
  56.  
  57. /*HTML***********************************************************************************/
  58. <div class="footer">
  59. <div class="button">&#187;</div>
  60. <div class="content">
  61. <a href="#">Menu 1</a>
  62. <a href="#">Menu 2</a>
  63. <a href="#">Menu 3</a>
  64. <a href="#">Menu 4</a>
  65. <a href="#">Menu 5</a>
  66. </div>
  67. </div>

Report this snippet  

You need to login to post a comment.