Demo in here
Based on jquery and fisheye, in IE 6, ie 7, Opera 9, Firefox 2, and Safari 2 test through
Original: http://www.ndesign-studio.com/blog/design/css-dock-menu/
How to use:
1, download. Download the resource bundle first
2, insert code. Insert the following code in the
Code:
| The following is a reference fragment: <script type= "Text/javascript" src= "Js/jquery.js" ></script> <script type= "Text/javascript" src= "Js/interface.js" ></script> Code: |
| The following is a reference fragment: <link href= "Style.css" rel= "stylesheet" type= "Text/css"/> |
Code:
| The following is a reference fragment: <!--[If Lt IE 7]> <style type= "Text/css" > . Dock img {behavior:url (IEPNGFIX.HTC)} </style> <! [endif]–> |
The first part is JavaScript, the second part is CSS, the last section is IE6 hack
3, set up. Insert the following code anywhere in the <body> area:
Code:
| The following is a reference fragment: <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, Insert menu.
If at the top of the page, insert the following code (note:<span> after )
Code:
| The following is a reference fragment: <a class= "Dock-item" href= "#" ><span>home</span>< /a> |
If at the bottom of the page, insert the following code (note:<span> before )
Code:
| The following is a reference fragment: <a class= "dock-item2" href= "#" ><span>home</span> </a> |
Another: This person's other design is also quite outstanding: icon and WP template
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
