Слайд-панели на jQuery

Здравствуйте, дорогие друзья! В сегодняшнем уроке Вы научитесь делать слайд-панели на jQuery. Существует множество подобных слайдов как этот, однако данный слайд привлек мое внимание больше, чем остальные, поскольку при смене вкладок, содержимое этих вкладок плавно изменяется. Для начала посмотрите демонстрацию и скачайте исходники файлов, которые мы будем использовать в ходе данного урока:

Шаг 1. HTML-конструкция панели

Итак, начнем с создания html-каркаса, который будет служить основой для нашего будущего меню. Ниже я привожу пример такого каркаса, который использовал я:

HTML:

<div class="container">  
<div class="TabMenu">   
<span>  <img  src="images/contact.png" />  </span>  <span>  <img  src="images/ipod.png" />  </span>  <span>  <img  src="images/drive.png" />  </span>  </div>  <div class="ContentFrame">  <div  class="AllTabs">  <div  class="TabContent">  <p>  Здесь будет текст  содержимого Вашей первой вкладки   </p>  </div>  <div  class="TabContent">  <p>  Здесь  будет текст содержимого Вашей второй вкладки  </p>    </div>  <div  class="TabContent">  <p>  Здесь  будет текст содержимого Вашей третьей вкладки  </p>  </div>  </div>  </div>  </div>

Шаг 2. Стилизация панели

Отлично! Теперь те стили, которые мы привязывали к элементам панели, мы пропишем между тегами <head> и </head> Ниже я разместил примерный код стилей, который будет применяться в стилизации этого слайда:

CSS:
<style type="text/css">  
body  {  
margin:0;  
padding:0;  
}  
.container{
background:url(images/slideTabbg.png);  
width:388px;  
height:300px;  
overflow:hidden;  
margin:auto;
}
.selector{
background:url(images/selector.png);
}
.hovering{  
background:url(images/selector.png);
opacity:0.5;
}
.container .TabMenu {  
position:  relative;  
top: 5px;  
left: 2px;  
z-index:  10;  
}  
.container  .TabMenu span  {  
display:  inline-block;  
height:  77px;   
margin:  0px;  
padding:0px;  
}  
.container  .ContentFrame  {  
width:  360px;  
height:206px;  
left: 10px;  
position:  relative;  
overflow:hidden;  
}   
.container .ContentFrame .AllTabs  {  
position:  relative;  
left:0px;  
width:  1190px;  
height:  206px;  
overflow:hidden;  
}  
.container .ContentFrame .AllTabs .TabContent  {  
width:360px;  
height:  200px;  
margin-right:20px;  
text-align:  justify;  
float:left;  
overflow:hidden;   
}  
</style>

Шаг 3. Вставка фреймворка jQuery

Теперь главное не забыть привязать основной фреймворк jQuery, поскольку, если мы вставим его позже, наш слайд будет некорректно отображаться. Вставьте его, пожалуйста, также, между тегами <head> и </head> Выглядеть привязка фреймворка будет следующим образом. :
<script type="text/javascript" src="js/jquery.js"></script>

Шаг 4. Вставка JavaScript-кода

Наконец, завершающий и важнейший для работы меню этап. Для правильного отображения мы должны между тегами <head> и </head> прописать следующий небольшой javascript-код:

JavaScript:
<script type="text/javascript">
$(document).ready(function(){
//Инициализация
//Устанавливаем селектор для первой вкладки
$(".container .TabMenu span:first").addClass("selector");												//Базовое действие при наведении мышью
$(".container .TabMenu span").mouseover(function(){					$(this).addClass("hovering");
});
$(".container .TabMenu span").mouseout(function(){					$(this).removeClass("hovering");
});
//Действие при нажатии на вкладку панели
$(".container .TabMenu span").click(function(){
//Удаление существующего селектора					$(".selector").removeClass("selector");
//Добавление стилей селектора
$(this).addClass("selector");										//Установка ширины панели
var TabWidth = $(".TabContent:first").width();					if(parseInt($(".TabContent:first").css("margin-left")) > 0)						TabWidth += parseInt($(".TabContent:first").css("margin-left"));					if(parseInt($(".TabContent:first").css("margin-right")) >0)						TabWidth += parseInt($(".TabContent:first").css("margin-right"));					//Устанавливаем границы скольжения содержимого вкладки
var newLeft = -1* $("span").index(this) * TabWidth;
//Теперь анимируем наше содержимое вкладки					$(".AllTabs").animate({
left: + newLeft + "px"
},1000);
});
});
</script>

Ну, вот и все. Чтобы чуть-чуть улучшить дизайн этой панели, Вы можете еще поиграться немного со стилями и изображениями. Надеюсь, Вам урок понравился, жду Ваших комментариев! Ну а у меня на этом все. С уважением, Ваш jQuery-проводник - М. К.

Добавлено: 10 Мая 2018 07:37:09 Добавил: Андрей Ковальчук

Изменение размеров изображения с помощью jQuery

Добрый день, хочу предложить вам довольно простой, но от этого не менее эффектный урок по изменению размеров картинки с помощью слайдера (бегунка). Для начало давайте разберемся с чем мы будем иметь дело.

Первое с чего стоит начать это подключение JQuery, качаем тут.

Второй шаг подключение jQuery UI - это очень полезная надстройка над JQuery, в данном случае нам необходим виджет Slider. Скачать его можно здесь, главное не забудьте убрать (Deselect all). Все остальные галочки кроме Slider и UI Core, иначе рискуете получить огромный и бесполезный (для данного урока) файл.

В архиве присутствует все необходимое, но все-таки я рекомендую для тестирования использовать мой архив, в котором уже проведена работа по его очистки от лишних стилей и прочих демонстративных файлов.

Подключаем:

<link type="text/css" href="css/slider.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>

HTML разметка нашего документа максимально простая.

Два элемента формы input, в которых будут выводиться данные о размере картинки, а точнее ширина и высота:
<label for="amount">Width:</label>
<input type="text" id="amount" value="" style="border:0; width:30px; 
color:#f6931f; font-weight:bold;" />
<label for="amount2">Height:</label>
<input type="text" id="amount2" value="" style="border:0; width:30px; 
color:#f6931f; font-weight:bold;" />

Собственно сам слайдер (или бегунок, кому как больше нравится)
<div id="slider" style="height:6px; width:220px; "></div>

И конечно изображение над котором мы будем работать (реальный размер изображения 666 x 1000 px )
<div id="images" style="margin-top:40px"><img src="images/anna.jpg" 
width="333" height="500" /></div>

Внимание! При добавлении картинки обязательно необходимо прописывать у нее атрибуты width и height.

Теперь сам JQuery:
<script type="text/javascript">
$(function() {
var width = $("#images img").attr("width");
var height = $("#images img").attr("height");
z = width/height;
$("#slider").slider({
orientation: "horizontal",
min: 100,
max: 666,
value: width,
slide: function(event, ui) {
y = Math.round(ui.value/z);
$("#amount").val(ui.value);
$("#amount2").val(y);
$('#images img').width(ui.value);
$('#images img').height(y);
}
});
$("#amount").attr('value',width);
$("#amount2").attr('value',height);
});
</script>

Давайте по порядку разберемся, что же мы сделали:
var width = $("#images img").attr("width");
var height = $("#images img").attr("height");

- с помощью команды attr() получаем значение атрибутов нашей картинки width и height и присваиваем их соответствующим переменным.
z = width/height;

- определяем соотношение сторон картинки - ширины к высоте. Это поможет нам правильно пропорционировать ее на страничке.
$("#slider").slider({

привязываем виджет Slider к html разметки, а конкретно к нашему <div id="slider">
orientation: "horizontal",
min: 100,
max: 666,
value: width,

- настраиваем слайдер под наши требования:
orientation – положение на странице, может принимать два значения "horizontal" и "vertical"
min и max - минимальное и максимальное значения шкалы (задать можно любое, при реальном использовании на сайте рекомендую привязать его к максимальному размеру картинки)
value - определяет первоначальное положение бегунка, присваиваем ему значение переменной width (а вообще это может быть любое числовое значение в пределах min и max)
slide: function(event, ui) {

- события на которые реагирует бегунок
y = Math.round(ui.value/z);

- так как ui.value - текущее значение на опции value, а оно привязано к атрибуту width (ширина картинки), то для определения высоты нам необходимо провести простое арифметическое действие поделить текущее значение widht на z, которая как вы помните является соотношением сторон картинки. И округляем полученное значение с помощью функции Math.round.
$("#amount").val(ui.value);
$("#amount2").val(y);

- команда val() применяется для получения доступа к значениям из элементов формы.
$('#images img').width(ui.value);
$('#images img').height(y);

- тут самое главное, изменяем ширину и высоту самой картинки прямо на странички при помощи команд width() и height()
$("#amount").attr('value',width);
$("#amount2").attr('value',height);

- и наконец для визуального просмотра размера картинки меняет значения value в элементах формы на соответствующие, то есть ширину и высоту, при необходимости данные о выставленных размерах можно отправлять на сервер для дальнейшей обработки.

При желании можно добавить немного php кода, для получения данных о размере фото при ее загрузки и тогда получиться довольно универсальный скрипт.
Собственно все, спасибо за внимание, надеюсь урок вам пригодиться.

Урок от нашего читателя - Максима Чагина. В источнике к уроку просил указать, видимо, его сайт.

Добавлено: 10 Мая 2018 06:57:53 Добавил: Андрей Ковальчук

Неплохой эффект для картинок с помощью jQuery

В данном уроке мы создадим эффект с зумом и выезжающими описаниями.

Подобные решения мы уже представляли на нашем сайте. Но это уникально тем, что совмещает в себе 2 эффекта сразу. При наведении мышки на изображение, оно приближается и снизу выезжает его описание.

Давайте посмотрим как это реализовать!

HTML

<!-- начало thumbnailWrapper div -->

<div class='thumbnailWrapper'>
<ul>
<li>

<a href='#'><img src='images/1.jpg' /></a>
<div class='caption'>
<p class='captionInside'>CofeeNerd</p>
</div>
</li>

<li>
<a href='#'><img src='images/2.jpg' /></a>
<div class='caption'>
<p class='captionInside'>musiKings</p>
</div>
</li>
				
<li>
<a href='#'><img src='images/3.png' /></a>
<div class='caption'>
<p class='captionInside'>The Caribbean Energy</p>
</div>
</li>

<div class='clear'></div>
</ul><!-- конец неупорядоченного списка -->

</div><!-- конец spolightWrapper div -->

В HTML коде ничего особенного. В демо версии у нас будет 9 элементов списка. в то время как здесь представлено 3. Это сделано в целях экономии места. Там все так же по аналогии.

CSS
.thumbnailWrapper ul {
list-style-type: none; /* убрать стиль типа списка по умолчанию 
items (the circles) */
margin:0px; /* убрать margin по умолчанию */
padding:0px; /* убрать padding по умолчанию */
}
.thumbnailWrapper ul li {
float:left; /* важно: left float */
position:relative; /* чтобы мы могли использовать top и left позиционирование */
overflow:hidden; /* спрятать контент за границами 
(ZOOM) */
}
.thumbnailWrapper ul li a img {
width:200px; /* не важно, картинки, которые мы используем слишком велики 
*/
position:relative; /* чтобы мы могли использовать top и left позиционирование */
border:none; /* убрать синюю границу по умолчанию */
}
.caption{
position:absolute; /* необходимо для позиционирования */
bottom:0px; 
left:0px; 
width:100%; 
display:none; 
			
background:#0c4b62;
color:white;
opacity:0.9;
}
.caption .captionInside{
		
padding:10px;
margin:0px;
}
.clear { clear:both; }

jQuery
$(window).load(function(){

//задаем некоторые переменные
var thumbnail = {
imgIncrease : 100, /* увеличение изображения в пикселях для зума */
effectDuration : 400, /* продолжительность эффекта для зума и надписи */

/*
Взять ширину и высоту изображений. Используется для 2-х вещей
1) сделать все элементы списка одного размера 2) вернуть изображения
к первоначальным размерам после зума
*/
imgWidth : $('.thumbnailWrapper ul li').find('img').width(),
imgHeight : $('.thumbnailWrapper ul li').find('img').height()


};


//Элементы списка того же размера, что и изображения
$('.thumbnailWrapper ul li').css({ 


'width' : thumbnail.imgWidth,
'height' : thumbnail.imgHeight 


});


//при наведении мышки на элемент...
$('.thumbnailWrapper ul li').hover(function(){


$(this).find('img').stop().animate({


/* увеличить ширину изображения для зума*/
width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
/* нам необходимо изменить левое и верхнее позиционирование
для зума, и поэтому мы придаем им отрицательные значения
 */
left: thumbnail.imgIncrease/2*(-1),
top: thumbnail.imgIncrease/2*(-1)

},{ 


"duration": thumbnail.effectDuration,
"queue": false


});

//показать надпись с помощью события slideDown
$(this).find('.caption:not(:animated)').slideDown(thumbnail.effectDuration);


//когда мышку уводят...
}, function(){


//найти изображение и анимировать его...
$(this).find('img').animate({


/* вернуть первоначальный размер */
width: thumbnail.imgWidth,
/* get left and top positions back to normal */
left: 0,
top: 0

}, thumbnail.effectDuration);

//спрятать надпись с помощью события slideUp
$(this).find('.caption').slideUp(thumbnail.effectDuration);

});
});

Вот и все готово. В коде находятся комментарии по функциям и событиям.

Надеюсь, Вам этот урок понравился и Вы будет использовать подобные миниатюры на Вашем сайте. очень эффектно такое будет смотреться на страничке с клиентами. Например, "наши клиенты" и снизу их логотипы с зумом и названием в виде выезжающей надписи.

Добавлено: 10 Мая 2018 06:44:50 Добавил: Андрей Ковальчук

Фокусируем внимание на изображении с помощью jQuery

Вдогонку за предыдущим уроком представляю Вашему вниманию еще один интересный эффект с изображениями.

Это решение идеально подойдет для разного рода портфолио. С помощью нескольких строк кода можно сделать так, чтобы посетитель не отвлекался на другие изображения при просмотре Ваших работ.

Давайте начнем творить!

HTML

<!-- начало spotlightWrapper div -->
<div class='spotlightWrapper'>
<!-- начало неупорядоченного списка -->
<ul>
<li><a href='#'><img src='images/1.jpg' /></a></li>
<li><a href='#'><img src='images/2.jpg' /></a></li>
<li><a href='#'><img src='images/3.png' /></a></li>
<li><a href='#'><img src='images/4.jpg' /></a></li>
<li><a href='#'><img src='images/5.jpg' /></a></li>
<li><a href='#'><img src='images/6.png' /></a></li>
<li><a href='#'><img src='images/7.jpg' /></a></li>
<li><a href='#'><img src='images/8.jpg' /></a></li>
<li><a href='#'><img src='images/9.PNG' /></a></li>
<li><a href='#'><img src='images/10.jpg' /></a></li>
<li><a href='#'><img src='images/11.png' /></a></li>
<li><a href='#'><img src='images/12.png' /></a></li>
<li><a href='#'><img src='images/13.jpg' /></a></li>
<li><a href='#'><img src='images/14.png' /></a></li>
<li><a href='#'><img src='images/15.jpg' /></a></li>
<li><a href='#'><img src='images/16.jpg' /></a></li>
<div class='clear'></div>
</ul>
<!-- конец неупорядоченного списка -->
</div>
<!-- конец spolightWrapper div -->

В HTML коде все очень просто. У нас есть обертка с классом spotlightWrapper. Внутри находится неупорядоченный список, который содержит элементы списка с анкорами и изображениями.

CSS
.spotlightWrapper ul {
list-style-type: none; 
margin:0px; 
padding:0px; 
}
.spotlightWrapper ul li {
float:left; /* важно: left float */
}
.spotlightWrapper ul li a img {
width:200px; 
position:relative; 
border:none;
}
.spotlightWrapper ul li a img.active {
border:4px solid white; /* тут можно задать стиль границы при выделении */
z-index:1; /* показ над остальными изображениями (у них z-index 0) */
left: -4px; 
top: -4px;
}
.clear { clear:both; }

В CSS также ничего экстраординарного. Класс active будет принадлежать изображению при наведении на него мышкой. И не забудьте, чтобы Ваши значения left и top имели одинаковые значения с border-width, но со знаком "-".

jQuery
$(window).load(function(){
var spotlight = {
// прозрачность изображений - можно менять
opacity : 0.2,

/*переменные ниже для ширины и высоты изображений, чтобы 
наши <li> были одного размера */
imgWidth : $('.spotlightWrapper ul li').find('img').width(),
imgHeight : $('.spotlightWrapper ul li').find('img').height() 

};

//укажите ширину и высоту элементов списка такую же, как у изображений
$('.spotlightWrapper ul li').css({ 'width' : spotlight.imgWidth, 'height' : spotlight.imgHeight });

//при наведении мышки...
$('.spotlightWrapper ul li').hover(function(){

//...найти изображение и добавить активный класс к нему и поменять прозрачнось на 1
$(this).find('img').addClass('active').css({ 'opacity' : 1});

//взять другие элементы списка и поменять их прозрачность
$(this).siblings('li').find('img').css({'opacity' : spotlight.opacity}) ;

//при отводе мышки...
}, function(){

//... найти изображение и убрать класс active
$(this).find('img').removeClass('active');

});

//когда мышка покидает весь список...
$('.spotlightWrapper ul').bind('mouseleave',function(){
//сделать все изображения полностью видимыми
$(this).find('img').css('opacity', 1);
});

});

Этот код может показаться Вам сложным, но на самом деле это не так.

Вместо $(document).ready мы используем $(window).load для того, чтобы все изображения успели загрузки перед запуском jQuery.

Вот и все готово! Еще один интересный эффект можно добавить в нашу копилку jQuery решений для сайтов.

Добавлено: 09 Мая 2018 19:42:06 Добавил: Андрей Ковальчук

Суперэффект для просмотра миниатюр с помощью jQuery

Сегодня в уроке Вы узнаете как с помощью CSS и jQuery сделать небольшую галерею с очень красивым эффектом при наведении на миниатюру.

Данный эффект очень похож на Flash анимацию и сможет украсить любой сайт.

Приступим!

jQuery

Вставляем следующий код между тегами <head></head>. Не забываем про правильный путь к фреймворку.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function(){
//Увеличение при наведении 
$("ul.thumb li").hover(function() {

    $(this).css({'z-index' : '10'});
    $(this).find('img').addClass("hover").stop()
    .animate({
    marginTop: '-110px', 
    marginLeft: '-110px', 
    top: '50%', 
    left: '50%', 
    width: '174px', 
    height: '174px',
    padding: '20px' 
    }, 200);
  
    } , function() {
    $(this).css({'z-index' : '0'});
    $(this).find('img').removeClass("hover").stop()
    .animate({
    marginTop: '0', 
    marginLeft: '0',
    top: '0', 
    left: '0', 
    width: '100px', 
    height: '100px', 
    padding: '5px'
    }, 400);
    }); 
//Смена изображения при клике
    $("ul.thumb li a").click(function() {
  
    var mainImage = $(this).attr("href"); //Find Image Name
    $("#main_view img").attr({ src: mainImage });
    return false; 
    });
  
    });
  </script>

Данная функция работает с размерами миниатюр и при наведении мышкой запускает красивый эффект.

CSS

Далее идут стили оформления. Стили можно вставить как в сам документ, так и вынести в отдельный файл.
<style type="text/css">
    body {
font: Arial, Helvetica, sans-serif normal 10px;
margin: 0; padding: 0;
}
* {margin: 0; padding: 0;}
img {border: none;}
.container {
height: 360px;
width: 910px;
margin: -180px 0 0 -450px;
top: 50%; left: 50%;
position: absolute;
}
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
-ms-interpolation-mode: bicubic; 
}
ul.thumb li img.hover {
background:url(thumb_bg.png) no-repeat center center;
border: none;
}
#main_view {
float: left;
padding: 9px 0;
margin-left: -10px;
}
</style> 

