|
|
Главная » 2009 » Ноябрь » 5 » Создаем меню в стиле Mac
Создаем меню в стиле Mac | 1:19:32 PM |
Думаю это меню понравится фанатам 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%;
} Само собой
разумеется, что стили дело сугубо индивидуальное и зависит от Вашего
дизайна, поэтому не будем уделять этому особое внимание. 4. Что бы добавить пункт меню вставляем следующий код:
Добавляем в верхнее меню:
<a class= "dock-item" href= "#"><img src= "images/home.png" alt= "home" /><span>Home</span></a>
Добавляем в нижнее меню:
<a class= "dock-item2" href= "#"><span>Home</span><img src= "images/home.png" alt= "home" /></a>
Меню протестированно в следующих браузерах: IE 6, IE 7, Opera 9, Firefox 2, and Safari 2
Демо-версия |
|
Категория: Верстка сайтов |
Просмотров: 938 |
Добавил: scriptozna
| Рейтинг: 5.0/2 |
|
Добавлять комментарии могут только зарегистрированные пользователи. [ Регистрация | Вход ] |
|
|
