在本教程中，我们将向您展示如何使用CSS和jQuery创建一个社交媒体共享菜单。我们将使用基本CSS创建菜单，如CSS背景位置属性和jQuery使链接具有动画效果。
最终结果
点击下面的图片查看现场演示．
创建HTML
1让我们先创建HTML。这是我们的加价。
书签或分享此帖子
- 脸谱网" href="http://www.facebook.com/sharer.php?u=http://yourwebsite.com" title="Share this on Facebook" >Facebook
- url=http://www.yoursite.com/" title="Stumble This Page" > Stumble
- (电子邮件保护)Twitter推这个页面“title = > < / > < /李> < / ul > < / div >
用CSS样式HTML
这是我们的菜单看起来没有任何CSS。
注意，我们的HTML中的每个链接都添加了一个CSS类。例如:
美味的，脸谱网，等等。我们使用不同的类，这样我们就可以在左侧为链接提供自己的图标(后面会详细介绍)。
2方法将使列表项并排显示
浮动财产。此外，我们还为链接元素添加了一些填充(#social - nav_horizontal ul li a)，包括左边28px的填充，这样当我们添加背景时，就有足够的空间来放置社交媒体图标。#social - nav_horizontal {margin-left: 100px;font-family: Futura, Verdana, Sans-Serif;字体大小:18 px;颜色:# 8 e9090;} #social_nav_horizontal h3 {display:inline;填充:0 px 10 px;边界底部:1 px # ccc破灭;} # socialal_nav_horizontal ul {margin: 0;填充:0;margin-top: 20 px; } #social_nav_horizontal ul li {浮:左;填充:5px 0 0 5px;margin-left: 5 px;list-style-type:没有;｝#social - nav_horizontal ul li a{padding: 4px 0 028 px；高度:32像素;颜色:# 999;文字修饰:没有;行高:1.45 em;｝下面是我们的菜单与上面的CSS样式声明的外观。
3.之后，我们将CSS背景添加到每个类中。你可以使用你自己的社交媒体图标集或查看免费赠品部分点击Six Revisions网站寻找免费的社交媒体图标。
注意，您将不得不调整
背景位置左边填充#social - nav_horizontal ul li a这取决于你使用的社交媒体图标的大小。这里是CSS的第一个社会媒体链接(美味)。
.delicious{背景:url(images/delicious.png) no-repeat;背景位置:0 px1 px；｝下面是这段代码的可视化表示:
这是Delicious图标的显示方式:
4我们为每个社交媒体链接添加一个CSS声明。
.delicious{背景:url(images/delicious.png) no-repeat;背景位置:0 px 1 px;} .facebook{背景:url(images/facebook.png) no-repeat;背景位置:0 px 1 px;} .stumbleupon {background:url(images/stumbleupon.png) no-repeat;背景位置:0 px 1 px;} .twitter{背景:url(images/twitter.png) no-repeat;背景位置:0 px 1 px;｝如果一切都是正确的，那么它应该是这样的。
另一个版本:垂直菜单
所以，如果你想创建一个CSS菜单，你就完成了。
但现在，我们将添加一点jQuery，并更改菜单的方向，使其更有趣一些。这个是垂直菜单。
5我刚把CSS脱了
浮动属性从列表项声明(# social_nav_horizontal ul李)切换到垂直菜单。
使用jQuery添加动画效果
是时候添加一些jQuery了。首先，不要忘记向HTML页面添加jQuery库一个指南如果您不熟悉jQuery)。
我们将添加一个效果，当用户悬停在它上面时，轻推链接到右边。
6在jQuery脚本的第一行，我们选择了我们想要应用效果的元素:
#social - nav_horizontal ul li a．我们应用一个事件监听器方法，
.hover，它将监听用户悬停在(和离开)链接项上的事件。我们喂.hover方法，当用户将鼠标悬停在链接项上时(第一个函数)，以及当鼠标悬停在链接外时(第二个函数)，我们希望执行的函数。我们使用
.animate方法上的悬停元素，通过修改其margin-leftCSS属性。我们也使用
鸡毛蒜皮之前的方法.animate方法来阻止动画排队。基本上,鸡毛蒜皮方法将停止任何其他正在进行的动画事件(美元)元素。$(文档)时函数(){$ ('# social_nav_vertical李”)。徘徊（//鼠标移到左边(){$()函数。停止()。动画({marginLeft: '20px'}，300);}，//当鼠标移出时，移动回原来的位置(){$()函数鸡毛蒜皮()。动画（{ marginLeft: '0px' }, 300); }); });
当有人把鼠标放在一个链接上时，它看起来是这样的。
你可以退房演示来查看它的工作情况．
总结
就是这样!请随意在评论中添加任何改进建议。
下载源文件
- social-share-css-jquery(ZIP, 0.017 MB)
相关内容
WebFX职业
加入我们的使命，为全球的企业提供业界领先的数字营销服务，同时建立您的个人知识和个人成长。
