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

Разметка HTML
Структура меню будет построена на основании неупорядоченного списка:

<div class="jimgMenu">
  <ul>
    <li class="landscapes"><a href="#nogo">Ландшафты</a></li>
    <li class="people"><a href="#nogo">Люди</a></li>
    <li class="nature"><a href="#nogo">Природа</a></li>
    <li class="abstract"><a href="#nogo">Абстракция</a></li>
    <li class="urban"><a href="#nogo">Город</a></li>
  </ul>
</div>

CSS

.jimgMenu {
    position: relative;
    width: 670px;
    height: 200px;
    overflow: hidden;
    margin: 25px 0px 0px;
}
 
.jimgMenu ul {
    list-style: none;
    margin: 0px;
    display: block;
    height: 200px;
    width: 1340px;
     
    }
 
.jimgMenu ul li {
    float: left;
}
 
.jimgMenu ul li a {
    text-indent: -1000px;
    background:#FFFFFF none repeat scroll 0%;
    border-right: 2px solid #fff;
    cursor:pointer;
    display:block;
    overflow:hidden;
    width:78px;
    height: 200px;
}
 
.jimgMenu ul li.landscapes a {
    background: url(images/landscapes.jpg) repeat scroll 0%;
}
 
.jimgMenu ul li.people a {
    background: url(images/people.jpg) repeat scroll 0%;
}
 
.jimgMenu ul li.nature a {
    background: url(images/nature.jpg) repeat scroll 0%;
}
.jimgMenu ul li.abstract a {
    background: url(images/abstract.jpg) repeat scroll 0%;
}
 
.jimgMenu ul li.urban a {
    background: url(images/urban.jpg) repeat scroll 0%;
    min-width:310px;
     
}

JavaScript
В раздел head страницы нужно включить jQuery и все плагины, необходимые для работы меню:

<link href="css/jimgMenu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>

А затем добавить код для активации нашего меню:

<script type="text/javascript">
$(document).ready(function () {
 
  // Находим элементы для меню и устанавливаем для них обработчик события
  $('div.jimgMenu ul li a').hover(function() {
     
    // Если элемент анимируется в текущий момент
    if ($(this).is(':animated')) {
      $(this).stop().animate({width: "310px"}, {duration: 450, easing:"easeOutQuad"});
    } else {
      // Раскрываем элемент
      $(this).stop().animate({width: "310px"}, {duration: 400, easing:"easeOutQuad"});
    }
  }, function () {
    // При наведении курсора мыши в другое место, сворачиваем элемент
    if ($(this).is(':animated')) {
      $(this).stop().animate({width: "78px"}, {duration: 400, easing:"easeInOutQuad"})
    } else {
      // Сворачиваем элемент
      $(this).stop('animated:').animate({width: "78px"}, {duration: 450, easing:"easeInOutQuad"});
    }
  });
});
</script>

Вариант два
Для второго варианта используем плагин jQuery Kwick, который добавляет функционала к нашему меню.

HTML
Разметка остается такой же, за исключением использования атрибута id вместо класса для пунктов меню:

<div class="jimgMenu_2">
  <ul>
    <li id="landscapes"><a href="#nogo">Ландшафт</a></li>
    <li id="people"><a href="#nogo">Люди</a></li>
    <li id="nature"><a href="#nogo">Природа</a></li>
    <li id="abstract"><a href="#nogo">Абстракция</a></li>
    <li id="urban"><a href="#nogo">Город</a></li>
  </ul>
</div>

CSS
Код CSS немного модифицирован для использования плагина Kwick.

.jimgMenu_2 {
    position:relative;
    margin: 0px 0px 0px 50px;
    padding: 0px;
    width:475px;
    height:200px;
    overflow: hidden;
}
 
.jimgMenu_2 ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: block;
    height: 200px;
    position: relative;
    }
     
.jimgMenu_2 ul li {
    width: 95px;
    float: left;
    display: block;
    overflow: hidden;
}
 
.jimgMenu_2 ul li a {
    text-indent: -1000px;
    background:#fff repeat scroll 0%;
    border-right: 2px solid #fff;
    cursor:pointer;
    display:block;
    overflow: hidden;
    height: 200px;
}
 
.jimgMenu_2 ul li#landscapes a {
    background: url(images/landscapes.jpg) repeat scroll 0%;
   
}
 
.jimgMenu_2 ul li#people a {
    background: url(images/people.jpg) repeat scroll 0%;
 
}
 
.jimgMenu_2 ul li#nature a {
    background: url(images/nature.jpg) repeat scroll 0%;
   
}
 
.jimgMenu_2 ul li#abstract a {
    background: url(images/abstract.jpg) repeat scroll 0%;
 
}
 
.jimgMenu_2 ul li#urban a {
    background: url(images/urban.jpg) repeat scroll 0%;
    border-right-style: none;
}

JavaScript
В раздел head страницы нужно вставить библиотеку jQuery и все плагины, которые используются для меню:

<link href="css/jimgMenukwicks.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-easing-1.3.pack.js"></script>
<script type="text/javascript" src="js/jquery-easing-compatibility.1.2.pack.js"></script>
<script type="text/javascript" src="js/jquery.kwicks-1.5.1.pack.js"></script>

Остается только активировать плагин для работы нашего меню:

<script type="text/javascript">
$().ready(function() {
    $('.jimgMenu_2 ul').kwicks({max: 310, duration: 300, easing: 'easeOutQuad', complete: 'callback'});
    });
</script>

Добавлено: 26 Апреля 2018 19:47:54 Добавил: Андрей Ковальчук Нравится 0

Добавить