Думаю это меню понравится фанатам Mac, да и не только им. Для того что бы его создать нам понадобится javascript-библиотека JQuery и компонент Fisheye, а также некоторое количество иконок.
В данном примере попробуем создать два меню: верхнее и нижнее. Для начала определим стили.
/*top menu*/ .dock { position: relative; height: 50px; text-align: center; } .dock-container { position: absolute; height: 50px; background: url(images/dock-bg2.gif); padding-left: 20px; } a.dock-item { display: block; width: 40px; color: #000; position: absolute; top: 0px; text-align: center; text-decoration: none; font: bold 12px Arial, Helvetica, sans-serif; } .dock-item img { border: none; margin: 5px 10px 0px; width: 100%; } .dock-item span { display: none; padding-left: 20px; } /*bottom menu*/ #dock2 { width: 100%; bottom: 0px; position: absolute; left: 0px; } .dock-container2 { position: absolute; height: 50px; background: url(images/dock-bg.gif); padding-left: 20px; } a.dock-item2 { display: block; font: bold 12px Arial, Helvetica, sans-serif; width: 40px; color: #000; bottom: 0px; position: absolute; text-align: center; text-decoration: none; } .dock-item2 span { display: none; padding-left: 20px; } .dock-item2 img { border: none; margin: 5px 10px 0px; width: 100%; }
Само собой разумеется, что стили дело сугубо индивидуальное и зависит от Вашего дизайна, поэтому не будем уделять этому особое внимание.
Затем между тегами <head> подключаем скрипты и стили (Fisheye берем здесь).
<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" /> <!--[if lt IE 7]><style type="text/css"> .dock img { behavior: url('/iepngfix.htc') } </style> <![endif]–>
Последняя часть это PNG-хак для IE 6.0.
Теперь в любом месте внутри тега <body> вставим следующий скрипт, который будет определять конфигурацию нашего меню.
<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>
Чтобы добавить пункт меню вставляем следующий код:
Добавляем в верхнее меню:
<a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>
(тег <span> после тега <img>)
Добавляем в нижнее меню:
<a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a>
(тег <span> перед тегом <img>).
Меню протестированно в следующих браузерах: IE 6, IE 7, Opera 9, Firefox 2, and Safari 2.
© 2008 - 2024 Webmasters.BY Все права защищены
Новый комментарий