Создаем меню в стиле Mac

Главная

Статьи

Верстка сайтов

18.08.2008 18:06

Думаю это меню понравится фанатам Mac, да и не только им.

Для того что бы его создать нам понадобится javascript-библиотека JQuery и компонент Fisheye, а также некоторое количество иконок.
В данном примере попробуем создать два меню: верхнее и нижнее.
1. Для начала определим стили:

Код

/*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%; 

}

Само собой разумеется, что стили дело сугубо индивидуальное и зависит от Вашего дизайна, поэтому не будем уделять этому особое внимание.

2. Затем между тегами <head> подключаем скрипты и стили.

<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.

3. Теперь в любом месте внутри тега <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>

4. Что бы добавить пункт меню вставляем следующий код:
Добавляем в верхнее меню:

<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
Демо-версия
Источник на англ. языке - http://www.ndesign-studio.com/blog/mac/css-dock-menu