Dock Menu in Website (same Mac)
1. Download Source Files
Download the CSS dock menu zip package.
2. Insert Code
In between the HTML <head> tag, add the following code
1
2
| <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
|
1
| <link href="style.css" rel="stylesheet" type="text/css" />
|
1
2
3
4
5
| <!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>
<![endif]–>
|
3. Configuration
Don’t forget to add the following code to anywhere within the <body> tag:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <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>
|
4. Add or Remove Items
To add menu item to the top dock (note: span tag is after the img tag):
1
| <a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>
|
To add menu item to the bottom dock (note: span tag is before the img tag):
1
| <a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a>
|
reference :
http://ndesign-studio.com/blog/css-dock-menu
21:31
BlueHeart
Posted in: 
0 ความคิดเห็น:
แสดงความคิดเห็น