WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » Tutorials » Social Sliding Icons

Go to page : Previous  1, 2

View previous topic View next topic Go down  Message [Page 2 of 2]

1Accespted Social Sliding Icons Sat Dec 18, 2010 5:53 pm

Emilio

Emilio
Registered Member
Registered Member
First topic message reminder :

Social Sliding Images
Sliding icons using JavaScript


Today I'll show you to put some social icons that slides out on your website. You've maybe seen on many websites or blogs that they have a twitter or facebok icons to keep socializing. Here is how we do that and how it works.

Social Sliding Icons - Page 2 Demo4

The CSS: Place the Css between the <head></head>
Code:
<style type="text/css">
body {
   background: #FFF;
   margin: 0;
   padding: 0;
   font: 10px normal Verdana, Arial, Helvetica, sans-serif;
   color: #444;
}

ul#socialicons {
    position:bottom;
    margin: 15px;
    padding: 5px;
    top: 10px;
    left: 90px;
    list-style: none;
    z-index: 999;
opacity:.90;
filter:alpha(opacity=90);
filter: “alpha(opacity=90)”;
}
ul#socialicons li {
    width: 10px;
}
ul#socialicons li a {
    display: block;
    margin-right: 30px;
    width: 35px;
    height: 32px;   
    background-color:transparent;
    background-repeat:no-repeat;
    background-position:center center;
    border:0px solid #AFAFAF;
   
}
ul#socialicons .facebook a{
    background-image: url('http://cdn5.iconfinder.com/data/icons/socialmediaicons_v120/32/facebook.png');
}
ul#socialicons .twitterl a      {
    background-image: url('http://cdn5.iconfinder.com/data/icons/socialmediaicons_v120/32/twitter.png');
}


</style>

The Html + Javascript: Place that after the <body>

Code:
<script type="text/javascript" src="http://wirrickss.webs.com/Sliding%20Icons.js"></script>

Put this after the Javascript
Code:
<ul id="Socialicons">
 <li class="facebook"><a href="YOURLINK" title="Be Fan"></a></li><br>
 <li class="twitterl"><a href="YOURLINK" title="Follow me on Twitter!"></a></li><br>
</ul>

Put this Script before the </body> tag
Code:
<script type="text/javascript">
            $(function() {
                $('#navigation a').stop().animate({'marginLeft':'-30px'},1000);

                $('#navigation > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-20px'},200);
                    },
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-30px'},200);
                    }
                );
            });
        </script>

Icons more transparent

To make the icons more transparent you can change the Opacity.

opacity:.90; filter:alpha(opacity=90); filter: “alpha(opacity=90)”;

The Red Numbers say how transparent the icons are.
If you want for example that the icons are 50% visible you quickly change it into :

opacity:.50; filter:alpha(opacity=50); filter: “alpha(opacity=50)”;

And thats how the visiblity of the icons work.

Adding More Social Icons:

To add more icons like Myspace, Digg, Rss, ...
Just add this to the rest of your "Socialicons" ID

Code:
<li class="CLASS FOR CSS HERE"><a href="YOURLINK" title="TITLE HERE"></a></li><br>

And put this to your css

Code:
ul#socialicons .CLASS NAME HERE a      {
    background-image: url('ICON LINK HERE');
}

Don't forget to add class names , icon image links and titles!

Have a great day!

Get More Icons

Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.

http://www.graphilicious.forumotion.Com

26Accespted Re: Social Sliding Icons Sat May 14, 2011 1:37 pm

lordadmer


Registered Member
Registered Member
wow! nice can you share the live preview?

27Accespted Re: Social Sliding Icons Sat Jul 23, 2011 2:01 pm

Behavior???


Registered Member
Registered Member
I managed to get this working on my forum, but how can I make this whole thing horizontal, instead of vertical? and How do I center it?

http://www.thedungeons.info

Sponsored content


View previous topic View next topic Back to top  Message [Page 2 of 2]

Go to page : Previous  1, 2

WebArtz - The Web Design Forum » Web Designing & Coding » Tutorials » Social Sliding Icons

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