HTML

Все картинки необходимо оформить списком вот таким образом:
<div class="container">
  <ul class="thumb">
 <li><a href="main_image1.jpg"><img src="thumb1.jpg" alt="" /></a></li>
  <li><a href="main_image2.jpg"><img src="thumb2.jpg" alt="" /></a></li>
  <li><a href="main_image3.jpg"><img src="thumb3.jpg" alt="" /></a></li>
  <li><a href="main_image4.jpg"><img src="thumb4.jpg" alt="" /></a></li>
  <li><a href="main_image5.jpg"><img src="thumb5.jpg" alt="" /></a></li>
  <li><a href="main_image6.jpg"><img src="thumb6.jpg" alt="" /></a></li>
  <li><a href="main_image7.jpg"><img src="thumb7.jpg" alt="" /></a></li>
  <li><a href="main_image8.jpg"><img src="thumb8.jpg" alt="" /></a></li>
  <li><a href="main_image9.jpg"><img src="thumb9.jpg" alt="" /></a></li>
</ul>
  <div id="main_view">
  <a href="http://www.ruseller.com" title="Ruseller.com" target="_blank"><img src="main_image1.jpg" alt="" /></a><br />
 </div>
  </div>

В HTML коде также есть пути к картинкам - не забывайте про них!

Удачного всем дня! Жду Ваших комментариев :).

