Slyweb
На разработку сайта! Скидки 50%!

Как сделать меню

Вы можете задавать любые вопросы по jQuery.

Как сделать меню

Сообщение Narahon » 16 фев 2013, 19:07

Здравствуйте! ПОМОГИТЕ с решением проблемы, не могу переделать меню в горизонтальное положение, jQuery только начал осваивать. Делал вот по этому уроку, но здесь вертикальное меню:
http://ruseller.com/lessons.php?rub=32&id=1043
Надеюсь на вашу помощь, заранее спасибо!
Narahon
 
Сообщения: 2
Зарегистрирован: 16 фев 2013, 19:06

Re: Как сделать меню

Сообщение admin » 17 фев 2013, 10:44

Код: Выделить всё
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://ruseller.com/lessons/les1043/demo/" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8;charset=utf-8" />
<title>Вертикальное прокручивающееся меню | Демонстрация для сайта RUSELLER.COM</title>
<style type="text/css">
body {
   background: #0F0D0D;
   padding: 30px 0 0 50px; color:#FFFFFF;
}
div.sc_menu_wrapper {
   position: relative;    
   height: 120px;
   /* Делаем больше, чем фотография, так как нужно место для полоски прокрутки. */
   width: 560px;
   
   margin-top: 30px;
   overflow: hidden;
}
div.sc_menu {
   padding: 15px 0;
   width:1500px;
}
.sc_menu a {
   display: block;
   margin-bottom: 5px;
   width: 130px;
   float:left;
   border: 2px rgb(79, 79, 79) solid;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;      
   
   /* Когда нет изображений */
   color: #fff;
   background: rgb(79, 79, 79);   
}
.sc_menu a:hover {
   border-color: rgb(130, 130, 130);
   border-style: dotted;
}
.sc_menu img {
   display: block;
   border: none;
}

.sc_menu_wrapper .loading {
   position: absolute;
   top: 50px;
   left: 10px;
   
   margin: 0 auto;
   padding: 10px;

   width: 100px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;   
   
   text-align: center;
   color: #fff;
   border: 1px solid rgb(79, 79, 79);
   background: #1F1D1D;
}
/* Стили для подсказок */
.sc_menu_tooltip {
   display: block;
   position: absolute;
   
   padding: 6px;
   font-size: 12px;   
   color: #fff;
   
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;   
   
   border: 1px solid rgb(79, 79, 79);
   background: rgb(0, 0, 0);
   /* Делаем фон немного прозрачным для браузеров, которые поддерживают rgba */   
   background: rgba(0, 0, 0, 0.5);
}
</style>
<script src="images/jquery.min.js" type="text/javascript"></script>
<script type= "text/javascript">/*<![CDATA[*/

