Advanced Search

Access Fast Link on Fixed Bottom Page

/ Published in: jQuery
Save to your folder(s)
Show link on bottom page.

Expand | Embed | Plain Text

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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.