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.

Adding a frame to a floating menu.

Go down

Adding a frame to a floating menu. Empty Adding a frame to a floating menu.

Post by Thatoutlaw April 20th 2012, 1:42 pm

Adding a frame to a floating menu. Dddddd10

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);
  }
avatar
Thatoutlaw
Forumember

Posts : 81
Reputation : 2
Language : english

http://Armedoutlawz.fourmotion.com

Back to top Go down

Back to top


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