OS X Style menu Widget for phpbb
2 posters
Page 1 of 1
OS X Style menu Widget for phpbb
I want something like this: http://www.addthis.com/pages/gallery-demo-share-dock , but NOT share dock! I want menu... With pictures.. 10x
multikom4o- New Member
- Posts : 23
Reputation : 0
Language : Bulgarian
Re: OS X Style menu Widget for phpbb
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>
/* 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
Re: OS X Style menu Widget for phpbb
NO! I want menu, no share dock!
multikom4o- New Member
- Posts : 23
Reputation : 0
Language : Bulgarian
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum