The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

OS X Style menu Widget for phpbb

2 posters

Go down

OS X Style menu Widget for phpbb Empty OS X Style menu Widget for phpbb

Post by multikom4o Thu Dec 23 2010, 11:25

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
avatar
multikom4o
New Member

Posts : 23
Reputation : 0
Language : Bulgarian

Back to top Go down

OS X Style menu Widget for phpbb Empty Re: OS X Style menu Widget for phpbb

Post by haxxor Thu Dec 23 2010, 11:39

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
haxxor
Forumember

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

Back to top Go down

OS X Style menu Widget for phpbb Empty Re: OS X Style menu Widget for phpbb

Post by multikom4o Thu Dec 23 2010, 11:46

NO! I want menu, no share dock!
avatar
multikom4o
New Member

Posts : 23
Reputation : 0
Language : Bulgarian

Back to top Go down

Back to top


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