• Page 1 of 2
  • 1
  • 2
  • »
Forum moderator: bigblog  
uCoz Community » For Webmasters » Custom Solutions » Floating Footer Menu (Tutorial)
Floating Footer Menu
CodeResolution
Posts: 1570
Reputation: 58

Message # 1 | 2:45 PM 2010-03-21
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:
If you want to change the side to right instead of left, use the code below instead of the original:

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
Dartz
Posts: 1931

Message # 2 | 5:26 PM 2010-03-21
I don't quite like this because some users think they can get rid of copyrights.
[... With uCoz since December 2 2007 ...]
Unique
Posts: 421
Reputation: 35

Message # 3 | 5:35 PM 2010-03-21
Not bad CreativeCollusions smile
ExtraCafe.rs, we're the best !
CodeResolution
Posts: 1570
Reputation: 58

Message # 4 | 7:53 PM 2010-03-21
Unique, thanks. Dartz, do you mean to steal the script?
Kind regards,
Elliott.

"The best uCoz" critic since 2007.
Qualified website, branding, print & user interface designer.

I'm on Behance and Twitter.
Dartz
Posts: 1931

Message # 5 | 9:08 PM 2010-03-21
Not steal it but enlarge width and when you scroll down, it covers uCoz copyrights.
[... With uCoz since December 2 2007 ...]
CodeResolution
Posts: 1570
Reputation: 58

Message # 6 | 10:55 PM 2010-03-21
Yes, I understand.

Well if you think it is neccassary, feel free to remove the thread.

Kind regards,
Elliott.

"The best uCoz" critic since 2007.
Qualified website, branding, print & user interface designer.

I'm on Behance and Twitter.
Dartz
Posts: 1931

Message # 7 | 1:26 AM 2010-03-22
No, people who do that get their websites blocked so... fudge
[... With uCoz since December 2 2007 ...]
Gigabyte
Posts: 25
Reputation: 2

Message # 8 | 10:04 AM 2010-06-14
Thanks a bunch for this code smile It's working perfectly and its flawless!
Gigabyte Zone - [ ... One Family, One Goal; Making Your Life A "Byte" Easier! ... ]
Movies, Games, Applications, Music, Books and plenty more!
SirDarknight
Posts: 247
Reputation: -5

Message # 9 | 10:03 AM 2011-01-29
Where should I use it?
CodeResolution
Posts: 1570
Reputation: 58

Message # 10 | 10:46 AM 2011-01-29
SirDarknight,
Quote (CreativeCollusions)
Place the following code within your header tags
Kind regards,
Elliott.

"The best uCoz" critic since 2007.
Qualified website, branding, print & user interface designer.

I'm on Behance and Twitter.
SirDarknight
Posts: 247
Reputation: -5

Message # 11 | 9:10 AM 2011-02-07
CreativeCollusions, What's <?if($USER_AGENT$='ie')

I didn't understand USER_AGENT. What It Does?

CodeResolution
Posts: 1570
Reputation: 58

Message # 12 | 9:20 AM 2011-02-07
SirDarknight, blocks users that are using Internet Explorer from seeing this menu.
Kind regards,
Elliott.

"The best uCoz" critic since 2007.
Qualified website, branding, print & user interface designer.

I'm on Behance and Twitter.
SirDarknight
Posts: 247
Reputation: -5

Message # 13 | 4:18 AM 2011-02-20
CreativeCollusions, I've added a sub-menu to it. but when click on the arrow to show the sub-menu. it doesn't show.
CodeResolution
Posts: 1570
Reputation: 58

Message # 14 | 11:53 AM 2011-02-20
Let me take a look at your modified code.
Kind regards,
Elliott.

"The best uCoz" critic since 2007.
Qualified website, branding, print & user interface designer.

I'm on Behance and Twitter.
CodeResolution
Posts: 1570
Reputation: 58

Message # 15 | 7:43 PM 2011-02-20
SirDarknight, I see. I haven't made the menu compatible with sub-menu functions. I will try make some time to create an update.
Kind regards,
Elliott.

"The best uCoz" critic since 2007.
Qualified website, branding, print & user interface designer.

I'm on Behance and Twitter.
uCoz Community » For Webmasters » Custom Solutions » Floating Footer Menu (Tutorial)
  • Page 1 of 2
  • 1
  • 2
  • »
Search: