   | |
| Forum moderator: bigblog |
| uCoz Community » For Webmasters » Custom Solutions » Floating Footer Menu (Tutorial) |
| Floating Footer Menu |
Installation:
Place the following code within your header tags (this code places the menu on the left hand side): Code <?if($USER_AGENT$='ie')?><?else?><!-- Floating Menu --> <div style="position:absolute;position:fixed;bottom:1;left:1;"> <div id="menu" style="display: none;"><table border="0" cellpadding="0" cellspacing="0" width="150" style="border: 1px solid gray; background: #f6f6f6;"> <tr><td height="32"><span style="font-size: 10pt;"> <b><font color="#ff0000">»</font> Site Menu</b> <small>[<a href="javascript://" onclick="$('#menu').slideToggle(2000)">X</a>]</small></span></td></tr><tr><td style="background: #f6f6f6; text-align: left; border-top: 1px solid gray;"> <br>$SMENU_1$ <table border="0" cellpadding="1" cellspacing="1" width="100%"> <tr><td width="500"> </td></tr></table> </td></tr></table></div> <div style="height: 22px; width: 150px; border: 1px solid gray; background: #f6f6f6; margin-top: 1px;"> <div style="float:left; height: 18px; width: 150px; border-left: 1px solid gray;text-align: center; padding-top: 4px;"><a href="javascript://" onclick="$('#menu').slideToggle(2000)">Site Menu</a></div> </div></div> <!-- End Floating Menu --><?endif?> Optional features: Code <?if($USER_AGENT$='ie')?><?else?><!-- Floating Menu --> <div style="position:absolute;position:fixed;bottom:1;right:1;"> <div id="menu" style="display: none;"><table border="0" cellpadding="0" cellspacing="0" width="150" style="border: 1px solid gray; background: #f6f6f6;"> <tr><td height="32"><span style="font-size: 10pt;"> <b><font color="#ff0000">»</font> Site Menu</b> <small>[<a href="javascript://" onclick="$('#menu').slideToggle(2000)">X</a>]</small></span></td></tr><tr><td style="background: #f6f6f6; text-align: left; border-top: 1px solid gray;"> <br>$SMENU_1$ <table border="0" cellpadding="1" cellspacing="1" width="100%"> <tr><td width="500"> </td></tr></table> </td></tr></table></div> <div style="height: 22px; width: 150px; border: 1px solid gray; background: #f6f6f6; margin-top: 1px;"> <div style="float:right; height: 18px; width: 150px; border-left: 1px solid gray;text-align: center; padding-top: 4px;"><a href="javascript://" onclick="$('#menu').slideToggle(2000)">Site Menu</a></div> </div></div> <!-- End Floating Menu --><?endif?> Unfortunately the code wont work properly on Internet Explorer (IE) so I have included some conditional operators to the script so that it wont show on IE. Check out: Live Demo Kind regards,
Elliott. "The best uCoz" critic since 2007. Qualified website, branding, print & user interface designer. I'm on Behance and Twitter. Post edited by Mistory - Sunday, 2010-03-21, 7:51 PM
|
I have alot of questions on this one! My website is a music blog, Im almost ready to go and code the whole thing from scratch to have it run my way, but I notice here and there that there's some loop poles. I have this floating bar at the bottom of my page. I want to make it so every link/music they click it will appear in the floating box, making it capable of listening and still going through my pages. Another idea is; can I put a custom music media player to work in the floating box, and if I can, what would I have to do to make music play through it since all the music is posted daily and not just a one set play list. It is all being posted on the publisher page but what would make it recognize that a song is being played and pop up on the floating bar? I know it sounds like im going from idea to idea but there is just too many questions :P
|
Vik, you can change the colour of the background and the border colour and size by editing the following part of the script:
Code border: 1px solid gray; background: #f6f6f6;" Note: There are more than one of the code above. You can edit them separately or as the same. I believe one is the original box and then one of the menu table. |
| |||