Добавлено: 09 Мая 2018 19:34:06 Добавил: Андрей Ковальчук

Оформляем углы блоков при помощи jQuery

В этой статье мы научимся делать столь популярные и модные в настоящее время закругленные углы у блоков без использования картинок. В этом нам поможет скрипт corner и библиотека jQuery.

Шаг 1.

Скачаем и подключим к документу необходимые для работы скрипты.

<script type="text/javascript" src="jquery1.3.1.js"></script>
        <script type="text/javascript" src="corner.js"></script>

Шаг 2.

Вставим между тегами <head> следующий скрипт:
<script type="text/javascript">
$('#readyTest').corner();
$(function(){
$('div.demo').each(function() {
var t = $('p', this).text();
eval(t);
});
});
</script>

Шаг 3.

В таблицу CSS добавим следующие стили (или пропишем их между тегами <head>):
h1 { padding: 10px; margin: 0; font-size: large }
          div.demo  { width: 18em; padding: 20px; margin: 1em; background: #6af; }
          PRE {
          DISPLAY: none
        }

Шаг 4.

В нужном нам месте вставим код блока:
<div class="demo"><h1>Ваш текст</h1><pre><code><p>$(this).corner();</p></code></pre></div>

Готово!

Добавлено: 09 Мая 2018 19:27:27 Добавил: Андрей Ковальчук

Просмотр видео в модальных окнах

В этом уроке пойдет речь о том, как предоставить Вашим посетителям просмотр видео в модальных окнах.

Это существенно сэкономить свободное место на странице, так как видео ролики не будут видимыми. Они будут появляться только при нажатии на ссылку. Кроме это у данного плагина есть возможность группировки видео по категориям.

Первый шаг - как обычно. Подключаем все необходимо е в шапке.

<script src="js/jquery-1.3.min.js" type="text/javascript"></script>
         <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />

По аналогии с прошлым уроком, вставляем ссылку на видео с атрибутом rel="prettyPhoto".
<a href="http://movies.apple.com/movies/wb/terminatorsalvation/terminatorsalvation-tlr3_h.480.mov?width=480&amp;height=204" rel="prettyPhoto[trailers]">Трейлер №1</a>

И после ссылки инициализируем скрипт таким вот образом:
<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){
			$("a[rel^='prettyPhoto']").prettyPhoto();
		});
	      </script>

Как я уже говорил выше можно объединить несколько видео в одном модальном окне с возможностью перехода с одного на другое специальными кнопками. Для этого достаточно в атрибуте rel="prettyPhoto" добавить в квадратных скобках ([]) общие название. Например для видео трейлеров комедий можно написать rel="prettyPhoto[comedy]".

Данный плагин можно использовать практически для чего угодно (флеш, изображений, других сайтов, галлерей или всего вместе). Достаточно только добавлять необходимый атрибут к ссылкам.

Вот и все! всего хорошего Вам, уважаемые посетители.

Добавлено: 09 Мая 2018 19:25:46 Добавил: Андрей Ковальчук

Центрирование Div-а по горизонтали и вертикали

В этой короткой заметке Вы узнаете о нескольких способах центрирования объектов на странице по вертикали и горизонтали.

При создании веб страничек Вы, наверняка, сталкивались с ситуацией когда необходимо какой-нибудь объект разместить в самом центре. Существует множество путей решения этой проблемы.

Начнем с основ:

