webサイトのツールバーのようなものの作り方

下記サイトの最下部に出てくるツールバーのようなものはどのように作るのでしょうか？
http://mozilla-remix.seesaa.net/

参考になるサイトなどがあれば教えて下さい。

No.3 ベストアンサー 回答者： tracer 回答日時： 2011/08/20 04:40

> ツールバーをクリックで出したり引っ込めたりする部分

このカテゴリがデザイン・CSSなので、そこに注視してお答えしますと、CSS3のtransitionsを使用すれば要素をアニメーションさせることは可能です。ただし、主要ブラウザであるIEの8以下ではこの機能を使えないので、一般的な手法としては、CSSではなく、javascriptを用いて実装されると思います。

CSS3で実装する場合は、「Transitions css3」で検索すれば、情報は大量に出てきます。
JavaScriptで実装する場合は、カテゴリを変えて質問されてみてはどうでしょうか。

No.2 回答者： LOHA 回答日時： 2011/08/14 17:04

Webプログラマで、この手の物を作るのが趣味の人なら自分で作ればよいと思いますが、もしお示しのサイトのようなものを自分のサイトに設置したいというだけであれば、第三者が作ったものを利用するのが吉です。

示されたサイトでは、「Wibiyaツールバー」というものを使っています。
公式サイトや設置方法などは
http://www.google.co.jp/search?q=wibiya+toolbar
より適宜参照してください。

No.1 回答者： ORUKA1951 回答日時： 2011/08/14 10:25

単純にその部分のソースを見ればわかるのでは?

　ただ、そのサイトの方法は決して薦められる方法ではありません。

　HTMLとしては、ナビゲーションリンクですから
<div class="nav">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
とナビゲーションリンクリストとしてマークアップしておいて、スタイルシートで、好きなようにデザインしていきます。
横並び
div.nav ol,div.nav ol li{list-style:none;display:block;}
div.nav ol li{width:20%;float:left;}
div.nav ol li:before{content:"|";}
とか・・
縦に並べる
div.nav ol,div.nav ol li{list-style:none;display:block;}
div.nav ol li{width:20%;}
とか・・

ナビゲーションリスト 横並び float( http://www.google.co.jp/search?q=%0A%0A%E3%83%8A … )などで探せばたくさんでてきます。

この回答への補足

ありがとうございます。
ですが、そのツールバーをクリックで出したり引っ込めたりする部分のところがやりたいのです。

補足日時：2011/08/17 20:26