function makeScrollable(wrapper, scrollable){
   // Получаем элементы jQuery
   var wrapper = $(wrapper), scrollable = $(scrollable);
   
   // Скрываем изображения, пока они не загружены
   scrollable.hide();
   var loading = $('<div class="loading">Загрузка...</div>').appendTo(wrapper);
   
   // Запускаем фукнцию, которая проверяет загрузку всех изображений
   var interval = setInterval(function(){
      var images = scrollable.find('img');
      var completed = 0;
      
      // Подсчитываем количество загруженных изображений
      images.each(function(){
         if (this.complete) completed++;   
      });
      
      if (completed == images.length){
         clearInterval(interval);
         // Таймаут добавлен для устранения проблем с Chrome
         setTimeout(function(){
            
            loading.hide();
            // Удаляем полоску прокрутки
            wrapper.css({overflow: 'hidden'});                  
            
            scrollable.slideDown('slow', function(){
               enable();   
            });               
         }, 1000);   
      }
   }, 100);
   
   function enable(){
      // Высота области вверху и внизу, в которой нет реакции на перtмещение курсора мыши
      var inactiveMargin = 99;               
      // Кэшируем параметры для повышения производительности
      var wrapperWidth = wrapper.width();
      var wrapperHeight = wrapper.height();
      // Используем наружнeю высоту для включения отступов
      var scrollableHeight = scrollable.outerWidth() + 2*inactiveMargin;
      // Не будем кэшировать wrapperOffset, так как она поменяется при измении окна просмотра
      // Можно использовать событие onresize, но овчинка не стоит выделки
      // var wrapperOffset = wrapper.offset();
      
      // Создаем невидимую подсказку
      var tooltip = $('<div class="sc_menu_tooltip"></div>')
         .css('opacity', 0)
         .appendTo(wrapper);
   
      // Сохраняем заголовки меню
      scrollable.find('a').each(function(){            
         $(this).data('tooltipText', this.title);            
      });
      
      // Удаляем подсказки по умолчанию
      scrollable.find('a').removeAttr('title');      
      // Удаляем подсказки по умолчанию в IE
      scrollable.find('img').removeAttr('alt');   
      
      var lastTarget;
      //Когда пользователь перемещает курсор мыши по меню
      wrapper.mousemove(function(e){
         // Сохраняем цель
         lastTarget = e.target;

         var wrapperOffset = wrapper.offset();
      
         var tooltipLeft = e.pageX - wrapperOffset.left;
         // Не даем подсказке выходить за рамки меню.
         // Так как свойство overflow имеет значение hidden, мы не сможем их увидеть.
         tooltipLeft = Math.min(tooltipLeft, wrapperWidth - 75);
         
         var tooltipTop = 10;
         // Перемещаем подсказку под курсор мыши, когда мы находимся в верхней части меню
         if (e.pageY - wrapperOffset.left < wrapperHeight/2){
            tooltipTop += 0;
         }      
         
         tooltip.css({top: tooltipTop, left: tooltipLeft});            
         
         // Прокручиваем меню
         var top = (e.pageX -  wrapperOffset.left) * (scrollableHeight - wrapperWidth) / wrapperWidth - inactiveMargin;
         if (top < 0){
            top = 0;
         }         
         wrapper.scrollLeft(top);
      });
      
      // Устанавливаем интервал, который помогает решить проблему производительтности в IE
      var interval = setInterval(function(){
         if (!lastTarget) return;   
                              
         var currentText = tooltip.text();
         
         if (lastTarget.nodeName == 'IMG'){               
            // Данные привязываются к ссылке, а не к изображению
            var newText = $(lastTarget).parent().data('tooltipText');

            // Выводим подсказку с новым текстом
            if (currentText != newText) {
               tooltip
                  .stop(true)
                  .css('opacity', 0)   
                  .text(newText)
                  .animate({opacity: 1}, 1000);
            }               
         }
      }, 200);
      
      // Скрываем подсказку, когда курсор мыши покидает меню
      wrapper.mouseleave(function(){
         lastTarget = false;
         tooltip.stop(true).css('opacity', 0).text('');
      });         
      
      /*
      //Использование события hover приводит к проблемам с производительностью
      scrollable.find('a').hover(function(){
         tooltip
            .stop()
            .css('opacity', 0)
            .text($(this).data('tooltipText'))
            .animate({opacity: 1}, 1000);
   
      }, function(){
         tooltip
            .stop()
            .animate({opacity: 0}, 300);
      });
      */         
   }
}
   
$(function(){   
   makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
});
/*]]>*/</script>
</head>
<body>
<h1>Прокручивающееся вертикальное меню</h1>

<div class="sc_menu_wrapper">
   <div class="sc_menu">
       <a title="Меню" href=""><img src="images/1.jpg" alt="Меню"/></a>
       <a title="Навигация" href=""><img src="images/2.jpg" alt="Навигация"/></a>
      <a title="jQuery" href=""><img src="images/3.jpg" alt="jQuery"/></a>      
       <a title="CSS" href=""><img src="images/4.jpg" alt="CSS"/></a>
       <a title="Вертикаль" href=""><img src="images/5.jpg" alt="Вертикаль"/></a>
       <a title="Меню" href=""><img src="images/1.jpg" alt="Меню"/></a>
       <a title="Навигация" href=""><img src="images/2.jpg" alt="Навигация"/></a>
      <a title="jQuery" href=""><img src="images/3.jpg" alt="jQuery"/></a>
       <a title="Навигация" href=""><img src="images/4.jpg" alt="Навигация" /></a>
      <a title="JavaScript" href=""><img src="images/5.jpg" alt="JavaScript"/></a>
       <a title="Меню" href=""><img src="images/1.jpg" alt="Меню"/></a>
       <a title="Навигация" href=""><img src="images/2.jpg" alt="Навигация"/></a>
       <a title="JavaScript" href=""><img src="images/3.jpg" alt="Javascript"/></a>      
   </div>
</div>
</body>
</html>


admin
Администратор
 
Сообщения: 165
Зарегистрирован: 15 авг 2009, 20:02

Re: Как сделать меню

Сообщение Narahon » 17 фев 2013, 18:05

Спасибо Вам огромное за помощь и труды! Выручили меня, единственное заметил, что подсказка так же уезжает влево, за пределы видимости, но постараюсь сам исправить. Еще раз спасибо!
Narahon
 
Сообщения: 2
Зарегистрирован: 16 фев 2013, 19:06


Вернуться в Вопросы по jQuery

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 2

cron