.className{
	margin:0 auto;
	width:200px;
	height:200px;
}

Для центрирования по горизонтали Вам необходимо задать ширину, а также значение auto для левого и правого отступа (тут мы используем сокращенную запись CSS). Этот способ работает с блочными элементами (div, p, h1, прочее...). Для инлайновых (ссылки и изображения) элементов Вам необходимо добавить еще одно правило - display:block.

Выравнивание по горизонтали и вертикали

Центрирование в обоих направлениях осуществить немного сложнее. Вам необходимо знать заранее точные размеры объекта.
.className{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
}

Позиционируя объект абсолютно, мы можем "вырвать" его из страницы и задать для него позицию по отношению к браузеру. Достаточно указать 50% для значений left и top и объект будет находится по центру. Единственное, что нам необходимо сделать, это передвинуть объект на половину высоты и ширины влево и вверх, чтобы он был в самом центре.

Горизонтальное и вертикальное выравнивание с помощью jQuery

Как указывалось ранее - метод CSS прекрасно работает с объектами с известными размерами. Если их нет, тогда нам пригодится jQuery.
$(window).resize(function(){

	$('.className').css({
		position:'absolute',
		left: ($(document).width() - $('.className').outerWidth())/2,
		top: ($(document).height() - $('.className').outerHeight())/2
	});

});

// Для запуска функции:
$(window).resize();

Весь функционал встроен в функцию $(window).resize(), которая выполняется при каждом изменении окна браузера. Мы используем outerWidth() и outerHeight(), так как в отличии от width() и height(), они берут во внимание ширину отступов и границ.

Большой плюс данного метода заключается в том, что Вам не обязательно знать размер объекта.

Надеюсь, Вам это пригодится!

Добавлено: 09 Мая 2018 18:09:33 Добавил: Андрей Ковальчук

Плавающее сообщение вверху Вашего сайта.

В этом уроке мы сделаем плавающее сообщение вверху Вашей страницы, которое можно использовать для информирования посетителей о чем-либо или еще как-то по-другому, в зависимости от Вашей фантазии.

Закрывается такое сообщение нажатием на крестик с эффектом анимации на jQuery.

Чтобы увидеть пример такого сообщения нажмите на картинку ниже.

Шаг 1.

Скачаем изображение крестика и скрипт jQuery, который подключим к нашему документу.

<script type="text/javascript" src="jQuery1.2.6.js"></script>

Шаг 2.

Между тегами <head> пропишем следующий код:
<script type="text/javascript" language="javascript">

        $(document).ready(function()

        {

        $(window).scroll(function()

        {

        $('#message_box').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350}); 

        });

        $('#close_message').click(function()

        {

        $('#message_box').animate({ top:"+=15px",opacity:0 }, "slow");

        });

        });

  </script>

Шаг 3.

В таблицу стилей или в сам документ пропишем следующие стили для плавающего сообщения:
#message_box { 

position: absolute; 

top: 0; left: 0; 

z-index: 10; 

background:#ffc;

padding:5px;

border:1px solid #CCCCCC;

text-align:center; 

font-weight:bold; 

width:99%;

}

Шаг 4.

Документ будет иметь структуру, состоящую из двух блоков <div>. В одном из них будет отображаться сообщение, а в другом будет содержаться весь остальной контент страницы.

Таким образом, код будет выглядеть так:
<div id="message_box"><img id="close_message" style="float:right;cursor:pointer"  src="cross.png" />Здесь Ваше сообщение</div>

<div style="margin-top:50px">

  Здесь остальное содержание Вашей страницы

  </div>

Второму блоку я добавил отступ сверху в 50 px, чтобы плавающее сообщение не наезжало на контент, но можно обойтись и без этого отступа, т.к. при закрытии сообщения контент будет полностью виден.

Добавлено: 09 Мая 2018 18:07:44 Добавил: Андрей Ковальчук

Выезжающая снизу панель на jQuery

Данный урок расскажет Вам о том, как сделать выезжающую панель внизу страницы с помощью jQuery.

Теперь давайте переместим эту панель в нижнюю часть страницы.

Подключаем фреймворк и все необходимые скрипты между тегами <head></head>:

<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
      <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script>
      $(document).ready(function() {
      var easing_type = 'easeOutBounce';
      var default_dock_height = '40';
      var expanded_dock_height = $('#dock').height();
      var body_height = $(window).height() - default_dock_height;
      $('#fake-body').height(body_height);
      $('#dock').css({'height': default_dock_height, 'position':'absolute', 'top': body_height});
      $(window).resize(function () {
      updated_height = $(window).height() - default_dock_height;
      $('#fake-body').height(updated_height); 
      $('#dock').css({'top': updated_height});
      });
      $('#dock').mouseover(function () {
      expanded_height = $(window).height() - expanded_dock_height;
      $(this).animate({'height':expanded_dock_height,'top': expanded_height},{queue:false, duration:800, easing: easing_type});
      }).mouseout(function () {
      body_height = $(window).height() - default_dock_height;
      $(this).animate({'height':default_dock_height,'top': body_height},{queue:false, duration:800, easing: easing_type});
      });
      });
      </script>

Не забываем про стили оформления:
<style>
      
      body {
      margin:0; 
      padding:0
      }
#fake-body {
      overflow:auto;
      z-index:1;
      }
#dock {
      background:#ccc url(bg.gif) repeat-x;
      height:200px;
      z-index:100;
      width:100%;
      }
</style>

И теперь давайте взглянем на структуру тела документа. Обязательно необходимо все содержание тега <body> поместить в слой с id="fake-body". Без этого панель будет неправильно отображаться.
<div id="fake-body">
 <!-- Put your entire website in this section -->
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  </div>    
<div id="dock">
  <!-- Put your dock in this section -->
  </div>

По-моему, вышло неплохо! До следующих уроков!

Добавлено: 09 Мая 2018 17:57:37 Добавил: Андрей Ковальчук

Развертывание рядов таблицы с помощью jQuery

Сегодня очень интересный урок, который научит Вас делать красивый эффект по развертыванию рядов таблицы.

Данная функция поможет Вам более компактно группировать данные в таблице, а также экономить место на странице. С помощью такого плагина в таблице может находиться больше полезной информации: картинки, ссылки, диаграмы и другие элементы.

Как это работает?

Для правильной работы для каждой записи нам необходимо зарезервировать два ряда. Первый ряд будет главным, а второй будет отображать детали. Ряд с деталями сворачивается\разворачивается при нажатии на главный ряд.

Реализация

Как обычно в самом начале выполняем все необходимые подключения скриптов: фреймворк и вспомогательный скрипт, который делает эффектны возможными.

<script src="jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">  
        $(document).ready(function(){
            $("#report tr:odd").addClass("odd");
            $("#report tr:not(.odd)").hide();
            $("#report tr:first-child").show();
            
            $("#report tr.odd").click(function(){
                $(this).next("tr").toggle();
                $(this).find(".arrow").toggleClass("up");
            });
            //$("#report").jExpand();
        });
    </script>  

Теперь создаем таблицу. как говорилось выше должен быть один главный ряд, и один вспомогательный. В примере ниже рассмотрен пример со страной США. Есть главный ряд, и вспомогательный, в котором находятся изображения и ссылки на другие ресурсы. Очень важный момент: вспомогательный ряд имеет параметр colspan="5". Это важно.
<table id="report">
        <tr>
            <th>Country</th>
            <th>Population</th>
            <th>Area</th>
            <th>Official languages</th>
            <th></th>
        </tr>
        <tr>
            <td>United States of America</td>
            <td>306,939,000</td>
            <td>9,826,630 km2</td>
            <td>English</td>
            <td><div class="arrow"></div></td>
        </tr>
        <tr>
            <td colspan="5">
                <img src="125px-Flag_of_the_United_States.svg.png" alt="Flag of USA" />
                <h4>Additional information</h4>
                <ul>
                    <li><a href="http://en.wikipedia.org/wiki/Usa">USA on Wikipedia</a></li>
                    <li><a href="http://nationalatlas.gov/">National Atlas of the United States</a></li>
                    <li><a href="http://www.nationalcenter.org/HistoricalDocuments.html">Historical Documents</a></li>
                 </ul>   
            </td>
        </tr>
...
...
...
</table>

Для правильной работы нам также понадобятся следующие стили:
<style type="text/css">
body { font-family:Arial, Helvetica, Sans-Serif; font-size:0.8em;}
#report { border-collapse:collapse;}
#report h4 { margin:0px; padding:0px;}
#report img { float:right;}
#report ul { margin:10px 0 10px 40px; padding:0px;}
#report th { background:#7CB8E2 url(header_bkg.png) repeat-x scroll center left; color:#fff; padding:7px 15px; text-align:left;}
#report td { background:#C7DDEE none repeat-x scroll center left; color:#000; padding:7px 15px; }
#report tr.odd td { background:#fff url(row_bkg.png) repeat-x scroll center left; cursor:pointer; }
#report div.arrow { background:transparent url(arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
#report div.up { background-position:0px 0px;}
</style>

Их можно как подключить к странице, так и вынести в отдельный файл.

По моему, вышла очень интересная таблица.

Пользуйтесь! Всего наилучшего!

Добавлено: 09 Мая 2018 17:39:00 Добавил: Андрей Ковальчук

Как написать свое API

В этой статье я хочу рассказать о том, как можно написать api для своего сервиса. Сделаем сервис по проверки корректности e-mail адреса. То есть, мы будем вызывать нашу api функцию, передавать ей параметр, в данном случае e-mail, а в ответ api должно вернуть результат проверки или код ошибки.
Для начала нужно определиться, что и как будет отвечать api. Я думаю, самый простой способ сделать ответ в формате JSON. А возвращать будем ассоциативный массив, состоящий из трех массивов: status, response и error. Status может иметь только два значения, OK и ERROR – это будет обозначать, как прошло обращение к api. Error – тут мы будем передавать числовой код ошибки, если ошибки нет, то передавать будем 0. Response – этот массив будет хранить интересующий ответ: true – если, e-mail адрес корректный или false, если e-mail не корректный.
В теории, надеюсь все ясно, теперь непосредственно код. Создадим скрипт api.php:

<?php
$status = 'OK';
$response = null;
$error = 0;
if(!isset($_GET['email'])){ // если не получили параметр
    $status = 'ERROR';
    $error = 1;
}else{
    $email = $_GET['email'];
    if(preg_match("|^[-0-9a-z_\.]+@[-0-9a-z_^\.]+\.[a-z]{2,6}$|i", $email)){ // проверяем корректрость e-mail
        $response = true;
    }else{
        $response = false;
    }
}
// массив для ответа
$result = array(
    'status' => $status,
    'response' => $response,
    'error' => $error,
);
echo json_encode($result); // ответ в формате json
?>

Все, наше api готова, теперь попробуем сделать вызов нашей api функции, для этого создадим скрипт api_test.php
<?
$email = 'test@test.ru';
$resp = file_get_contents('http://myService.ru/api.php?email='.$email);
$data = json_decode($resp, true);
if($data['status']=='OK'){
    if($data['response']){
        echo 'E-mail корректный';
    }else{
        echo 'E-mail НЕ корректный';
    }
}else{
    echo 'Код ошибки: '.$data['error'];
}
?>

В скрипте мы пробовали вызывать api в php скрипте, но также можно сделать вызов с помощью java script
<script type="text/javascript">
var email = "test@test.ru";
$.ajax({
    url: 'http://myService.ru/api.php?email='+email,
    dataType : "json",
    success: function (data) {
        console.log(data);
        if(data['status'] == 'OK'){
            if(data['response'] === true){
                alert('e-mail корректный');
            }else{
                alert('e-mail НЕ корректный');                  
            }
        }
    }               
});
</script>

Добавлено: 09 Мая 2018 17:29:34 Добавил: Андрей Ковальчук

Подсказки к файлам на jQuery

Здравствуйте. Сегодня мы будем делать еще один вид подсказок для страниц сайта. Однако в этом случае наша подсказка будет отличаться от предыдущих своих аналогов тем, что она будет содержать в себе специальную информацию о файле, на который мы наводим курсор и, возможно, хотим скачать его. Ниже вы можете просмотреть демонстрацию получившейся у меня подсказки и скачать исходные файлы урока:

Шаг 1. Основная конструкция всплывающей подсказки

Итак, займемся созданием такой подсказки с особым эффектом появления. Для начала нам нужно открыть файл, в котором будет располагаться такая подсказка или создать новый HTML-документ. Далее мы просто вставим следующий код между тегами <body> и </body> , который нам будет служить основой для всплывающей подсказки:

HTML:

<div  class="bubbleInfo">
<div>
<img class="trigger"  src="images/dl_image.png" id="download" />
</div>
<table id="dpop" class="popup">
<tbody><tr>
<td  id="topleft" class="corner"></td>
<td  class="top"></td>
<td  id="topright" class="corner"></td>
</tr>
<!--Здесь будет содержимое вашей подсказки  -->
<tr>
<td  class="corner" id="bottomleft"></td>
<td  class="bottom"><img width="30" height="29"  alt="popup tail"  
   src="images/bubble-tail2.png"/></td>
<td  id="bottomright" class="corner"></td>
</tr>
</tbody></table>
</div>

Здесь мы создали таблицу со столбцами и строками, которая будет основой нашей всплывающей подсказки.

Шаг 2. Создание содержимого для подсказки.

Здесь мы, наконец, впишем содержимое нашей подсказки, которое будет отображаться при наведении на нее курсора. Вы можете придумать абсолютно любой код или взять мой и изменить его, но принцип работы должен оставаться тот же. Для того чтобы узнать куда поместить код содержимого подсказки вернитесь назад, к предыдущему коду, и там, где находится комментарий вставьте следующий код в своем документе:

HTML:
<tr>
<td  class="left"></td>
<td><table class="popup-contents">
<tbody><tr>
<th>Файл:</th>
<td>codapub.zip</td>
</tr>
<tr>
<th>Дата:</th>
<td>04/06/09</td>
</tr>
<tr>
<th>Размер:</th>
<td>~ 180 КБ</td>
</tr>
<tr>
<th>ОС:</th>
<td>Любая</td>
</tr> 
<tr  id="download">
<th></th>
<td><a title="Скачать"  href="#">Скачать</a></td>
</tr>
</tbody></table>
</td>
<td  class="right"></td> 
</tr>

Шаг 3. Стилизация подсказки.

Основная часть завершена, теперь нам остается немного изменить, а в некоторых местах и придать стиль нашей всплывающей подсказке. Ниже я разместил код, который следует вставить между тегами <head> и </head> , а если у Вас есть своя таблица стилей и она подключена к данному файлу с подсказкой, то можете вставлять его туда. Итак, вот код:

CSS:
<style  type="text/css" media="screen">
<!--
   * {
   margin: 0;
   padding: 0;
   }
   
   body {
   padding: 10px;
   }
    
   .bubbleInfo {
   position: relative;
   top: 150px;
   left: 100px;
   width: 500px;
   }
   .trigger {
   position: absolute;
   }
   
   /* Bubble pop-up */
   .popup {
   position: absolute;
   display: none;
   z-index: 50;
   border-collapse: collapse;
   }
   .popup td.corner {
   height: 15px;
   width: 19px;
   }
   .popup td#topleft { background-image:  url(images/bubble-1.png); }
   .popup td.top { background-image:  url(images/bubble-2.png); }
   .popup td#topright { background-image:  url(images/bubble-3.png); }
   .popup td.left { background-image:  url(images/bubble-4.png); }
   .popup td.right { background-image:  url(images/bubble-5.png); }
   .popup td#bottomleft {  background-image: url(images/bubble-6.png); }
   .popup td.bottom { background-image:  url(images/bubble-7.png); text-align: center;}
   .popup td.bottom img { display: block;  margin: 0 auto; }
   .popup td#bottomright {  background-image: url(images/bubble-8.png); }
   .popup table.popup-contents {
   font-size: 12px;
   line-height: 1.2em;
   background-color: #fff;
   color: #666;
   font-family: "Lucida  Grande", "Lucida Sans Unicode", "Lucida Sans",  sans-serif;
   }
   table.popup-contents th {
   text-align: right;
   
   }
   table.popup-contents td {
   text-align: left;
   }
   
   tr#download th {
   text-align: left;
   text-indent: -9999px;
   background:  url(images/starburst.gif) no-repeat top right;
   height: 17px;
   }
   tr#download td a {
   color: #333;
   }
   -->
</style>

Здесь перечислены все стили, которые мы прикрепляли к нашим таблицам, столбцам, строкам и даже некоторым тегам, таким как, например, <body>.

Шаг 4. jQuery-доработки

Ну, и наконец-то настал заключительный шаг. Чтобы его осуществить, нам понадобится файл с jQuery последней версии. В исходниках я такой файл выложил. Называется он jquery.js. Просто закиньте его в ту папку, где у нас лежит файл с подсказкой. Также нам еще очень понадобится один Javascript, код которого я привел ниже. Вставлять его нужно между тегами <head> и </head>. Именно этот скрипт позволяет нашему окошку плавно появляться и также плавно исчезать.

JAVASCRIPT:
<script  type="text/javascript">
 
   $(function () {
   $('.bubbleInfo').each(function () {
   var distance = 10;
   var time = 250;
   var hideDelay = 500;
   var hideDelayTimer = null;
 var beingShown = false;
   var shown = false;
   var trigger = $('.trigger', this);
   var info = $('.popup',  this).css('opacity', 0);  
 $([trigger.get(0),  info.get(0)]).mouseover(function () {
     if (hideDelayTimer)  clearTimeout(hideDelayTimer);
     if (beingShown || shown) {
     // don't trigger the  animation again
     return;
     } else {
     // reset position of info  box
   beingShown = true;
 info.css({
   top: -90,
   left: -33,
   display: 'block'
   }).animate({
   top: '-=' + distance +  'px',
   opacity: 1
   }, time, 'swing',  function() {
   beingShown = false;
   shown = true;
   });
   }
 return false;
   }).mouseout(function () {
   if (hideDelayTimer)  clearTimeout(hideDelayTimer);
   hideDelayTimer =  setTimeout(function () {
   hideDelayTimer = null;
   info.animate({
   top: '-=' + distance +  'px',
   opacity: 0
   }, time, 'swing', function  () {
   shown = false;
   info.css('display',  'none');
   });
 }, hideDelay); return false;
   });
   });
   });
   //-->
</script>

Ну вот и все! Надеюсь, что Вам очень понравился данный вид всплывающих подсказок, потому что он наиболее важен и полезен на сайтах, чем просто обычные подсказки. Спасибо за внимания, жду Ваших комментариев.

