今回はJqueryでMac風のDock Menuが作れるプラグインCSS Dock Menuの使い方をご紹介。
Mac風のメニューを作れるプラグインはjqDockなどいくつかありますが、その中でも一番滑らかに動くCSS Dock Menuについて解説していきます。
使い方
１．ダウンロード
まず、公式ページからファイルをダウンロードします。
公式ページはこちら
ダウンロードしたら解凍します。
２．HEAD読み込み
読み込むファイルはダウンロードしたフォルダにすべて入っています。
- style.css
- jquery.js
- interface.js
自分のサイトのファイルといかにもかぶりそうな名前なので、名前を変更して読み込みましょう。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />あとIE7に対応させたい場合は下記を記述します。
<!--[if lt IE 7]> <style type="text/css"> .dock img { behavior: url(iepngfix.htc) } </style> <![endif]–>
３．BODY読み込み
下記のスクリプトを書きます
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock2').Fisheye(
{
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>
４．作成
<div class="dock" id="dock">
<div class="dock-container" style="left: 193px; width: 240px;">
<a class="dock-item" href="http://www.ndesign-studio.com" style="width: 40px; left: 0px;"><img src="images/home.png" alt="home"><span>N.Design</span></a>
<a class="dock-item" href="http://www.webdesignerwall.com" style="width: 40px; left: 40px;"><img src="images/email.png" alt="contact"><span>Designer Wall</span></a>
<a class="dock-item" href="http://jobs.webdesignerwall.com" style="width: 40px; left: 80px;"><img src="images/portfolio.png" alt="portfolio"><span>Design Jobs</span></a>
<a class="dock-item" href="http://bestwebgallery.com" style="width: 40px; left: 120px;"><img src="images/music.png" alt="music"><span>Best Web Gallery</span></a>
<a class="dock-item" href="http://icondock.com" style="width: 40px; left: 160px;"><img src="images/video.png" alt="video"><span>IconDock</span></a>
<a class="dock-item" href="http://icondock.com/icons" style="width: 40px; left: 200px;"><img src="images/history.png" alt="history"><span>Stock Icons</span></a>
</div>
</div>こんな感じで記述してください。画像やリンクなどを入れ替えることでカスタムできます。
下に設置したい場合はこっち
<div class="dock" id="dock2">
<div class="dock-container2" style="left: 113px; width: 400px;">
<a class="dock-item2" href="#" style="width: 40px; left: 0px;"><span>Home</span><img src="images/home.png" alt="home"></a>
<a class="dock-item2" href="#" style="width: 40px; left: 40px;"><span>Contact</span><img src="images/email.png" alt="contact"></a>
<a class="dock-item2" href="#" style="width: 40px; left: 80px;"><span>Portfolio</span><img src="images/portfolio.png" alt="portfolio"></a>
<a class="dock-item2" href="#" style="width: 40px; left: 120px;"><span>Music</span><img src="images/music.png" alt="music"></a>
<a class="dock-item2" href="#" style="width: 40px; left: 160px;"><span style="display: none;">Video</span><img src="images/video.png" alt="video"></a>
<a class="dock-item2" href="#" style="width: 40px; left: 200px;"><span style="display: none;">History</span><img src="images/history.png" alt="history"></a>
<a class="dock-item2" href="#" style="width: 40px; left: 240px;"><span style="display: none;">Calendar</span><img src="images/calendar.png" alt="calendar"></a>
<a class="dock-item2" href="#" style="width: 40px; left: 280px;"><span>Links</span><img src="images/link.png" alt="links"></a>
<a class="dock-item2" href="#" style="width: 40px; left: 320px;"><span>RSS</span><img src="images/rss.png" alt="rss"></a>
<a class="dock-item2" href="#" style="width: 40px; left: 360px;"><span>RSS2</span><img src="images/rss2.png" alt="rss"></a>
</div>
</div>class名らid名に2を付けるだけです。
ではまた次回(‘ω’)ノ
Leave a Comment