Может быть вы знакомы с плагином jQuery Dock, который позволяет разработчику создавать меню, похожие на Apple Dock. В данном уроке мы создадим подобные меню с эффектом пузырька используя только CSS. Конечно, в нашем меню эффект не будет таким плавным, как при использовании jQuery Dock, но он может быть очень полезным в том случае, если есть желание сделать отличное меню с использованием только CSS. Урок описывает два метода: CSS спрайты (основной) и переключение изображений (дополнительный).
Метод 1: CSS спрайты
Использование CSS спрайтов является самым простым методом для реализации эффекта пузырька. Вам только нужно изменить фоновое изображение - и все.
Но ваш HTML код должен выглядеть так:
<ul id="bubble">
<li>
<a class="icon feed" href="http://feeds2.feedburner.com/prlamnguyen" title="RSS">RSS</a>
</li>
<li>
<a class="icon email" href="http://feedburner.google.com/fb/a/mailverify?uri=prlamnguyen&loc=en_U" title="Подписка через Emal">Подписка через email</a>
</li>
<li>
<a class="icon twitter" href="http://twitter.com/prlamnguyen" title="Twitter">Twitter</a>
</li>
<li>
<a class="icon facebook" href="http://facebook.com/duylamng" title="Facebook">Facebook</a>
</li>
<li>
<a class="icon delicious" href="http://delicious.com/save" title="Delicious">Delicious</a>
</li>
<li>
<a class="icon technorati" href="http://technorati.com/quot title="Technorati">Technorati</a>
</li>
</ul>
После подготовки изображений, спрайт должен выглядет так:
Подготовка изображения для спарйта css
А вот код CSS, который нужен для формирования списка меню и фоновых изображений ссылок по умолчанию:
#bubble {
list-style: none;
margin: 0px;
padding: 0px;
}
#bubble li {
display: inline-block;
margin: 0px;
padding: 0px;
}
#bubble li a.icon {
background: url(images/sprites.png) no-repeat;
border: none;
display: block;
width: 128px;
height: 128px;
text-indent: -9999px;
}
Очень важо при использовании CSS спрайтов вычислять размеры фоновых изображений. Нужно получать точные значения в пикселах. Смотрите на рисунок выше. Чтобы изменить фоновое изображение для элемента ссылки, используйте код CSS, приведенный ниже.
#bubble li a.feed {
background-position: -139px -12px;
}
#bubble li a.feed:hover {
background-position: -13px -12px;
}
#bubble li a.email {
background-position: -139px -149px;
}
#bubble li a.email:hover {
background-position: -13px -149px;
}
#bubble li a.twitter {
background-position: -139px -283px;
}
#bubble li a.twitter:hover {
background-position: -13px -283px;
}
#bubble li a.facebook {
background-position: -139px -422px;
}
#bubble li a.facebook:hover {
background-position: -13px -422px;
}
#bubble li a.delicious {
background-position: -139px -559px;
}
#bubble li a.delicious:hover {
background-position: -13px -559px;
}
#bubble li a.technorati {
background-position: -139px -698px;
}
#bubble li a.technorati:hover {
background-position: -13px -698px;
}
Вот и весь метод 1: очень простой и легкий. Теперь рассмотрим метод 2 - переключение изображений.
Метод 2: переключение изображений
Для этого метода нужно больше HTML кода и меньше CSS кода. Так как мы используем 2 изображения для каждой ссылки код HTML будет выглядеть вот так:
<ul id="bubble2">
<li>
<a href="http://feeds2.feedburner.com/prlamnguyen" title="RSS">
<img class="small" src="images/feed.png" alt="RSS" />
<img class="large" src="images/feed_large.png" alt="RSS" />
</a>
</li>
<li>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=prlamnguyen&loc=en_U" title="Подписка через email">
<img class="small" src="images/email.png" alt="Подписка через email" />
<img class="large" src="images/email_large.png" alt="Подписка через email" />
</a>
</li>
<li>
<a href="http://twitter.com/prlamnguyen" title="Twitter">
<img class="small" src="images/twitter.png" alt="Twitter" />
<img class="large" src="images/twitter_large.png" alt="Twitter" />
</a>
</li>
<li>
<a href="http://facebook.com/duylamng" title="Facebook">
<img class="small" src="images/facebook.png" alt="Facebook" />
<img class="large" src="images/facebook_large.png" alt="Facebook" />
</a>
</li>
<li>
<a href="http://delicious.com/save" onclick="window.open('http://delicious.com/save?v=5&noui&jump=close&url=http://aext.net&title=AEXT.NET', 'delicious','toolbar=no,width=550,height=550'); return false;" title="Delicious">
<img class="small" src="images/delicious.png" alt="Delicious" />
<img class="large" src="images/delicious_large.png" alt="Delicious" />
</a>
</li>
<li>
<a href="http://technorati.com/faves?sub=addfavbtn&add=http://aext.net" title="Technorati">
<img class="small" src="images/technorati.png" alt="Technorati" />
<img class="large" src="images/technorati_large.png" alt="Technorati" />
</a>
</li>
</ul>
В данном методе мы внесем несколько изменений. Эффект всплытия размещает всплывающую кнопку поверх всех остальных. Разница между методом 1 и методом 2 заключается в том, что сейчас нужно установить высоту и ширину элемента <li>. Почему? Потому что нужно избежать смещения и изменения размера списка, когда курсор мыши находится на нем. Код CSS для списка:
#bubble2 {
list-style: none;
margin: 20px 0px 0px;
padding: 0px;
}
#bubble2 li {
display: inline-block;
margin: 0px 5px;
padding: 0px;
width: 72px;
height: 72px;
}
72px - это размер маленького изображения. Вы можете его сделать больше, но не слишком большим.
Код CSS:
#bubble2 li a img {
position: relative;
border: none;
}
#bubble2 li a img.large {
display: none;
}
#bubble2 li a:hover img.small {
display: none;
z-index: 0;
}
#bubble2 li a:hover img.large {
display: block;
margin-top: -28px;
margin-left: -28px;
z-index: 1000;
}
Нужно установить свойство position изображения в relative (относительно), так как мы устанавливаем z-index для больших изображений, когда курсор мыши находится над ними, а z-index работает только при условии свойства position в значении relative или absolute.
Изменение оригинального изображения
Когда курсор мыши находится над изображением, мы устанавливаем для поля значение -28px, так как при увеличении изображения нужно, чтобы большая картинка имела тот же центр, что и маленькая. Это очень важно для того, чтобы сделать качественный эффект увеличения. Количество пикселей вычисляется как: margin-top= – (высота большого изображения – высота маленького изображения)/2 and margin-left= – (ширина большого изображения – ширина маленького изображения)/2.
В завершении нужно добавить код к HTML файлу для исправления списка в IE:
<!--[if IE 7]>
<style type="text/css">
#bubble li, #bubble2 li {
display: inline;
}
</style>
<![endif]-->
Резюме.
Вы также можете использовать z-index в методе 1. Данный урок просто разделяет два метода, так, чтобы вам было удобно выбрать. Метод 1 содержит больше кода CSS и меньше кода HTML, а метод 2 - наоборот.