1 <html>2 <head>3 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />4 <title>CSS Dock Menu</title>5 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>6 <script type="text/javascript" src="js/interface.js"></script>7 8 <link href="style.css" rel="stylesheet" type="text/css" />9 10 <!--[if lt IE 7]>11 <style type="text/css">12 .dock img { behavior: url(iepngfix.htc) }13 </style>14 <![endif]-->15 16 <script type="text/javascript">17 18 $(document).ready(19 function()20 {21 $('#dock').Fisheye(22 {23 maxWidth: 50,24 items: 'a',25 itemsText: 'span',26 container: '.dock-container',27 itemWidth: 40,28 proximity: 90,29 halign : 'center'30 }31 )32 $('#dock2').Fisheye(33 {34 maxWidth: 60,35 items: 'a',36 itemsText: 'span',37 container: '.dock-container2',38 itemWidth: 40,39 proximity: 80,40 alignment : 'left',41 valign: 'bottom',42 halign : 'center'43 }44 )45 }46 );47 48 </head>49 <body>50 51 <!--top dock -->52 <div class="dock" id="dock">53 <div class="dock-container">54 <a class="dock-item" href="http://www.ndesign-studio.com"><img src="images/home.png" alt="home" /><span>N.Design</span></a> 55 <a class="dock-item" href="http://www.webdesignerwall.com"><img src="images/email.png" alt="contact" /><span>Designer Wall</span></a> 56 <a class="dock-item" href="http://jobs.webdesignerwall.com"><img src="images/portfolio.png" alt="portfolio" /><span>Design Jobs</span></a> 57 <a class="dock-item" href="http://bestwebgallery.com"><img src="images/music.png" alt="music" /><span>Best Web Gallery</span></a> 58 <a class="dock-item" href="http://icondock.com"><img src="images/video.png" alt="video" /><span>IconDock</span></a> 59 <a class="dock-item" href="http://icondock.com/icons"><img src="images/history.png" alt="history" /><span>Stock Icons</span></a>60 61 </div> 62 </div>63 64 <!--bottom dock -->65 <div class="dock" id="dock2">66 <div class="dock-container2">67 <a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a> 68 <a class="dock-item2" href="#"><span>Contact</span><img src="images/email.png" alt="contact" /></a> 69 <a class="dock-item2" href="#"><span>Portfolio</span><img src="images/portfolio.png" alt="portfolio" /></a> 70 <a class="dock-item2" href="#"><span>Music</span><img src="images/music.png" alt="music" /></a> 71 <a class="dock-item2" href="#"><span>Video</span><img src="images/video.png" alt="video" /></a> 72 <a class="dock-item2" href="#"><span>History</span><img src="images/history.png" alt="history" /></a> 73 <a class="dock-item2" href="#"><span>Calendar</span><img src="images/calendar.png" alt="calendar" /></a> 74 <a class="dock-item2" href="#"><span>Links</span><img src="images/link.png" alt="links" /></a> 75 <a class="dock-item2" href="#"><span>RSS</span><img src="images/rss.png" alt="rss" /></a> 76 <a class="dock-item2" href="#"><span>RSS2</span><img src="images/rss2.png" alt="rss" /></a> 77 </div>78 79 </div>80 81 <!--dock menu JS options -->82 83 84 </script>85 </body>86 </html>87 Este ShareCode tiene versiones:
- CSS Dock Menu $(document).re... (24/04/2013)
- CSS Dock Menu $(document).re... (24/04/2013)
- CSS Dock Menu $(document).re... (24/04/2013)
- CSS Dock Menu $(document).re... (24/04/2013)
Enlace
El enlace para compartir es: