分類標籤

2007年5月26日星期六

把蘋果的 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

2 留言:

Unknown 說...

請問一下 , 關於這個 Dock Menu

的 步驟 是只有 Blogger / Blogspot

可以 用的 嗎 ?!

那一般網頁 或 其他 部落格程序 呢 ??? @@*

消息 說...

步驟是只有 Blogger 適用,但 Dock Menu 則可用於任何網頁,您可參看:
http://www.ndesign-studio.com/file/css-dock-menu.zip

內的 css-dock.html 、 css-dock-top.html 及 css-dock-bottom.html

發佈留言

[+/-] 最近訪客

Blog Widget by LinkWithin

[+/-] 部落資料

Locations of visitors to this page Blog Look Score and Rank Free PageRank Checker Creative Commons License
尋找一些逝去的瞬間愚蠢製作,以共享創意署名-非商業性-相同方式共享 3.0 香港 授權條款釋出。