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

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

Admin
18 августа 2008

В данном примере попробуем создать два меню: верхнее и нижнее. Для начала определим стили.

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

css-dock-menu.zip 208 Кб (67 скачиваний)

Комментарии 0

Новый комментарий

Для редактирования комментария осталось 10 минут

Комментарии отсутствуют