ツールチップにメニューバーを格納できるjQueryのプラグイン・Toolbar.Js。
Webサイトもフラットでアプリっぽいデザインが流行っているようですので、こういったライブラリーを使用してメニューを格納し、シンプルでミニマルなサイト作りにするのも、なかなか楽しそうです。
もちろんHTML5ベースでのWebアプリ開発にも威力を発揮しそうですね。スペースの限られたインターフェースにお勧めです。
まずjQuery本体とプラグインをwebサイトに読み込みます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/prettify.js"></script> <script src="../jquery.toolbar.js"></script>
でバインドしたいIDを指定。
<script type="text/javascript"> $('#user-toolbar').toolbar({ content: '#user-toolbar-options', position: 'top' }); </script>
HTMLもシンプルですので、実装しやすいですね。
<div id="user-toolbar-options"> <a href="#"><i class="icon-user"></i></a> <a href="#"><i class="icon-star"></i></a> <a href="#"><i class="icon-edit"></i></a> <a href="#"><i class="icon-delete"></i></a> <a href="#"><i class="icon-ban"></i></a> </div>
オプションで表示する位置、方向を変えれるみたいですので、様々なレイアウトに対応しそうです。
WEBサイト制作、WEBアプリ開発時に是非実装したい1品!