Radiotavi

Radiotavi does not currently provide support for this item.

9 comments found.

Hi. Love your sharing menu, but is there a way it (style2) could easily be changed so it would expand to the left instead of right, as I have it in the top-right corner of my page? Or indeed a way to alter any of the styles to dictate their direction? CSS isn’t my strong point and my futile attempts just bodged everything. Thanks.

replace float:right; instead of float:left; And in #menu you should use “right” property for positioning Hope it works

here is a css code:
#menu
{
margin-top:80px;

width:33px;
height:33px;
overflow:hidden;
position:relative;
position:absolute;
z-index:3;    

right:49%;
float:right;

-moz-transition-property: width; /* Firefox 4 */
-moz-transition-duration: 1s; /* Firefox 4 */
-webkit-transition-property: width; /* Safari and Chrome */
-webkit-transition-duration: 1s; /* Safari and Chrome */
-o-transition-property: width; /* Opera */
-o-transition-duration: 1s; /* Opera */
}    

#menu:hover
{
width:180px;
}

#menu:hover > #share
{
height:33px;
width:33px;    
background-image:url(share.png);
background-repeat:no-repeat;
}        

#share
{    
height:33px;
width:33px;
background-image:url(sharebl.png);
background-repeat:no-repeat;
cursor:pointer;
float:right;
position:relative;
}    

.ico1
{
height:33px;
width:33px;
float:right;
background-image:url(fb-bl.png);
background-repeat:no-repeat;
cursor:pointer;
position:relative;

}

.ico1:hover
{
background-image:url(Fb.png);
background-repeat:no-repeat;

}

.ico2
{
height:33px;
width:33px;
background-image:url(rss-bl.png);
background-repeat:no-repeat;
float:right;
cursor:pointer;
position:relative;
}    

.ico2:hover
{
background-image:url(rss.png);
background-repeat:no-repeat;    
}

.ico3
{
height:33px;
width:33px;
background-image:url(google-plus-bl.png);
background-repeat:no-repeat;
float:right;
cursor:pointer;
position:relative;
}    

.ico3:hover
{
background-image: url(google-plus.png);
background-repeat:no-repeat;
}

.ico4
{
height:33px;
width:33px;
background-image:url(tw-bl.png);
background-repeat:no-repeat;
float:right;
cursor:pointer;
position:relative;
}    

.ico4:hover
{
background-image:url(tw.png);
background-repeat:no-repeat;
}

Excellent, thank you for the quick response. float:right was key, the right: 49% actually makes the whole thing shift over on hover. I’ve since optimised a little so my css is now:

#sharemenu { margin-top:80px; width:33px; height:33px; overflow:hidden; position:relative; position:absolute; z-index:3; /*right:49%;*/ float:right; -moz-transition-property: width; /* Firefox 4 */ -moz-transition-duration: 1s; /* Firefox 4 */ -webkit-transition-property: width; /* Safari and Chrome */ -webkit-transition-duration: 1s; /* Safari and Chrome */ -o-transition-property: width; /* Opera */ -o-transition-duration: 1s; /* Opera */ } #sharemenu:hover { width:200px; } #sharemenu:hover > #share { height:33px; width:33px; background-image:url(../images/social/share.png) ; background-repeat:no-repeat; -ms-transform:rotate(360deg); /* IE 9 */ -ms-transition: -webkit-transform 1s; -moz-transform:rotate(360deg); /* Firefox */ -moz-transition: -webkit-transform 1s; -webkit-transform:rotate(360deg); /* Safari and Chrome */ -webkit-transition: -webkit-transform 1s; -o-transform:rotate(360deg); /* Opera */ -o-transition: -webkit-transform 1s; } #sharemenu div { height:33px; width:33px; float:right; background-repeat:no-repeat; cursor:pointer; position:relative; } #sharemenu #share { background-image:url(../images/social/share.png); } #sharemenu .facebook { background-image:url(../images/social/fb_bw.png); } #sharemenu .facebook:hover { background-image:url(../images/social/fb.png); }

Not sure why that doesn’t format properly. :(

There seem to be some challenges with touch, especially with the iOS devices. Any thoughts on how to make this work smoothly on iOS devices?

Great menu. How can I use it to support mobile devices even if it need to be a click version?

Cheers

Does it work in Wordpress

It is just HTML CSS code without any addons, so if Wordpress gets some ordinary codes, its possible.

no

Interested in buying, do the buttons actually work or will I need to code the back end of them?

I don’t get

Hi Many thanks for your amazing product i have make some of change in your css to be fixable with my website but the problem is the picture of share is appear in chrome & Opera and its working fine but in Firefox and Microsoft internet explorer it doesn’t work and share icon it doesn’t appear at all

<div id="menu"> <div id="share"> </div> <a href="whatever you want"> <div class="ico1"> </div> </a> <a href="whatever you want"> <div class="ico3"> </div> </a> <a href="whatever you want"> <div class="ico4"> </div> </a> </div>

@charset "utf-8";
/* CSS Document */

#menu
{
width:33px;
height:33px;
overflow:hidden;
position:relative;
z-index:3;    
float:right;

/* CSS3 transition */
-moz-transition-property: height; /* Firefox 4 */
-moz-transition-duration: 1s; /* Firefox 4 */
-webkit-transition-property: height; /* Safari and Chrome */
-webkit-transition-duration: 1s; /* Safari and Chrome */
-o-transition-property: height; /* Opera */
-o-transition-duration: 1s; /* Opera */

}    

#menu:hover
{
height:220px;
}

#menu:hover > #share
{
height:33px;
width:33px;    
background-image:url('../iconsimg/sharee.png);
background-repeat:no-repeat;
}        

#share
{    
height:33px;
width:33px;
background-image:url('../iconsimg/sharee.png');
background-repeat:no-repeat;
cursor:pointer;
float:right;
position:relative;
}    

.ico1
{
height:33px;
width:33px;
float:right;
background-image:url('../iconsimg/fbook.png');
background-repeat:no-repeat;
cursor:pointer;
position:relative;

}

.ico1:hover
{
background-image:url('../iconsimg/fbookhov.png');
background-repeat:no-repeat;

}

.ico3
{
height:33px;
width:33px;
background-image:url(../iconsimg/gplus.png);
background-repeat:no-repeat;
float:right;
cursor:pointer;
position:relative;
}    

.ico3:hover
{
background-image: url(../iconsimg/gplushov.png);
background-repeat:no-repeat;
}

.ico4
{
height:33px;
width:33px;
background-image:url(../iconsimg/twitt.png);
background-repeat:no-repeat;
float:right;
cursor:pointer;
position:relative;
}    

.ico4:hover
{
background-image:url(../iconsimg/twitthov.png);
background-repeat:no-repeat;
}

is it possible to implement this on Tumblr?

Hello, It is simple html&css form, It is possible to set up any kind of web page that uses html and css structure

Nice product =)

by
by
by
by
by
by