The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

OS X Style menu Widget for phpbb

View previous topic View next topic Go down

OS X Style menu Widget for phpbb

Post by multikom4o on December 23rd 2010, 10:25 am

I want something like this: http://www.addthis.com/pages/gallery-demo-share-dock , but NOT share dock! I want menu... With pictures.. 10x Smile

multikom4o
New Member

Posts : 23
Reputation : 0
Language : Bulgarian

Back to top Go down

Re: OS X Style menu Widget for phpbb

Post by haxxor on December 23rd 2010, 10:39 am

The CSS
/* Share Dock Styles */
#sharedock { position: fixed; bottom: 0; left: 0; width: 100%; height: 90px; z-index: 999; }
#dock { position: relative; bottom: 0; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; }
.dock-container { position: relative; background: url(images/dock-background-sm.png) no-repeat bottom right; height: 50px; padding: 20px; }
.dock-contaner-left { background: url(images/dock-background-sm.png) no-repeat left bottom; width: 15px; height: 32px; position: absolute; bottom: 0; left: -15px; }
.dock-container .custom_images a { display: block; width: 50px; position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; cursor: pointer; }
.dock-container .custom_images span { background: rgba(0,0,0,.75); display: none; padding: 2px 8px; margin-left: 17px; font-size: 11px; color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.dock-container .custom_images img { border: 0; margin: 5px 10px 0px; width: 100%; }


The HTML
<div id="sharedock">
<div id="dock">
<div class="dock-container">
<div class="dock-contaner-left"></div>
<div class="addthis_toolbox">
<div class="custom_images">
<a class="addthis_button_facebook"><span>Facebook</span><img src="/cms-content/images/gallery/aquaticus_facebook.png" alt="Share to Facebook" /></a>
<a class="addthis_button_twitter"><span>Twitter</span><img src="/cms-content/images/gallery/aquaticus_twitter.png" alt="Share to Twitter" /></a>
<a class="addthis_button_myspace"><span>MySpace</span><img src="/cms-content/images/gallery/aquaticus_myspace.png" alt="Share to MySpace" /></a>
<a class="addthis_button_stumbleupon"><span>Stumble</span><img src="/cms-content/images/gallery/aquaticus_stumbleupon.png" alt="Stumble It" /></a>
<a class="addthis_button_reddit"><span>Reddit</span><img src="/cms-content/images/gallery/aquaticus_reddit.png" alt="Share to Reddit" /></a>
<a class="addthis_button_delicious"><span>Delicious</span><img src="/cms-content/images/gallery/aquaticus_delicious.png" alt="Share to Delicious" /></a>
<a class="addthis_button_more"><span>More...</span><img src="/cms-content/images/gallery/addthis_64.png" alt="More..." /></a>
</div>
</div>
</div>
</div>
</div>


The Javascript
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=YOUR-ACCOUNT-ID"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/fisheye-iutil.min.js"></script>

mportant: For '#username=YOUR-ACCOUNT-ID' above, change 'YOUR-ACCOUNT-ID' to your own username If you want analytics data to be collected for your account. If you do not want analytics, this phrase can be removed.

Next we just need to intialize the jQuery Fisheye plugin which is used for the animation:
<script type="text/javascript">
$(function () {
// Dock initialize
$('#dock').Fisheye(
{
maxWidth: 30,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 50,
proximity: 60,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
);
});
</script>

haxxor
Forumember

Posts : 157
Reputation : 1
Language : English,Filipino,CSS,HTML/Javascript

Back to top Go down

Re: OS X Style menu Widget for phpbb

Post by multikom4o on December 23rd 2010, 10:46 am

NO! I want menu, no share dock!

multikom4o
New Member

Posts : 23
Reputation : 0
Language : Bulgarian

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum