Когда-то давно когда я был маленьким и ходил под стол я наткнулся на статью . Мне она показалась довольно таки интересной и полезной (питательной и вкусной - прим.голодного ред.). Тут же рядом я наткнулся на ещё одну статью .
На тот момент у меня стояла задача создать меню, похожее на то, что предложено во второй статье. Но его некоторая багнутость и абсолютное позиционирование заставили меня от неё отказаться. В итоге я придумал способ, который мне позволил добиться приблизительно того, чего я хочу.
Смысл прост - при наведении я хотел бы, чтобы цвет надписи плавно менялся. И я решил слегка сбоку подойти к примеру из первой статьи. В статье будет рассмотрен первый вариант, где цвет кнопок разный, поскольку из него одинаковый цвет сделать не составит труда=).
Как работает скрипт
Суть работы скрипта прост: в каком-то блоке при наведении ездит бэкграунд - туда-сюда. В оригинале статьи рассматривались различные виды бэкграундов и какие они эффекты делали в блоке с надписью - то есть кнопке меню. Я использовал блок, в котором лежит картинка (и блок и картинка одинакового размера), часть которой сделана прозрачной, а прозрачна именно сама текстовая надпись.
Сам скрипт представляет собой мини-дополнение к библиотеке jQuery и имеет название Background-Position Animations. Скачать его можно либо у меня в разделе скачки.
Верстаем будущее меню jQuery
<ul id="gallery">
<li>
<a href="#"><img src="images/but_gallery.png" width="117" height="117"></a>
</li>
</ul>
<ul id="process">
<li>
<a href="#"><img src="images/but_process.png" width="124" height="117"></a>
</li>
</ul>
<ul id="about">
<li>
<a href="#"><img src="images/but_about.png" width="127" height="117"></a>
</li>
</ul>
<ul id="resume">
<li>
<a href="#"><img src="images/but_resume.png" width="105" height="117"></a>
</li>
</ul>
<ul id="blog">
<li>
<a href="#"><img src="images/but_blog.png" width="80" height="117"></a>
</li>
</ul>
</div>
В принципе ничего сложного. В общем контейнере hor_buttons заложено меню в стиле списка. Каждому пункту меню соответствует свой идентификатор (gallery, process и пр.), внутри которого лежит ссылка с изображением кнопки (рис. справа; обратите внимание на полупрозрачность надписи).
Теперь займёмся стилями.
IMG {border: 0;}
#hor_buttons {
float:left;
height:117px;
}
#hor_buttons ul {list-style:none;float:left;}
#hor_buttons li {margin:0;padding:0;text-align:center;}
#hor_buttons li a {
display:block;
padding:0px;
cursor:pointer;
color:#FFF;
text-decoration:none;
border-right:1px solid #bdc0c6;
}
#hor_buttons #gallery a {background:url('images/bg_gallery.png');}
#hor_buttons #process a {background:url('images/bg_process.png');}
#hor_buttons #about a {background:url('images/bg_about.png');}
#hor_buttons #resume a {background:url('images/bg_resume.png');}
#hor_buttons #blog a {background:url('images/bg_blog.png');}
-
Строки 1-6. Чисто оформительские. Первая строка сбрасывает настройки отступов на странице, вторая строка сбрасывает окантовку изображений на нулевую, а 3-6 строки указывают для блока меню его положение и высоту.
-
Строка 7. Настройка пункта меню. Обращаю внимание на флоат. Если его убрать, то меню будет не горизонтальное, а вертикальное.
-
Строка 8. Как дополнение к 7 строке. В данном случае она неактуальна, поскольку отступы уже сброшены, а текста у нас в блоке нет, то есть выравнивать нам нечего.
-
Строки 9-16. Настройка непосредственно ссылок. Первые три правила обязательны, особенно курсор, поскольку в некоторых браузерах он остаётся "стрелочкой", а нужен "ручечкой". 13-15 строки чисто оформительские.
-
Строки 17-21. Добавление каждой определённой ссылке своего бэкграунда.
Встраиваем jQuery и запускаем скрипт меню
Не забудем подключить библиотеки на страницу. Как правило это делается в шапке сайта, а если говорить правильно, то в теге head.
<script type="text/javascript" src="js/jquery.bgpos.js"></script>
А теперь где-нибудь на странице надо добавить, скажем так, код активации меню. Обычно такие коды добавляют где-то рядом с тем местом, где сделана анимация.
$(function(){
$('#hor_buttons a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -250px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:500})
})
});
</script>
Код достаточно простой, использует базовые команды. Изменению подлежат только 3 строке (где указывается имя селектора, с которым будут производиться махинации), 6 и 10 строках, где указана скорость перемещения бэкграунда и длина перемещения.
В завершении
Собственно всё. Остаётся только дальше включать фантазию и придумывать способы использования перемещающегося бэкграунда. И кстати, в данном примере не забывайте использовать плагин, который заставляет работать прозрачность PNG в IE6. Ведь, как вы помните, прозрачность там не работает.=)
А полученный результат вы сможете посмотреть по ссылке.
(голосов: 2, средний: 5.00 из 5)Похожие записи:
- Красивое раскрывающееся меню на jQuery
- Как сделать кнопку "наверх" как вКонтакте
- Как определить "разрешение экрана" и "размер окна браузера" на JavaScript и jQuery
- Скрипт меню с контентом “почти как флэш” своими руками. Часть 1. Вёрстка.
- Свойства CSS3! Часть 1. text-shadow: 15 способов применения, кроссбраузерность
Загрузка ...
18/12/2009 at 12:10 Постоянная ссылка Цитировать
Отличное решение, и работает вроде как безбагово и везде. Респект!
19/12/2009 at 0:22 Постоянная ссылка Цитировать
Большое спасибо, рад слышать=)
24/01/2010 at 14:16 Постоянная ссылка Цитировать
Меню супер, но выглядит не красиво, но это уже дело юзера =)
24/01/2010 at 14:31 Постоянная ссылка Цитировать
как это – супер, но некрасиво?=)
вообще чем нравится мне это решение, так это тем, что позволяет очень простым способом разнообразить внешний вид сайта. тут по принципу – лучше с анимацией, чем просто картинки непонятные. да и смотрится, я считаю=)
09/02/2010 at 12:37 Постоянная ссылка Цитировать
Спасибо супер!
09/02/2010 at 12:40 Постоянная ссылка Цитировать
пожалуйста =)
22/05/2010 at 15:07 Постоянная ссылка Цитировать
Статья очень понравилась, спасибо! Думаю применю скрипт в ближайшем проекте.
04/06/2010 at 19:02 Постоянная ссылка Цитировать
You’re welcome! Не забудьте подписаться на RSS за обновлениями =)
14/07/2010 at 12:44 Постоянная ссылка Цитировать
А можно как нить соединить плавную смену фона как тут ( 3ий пример ) и плавную смена цвета шрифта как у вас. Я хочу получить в итоге, что бы при нажатие на меню плавно менялся цвет фона и цвет шрифта.
14/07/2010 at 18:15 Постоянная ссылка Цитировать
слишком сложно и вычурно. не думаю что будет смотреться.
если оно очень надо, я бы сделал смену бэкграунда из примера и привязал бы к надписи стили CSS3 – там как раз можно плавное изменение цвета делать.
14/07/2010 at 18:19 Постоянная ссылка Цитировать
Ох! Это было бы просто великолепно )
14/07/2010 at 18:23 Постоянная ссылка Цитировать
Скоро пару статей по цсс3 и хтмл5 сделаю, там про это будет
14/07/2010 at 23:47 Постоянная ссылка Цитировать
Спасибо, буду ждать )
09/02/2011 at 2:16 Постоянная ссылка Цитировать
Здравствуйте, а можете мне плиз помочь кое в чем, сделал все как описано, но почему -то не работает, просто у кнопки сразу определенный фон и все.
в хедере head.tpl.html подключил так:
<script type="text/javascript" src="data/{$smarty.const.TPL}/jquery.js"></script><script type="text/javascript" src="data/{$smarty.const.TPL}/jquery.bgpos.js"></script>
09/02/2011 at 10:37 Постоянная ссылка Цитировать
если хтмл и цсс прописаны, то как вариант скрипты неправильно подключены и нужно проверить путь к ним.
а ещё – если вы используете smarty, то он не любит когда скрипты не подключены отдельными файлами и когда код жабаскрипта расположен непосредственно на странице шаблона. выход один – вывести код в отдельный файл и подключить его.
09/02/2011 at 13:33 Постоянная ссылка Цитировать
Огромное спасибо, наконец-то нашел адекватный блог. Пойду зарегестрируюсь теперь, Вы меня спасли.
проблема была в след, в Smarty, ява-скрипт ставиться в {literal}{/literal} ну я его вставил через:
{php}include_once("./core/php/nav.php");
{/php}
Огромное Вам спасибо.
09/02/2011 at 13:41 Постоянная ссылка Цитировать
Всегда пожалуйста. Буду рад видеть в постоянных подписчиках =)
Да, я помню, что в литерал засовывал жабакод, но он всё равно не работал, поэтому в отдельный файл засовывал и всё было хорошо. Так что вот, стоит иметь в виду и такое =)
06/03/2011 at 23:18 Постоянная ссылка Цитировать
Мне нужен плагин как на этом сайте:
или как здесь
из имеющихся у вас..не нашел именно такого.((
06/03/2011 at 23:01 Постоянная ссылка Цитировать
Приветствую!
Весь интернет обыскал один плагин и вот последняя надежда была на этом ресурсе..но и здесь нет вот этой карусельки: jQuery Plugin Carousel
v.0.2 – подскажите где найти такой плагин..?
06/03/2011 at 23:14 Постоянная ссылка Цитировать
Вечер добрый!
Вообще-то есть –
И там несколько каруселек можно найти. Конечно с момента написания статьи прошло время и что-то вышло ещё, но и из того что есть можно выбрать.
07/03/2011 at 14:12 Постоянная ссылка Цитировать
Тогда вот, что могу посоветовать.
и тут под 3 номером