Добавлено: 09 Мая 2018 17:26:38 Добавил: Андрей Ковальчук

Создание и получение вложенных объектов на jQuery

Создание и использование вложенных объектов с помощью указания в виде строки чрезвычайно полезно при работе с динамическими структурами. Не только потому, что отпадает необходимость ручной проверки объекта/свойства, чтобы избежать сообщения об ошибке "{x} is not defined". Если вы создадите свой метод правильно, то сможете устанавливать пустой объект в заданном месте (или пространстве имен) так, что другой пользователь сможет вызвать его. Вот как можно добавить описанный функционал к объекту jQuery.

JavaScript jQuery
Так как философия jQuery заключается в использовании одного и того же метода для получения и установки, мы будем следовать ей при создании нашего метода obj:

(function() {
 
  // Метод для установки и получения объектов, которые могут существовать или нет
  var objectifier = function(splits, create, context) {
    var result = context || window;
    for(var i = 0, s; result && (s = splits[i]); i++) {
      result = (s in result ? result[s] : (create ? result[s] = {} : undefined));
    }
    return result;
  };
 
  // Получаем или устанавливаем объект
  jQuery.obj = function(name, value, create, context) {
    // Установка
    if(value != undefined) {
      var splits = name.split("."), s = splits.pop(), result = objectifier(splits, true, context);
      return result && s ? (result[s] = value) : undefined;
    }
    // Получение
    else {
      return objectifier(name.split("."), create, context);
    }
  };
 
})();

Функция objectifier управляет как получением, так и установкой, в том числе и в заданном контексте (существующий объект). Вот несколько примеров использования метода jQuery.obj:
// Проверяем существование
var moduleNameExists = jQuery.obj("mynamespace.widget.moduleName"); // undefined
 
// Создаем объект
jQuery.obj("mynamespace.widget.moduleName", { prop: 1 }); // mynamespace.widget.moduleName.prop вернет 1
 
// Создаем объект на существующем объекте
jQuery.obj("subnamespace.subModuleName", { someProp: 8 }, true, mynamespace.widget);
  // mynamespace.widget.subnamespace.subModuleName = { someProp: 8 }

Доступ к произвольным объектам с помощью строки позволяет избежать плясок с проверками существования объектов и свойств. Метод objectifier можно добавить к любой библиотеке.

Добавлено: 09 Мая 2018 17:22:31 Добавил: Андрей Ковальчук

Минимальное CSS3 меню

Как вы, наверное, слышали, CSS3 анимации мощный инструмент, который позволяет создавать анимации, которые идут без необходимости применения дополнительных сценариев для страницы. Что еще лучше, в следующем поколении браузеров у нас будут еще более мощные инструменты, в том числе 3D-преобразования (уже есть в Safari).

На данный момент только три браузеры дают вам возможность оживить CSS свойства - Chrome, Safari и Opera, которые в совокупности занимают лишь небольшую часть рынка браузеров. Firefox, как ожидается, в ближайшее время вступить в клуб, и с предстоящим выпуском IE9, он вдруг начнет понимать эту технику.

Так что сегодня мы делаем что-то практичное - простое CSS3 анимированное меню навигации, которая унижает старые браузеры и настроена для работы со следующим поколением браузеров.

XHTML
Как всегда любимая наша разметка. Она довольна проста. Для нужной ссылки просто добавляем класс, и ссылки формируем списком.

demo.html

<ul id="navigationMenu">
    <li>
        <a class="home" href="#">
            <span>Home</span>
        </a>
    </li>

    <li>
        <a class="about" href="#">
            <span>About</span>
        </a>
    </li>

    <li>
         <a class="services" href="#">
            <span>Services</span>
         </a>
    </li>

    <li>
        <a class="portfolio" href="#">
            <span>Portfolio</span>
        </a>
    </li>

    <li>
        <a class="contact" href="#">
            <span>Contact us</span>
        </a>
    </li>
</ul>

CSS
Посколько разметка законечна самое время и начать добавлять css стили. Сначала добавим фон и уберем точки для списка ( ul , li ). Отображаться наше меню будет нормально в Chrome, Safari and Opera
*{
    /* A universal CSS reset */
    margin:0;
    padding:0;
}

body{
    font-size:14px;
    color:#666;
    background:#111 no-repeat;

    /* CSS3 Radial Gradients */
    background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
    background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));

    font-family:Arial, Helvetica, sans-serif;
}

#navigationMenu li{
    list-style:none;
    height:39px;
    padding:2px;
    width:40px;
}

Далее задаем общие стили для всего меню.
#navigationMenu span{
    /* Container properties */
    width:0;
    left:38px;
    padding:0;
    position:absolute;
    overflow:hidden;

    /* Text properties */
    font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
    font-size:18px;
    font-weight:bold;
    letter-spacing:0.6px;
    white-space:nowrap;
    line-height:39px;

    /* CSS3 Transition: */
    -webkit-transition: 0.25s;

    /* Future proofing (these do not work yet): */
    -moz-transition: 0.25s;
    transition: 0.25s;
}

#navigationMenu a{
    /* The background sprite: */
    background:url('img/navigation.jpg') no-repeat;

    height:39px;
    width:38px;
    display:block;
    position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
    text-decoration:none;

    /* CSS outer glow with the box-shadow property */
    -moz-box-shadow:0 0 5px #9ddff5;
    -webkit-box-shadow:0 0 5px #9ddff5;
    box-shadow:0 0 5px #9ddff5;
}

И теперь задаем цвет и иконку для каждого раздела меню. Фон вы можете взять в исходных файлах.
/* Green Button */

#navigationMenu .home {    background-position:0 0;}
#navigationMenu .home:hover {    background-position:0 -39px;}
#navigationMenu .home span{
    background-color:#7da315;
    color:#3d4f0c;
    text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
    background-color:#1e8bb4;
    color:#223a44;
    text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
    background-color:#c86c1f;
    color:#5a3517;
    text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
    background-color:#d0a525;
    color:#604e18;
    text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
    background-color:#af1e83;
    color:#460f35;
    text-shadow:1px 1px 0 #d244a6;
}

Добавлено: 09 Мая 2018 17:01:58 Добавил: Андрей Ковальчук