把蘋果的 Dock 放到網頁上

首先進入修改html，找到下面的片段


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='自己的blog標題' type='Header'/>
</b:section>
</div>


接著新增html的widget(紅色部份)


<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='headhtml' locked='false' title='' type='HTML'/>
<b:widget id='Header1' locked='true' title='自己的blog標題' type='Header'/>
</b:section>
</div>


完成後，就儲存範本。

回到網頁元素後，就可以看到新增的html/javascript欄位了。

下載:
http://www.ndesign-studio.com/file/css-dock-menu.zip

將 js/jquery.js
js/interface.js
style.css
及你想要的 ICON 上傳到某個地方(推薦)

再進入修改html，將下面的片段插入 tag 之間(自行修改紅色部份)


<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" />


回到網頁元素，編緝剛才新增的html/javascript欄位，加入下面的片段。(自行修改粗体部份)



<div class="dock" id="dock">
<div class="dock-container">

<a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>

<a class="dock-item" href="#"><img src="images/email.png" alt="contact" /><span>Contact</span></a>

<a class="dock-item" href="#"><img src="images/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>

<a class="dock-item" href="#"><img src="images/music.png" alt="music" /><span>Music</span></a>

<a class="dock-item" href="#"><img src="images/video.png" alt="video" /><span>Video</span></a>

<a class="dock-item" href="#"><img src="images/history.png" alt="history" /><span>History</span></a>

<a class="dock-item" href="#"><img src="images/link.png" alt="link" /><span>Link</span></a>

<a class="dock-item" href="#"><img src="images/rss.png" alt="rss" /><span>RSS</span></a>

</div>
</div>
<script type="text/javascript">

$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 80,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 60,
proximity: 90,
halign : 'left'
}
)
}
);

</script>


大功告成!


2007/5/24

網上看到一個 css-dock-menu，想把它搬到自己的 blog......
怎料......
.

算吧!明天再戰!!


參考文章:http://www.ndesign-studio.com/blog/mac/css-dock-menu