Adding a frame to a floating menu.
Page 1 of 1
Adding a frame to a floating menu.
Ok so, The picture above shows the menu I would like to have some kind of frame around.I would think I would have to use css to place an image behind it but i'm not sure
My forum address: Click here
I'm not sure if you'll need this or not but here's the code I used to get that menu
HTML
- Code:
<ul class="socialicons">
<li ><a id="youtube"href="http://www.youtube.com/user/ArmedOutlawzClan/videos"target="_blank" title="Our NEW Youtube"></a>
<li ><a id="facebook" href="http://www.facebook.com/pages/Armed-Outlawz/198122970302306" target="_blank" title="Our NEW facebook"></a>
<li ><a id="google" href="https://plus.google.com/101371893655840637231/posts" target="_blank" title="Our NEW Google +"></a>
<li ><a id="twitter" href="https://twitter.com/#!/ArmedOutlawz" target="_blank" title="Our NEW twitter"></a>
<li ><a id="elite1" href="https://elite.callofduty.com/connect/clan/view/83108" target="_blank" title="elite clan one"></a>
<li ><a id="elite2" href="https://elite.callofduty.com/connect/clan/view/534119" target="_blank" title="elite clan two"></a>
</ul>
CSS
- Code:
a.mainmenu:hover {
opacity: 0.7;
}
a.mainmenu {
opacity: 1;
}
ul.socialicons{
list-style: none;
margin:0px;
padding:0px;
position:fixed;
right:10px;
top:200px;
}
ul.socialicons li{
padding-bottom:4px;
padding-left:15px;
}
#youtube
{
display: block;
width: 32px;
height: 32px;
background: url("http://i47.servimg.com/u/f47/17/17/22/24/youtub13.png") no-repeat 0 0;
opacity:0.4;
transition-duration:0.5s;
-moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s;
}
#youtube:hover
{
background: url("http://i47.servimg.com/u/f47/17/17/22/24/youtub14.png") no-repeat 0 0;
opacity:1.9;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
#facebook
{
display: block;
width: 32px;
height: 32px;
background: url("http://i47.servimg.com/u/f47/17/17/22/24/facebo11.png") no-repeat 0 0;
opacity:0.4;
transition-duration:0.5s;
-moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s;
}
#facebook:hover
{
background: url("http://i47.servimg.com/u/f47/17/17/22/24/facebo12.png") no-repeat 0 0;
opacity:1.9;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
#google
{
display: block;
width: 32px;
height: 32px;
background: url("http://i47.servimg.com/u/f47/17/17/22/24/google12.png") no-repeat 0 0;
opacity:0.4;
transition-duration:0.5s;
-moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s;
}
#google:hover
{
background: url("http://i47.servimg.com/u/f47/17/17/22/24/google13.png") no-repeat 0 0;
opacity:1.9;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
#twitter
{
display: block;
width: 32px;
height: 32px;
background: url("http://i47.servimg.com/u/f47/17/17/22/24/twitte10.png") no-repeat 0 0;
opacity:0.4;
transition-duration:0.5s;
-moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s;
}
#twitter:hover
{
background: url("http://i47.servimg.com/u/f47/17/17/22/24/twitte11.png") no-repeat 0 0;
opacity:1.9;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
#elite1
{
display: block;
width: 32px;
height: 32px;
background: url("http://i47.servimg.com/u/f47/17/17/22/24/elite10.png") no-repeat 0 0;
opacity:0.4;
transition-duration:0.5s;
-moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s;
}
#elite1:hover
{
background: url("http://i47.servimg.com/u/f47/17/17/22/24/one10.png") no-repeat 0 0;
opacity:1.9;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
#elite2
{
display: block;
width: 32px;
height: 32px;
background: url("http://i47.servimg.com/u/f47/17/17/22/24/elite10.png") no-repeat 0 0;
opacity:0.4;
transition-duration:0.5s;
-moz-transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-o-transition-duration:0.5s;
}
#elite2:hover
{
background: url("http://i47.servimg.com/u/f47/17/17/22/24/211.png") no-repeat 0 0;
opacity:1.9;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum