<div class=”rightside”>
<span class=”downarr”> <!– hide button –>
<a href=”#”></a>
</span>
<!– other stuff in floating right side –>
</div>
css
span.downarr { /* hide button */
float: right;
border-left: 1px solid #a4a4a4;
}
span.downarr a {
display: block;
width: 36px;
height: 26px;
padding: 25px 0 0 10px;
background: url(images/downarrow.png) no-repeat 5px 7px;
}
显示/隐藏效果与jQuery首先我们需要下载的jQuery（复制正确的文件夹中），并激活头index.php的标记。
<head>
<!– … –>
<script type=”text/javascript教程” src=”js/jquery-1.3.2.min.js”></script>
</head>
我们要隐藏面板上“隐藏按钮”，点击工具栏时，应当有不可见的“显示按钮”，使我们能够恢复的面板。我们可以使用下面的jQuery的解决方案（<body>标记后添加的代码）。
<script type=”text/javascript”>
$(document).ready(function(){
//hide toolbar and make visible the ‘show’ button
$(“span.downarr a”).click(function() {
$(“#toolbar”).slideToggle(“fast”);
$(“#toolbarbut”).fadeIn(“slow”);
});
//show toolbar and hide the ‘show’ button
$(“span.showbar a”).click(function() {
$(“#toolbar”).slideToggle(“fast”);
$(“#toolbarbut”).fadeOut();
});
});
</script>
现在我们可以隐藏和显示的bar
HTML和CSS代码的左侧
更新索引用下面的XHTML代码。我们添加一个普通无序列表（ID为社会）来创建的图标顺序，一个DIV标签（与类一角）范围内的总表，以实现工具提示气泡里的标签嵌套。
html
<div class=”leftside”> <!– all things in floating left side –>
<ul id=”social”>
<li><a class=”rss” href=”#”></a><!– icon –>
<div id=”tiprss” class=”tip”><!– tooltip –>
<ul>
<li><a href=”#”>580 Readers</a></li>
<li><a href=”#”><small>[Subscribe]</small></a></li>
</ul>
</div>
</li>
<li><a class=”facebook” href=”#”></a>
<div id=”tipfacebook” class=”tip”>
<ul>
<li><a href=”#”>Share Page</a></li>
<li><a href=”#”>| Profile</a></li>
</ul>
</div>
</li>
<li><a class=”twitter” href=”#”></a>
<div id=”tiptwitter” class=”tip”>
<ul>
<li><a href=”#”>ReTweet</a></li>
<li><a href=”#”>| Profile</a></li>
