Страница 1 из 1

Меню на jQuery

СообщениеДобавлено: 10 ноя 2009, 21:43
Lucifer
Всем здрасти. Вот имеем меню на mootools http://demo.rockettheme.com/oct09
Пробовал сам переделать на jQuery. Не получилось.:(
Обыскал гугл и яндекс, ничего подобного не встретил.
Помогите пожалуйста это меню сделать на jQuery.

Re: Меню на jQuery

СообщениеДобавлено: 10 ноя 2009, 23:02
admin
Главное начать!
Код: Выделить всё
;(function( $ ){
//меню...
})( jQuery );

Re: Меню на jQuery

СообщениеДобавлено: 11 ноя 2009, 08:46
Lucifer
Главное начать! Я только и начинаю по миллиметру вникать в jQuery. Как мне подсказали, достаточно взять библиотеки mootools и в ней поменять все $ на jQuery. Бред или нет? Пробовал, не вышло. Искал готовое решение jQ - не нашел. вот и обратился сюда. С чего начать? Можно объяснить, если у кого свободное время есть? Спасибо.

Re: Меню на jQuery

СообщениеДобавлено: 11 ноя 2009, 15:06
admin
Если бы все меняли $ на jQuery какой толк был бы от jQuery. Над Вами посмеялись $ и jQuery - псевдонимы. Функции у mootools и jQuery разные, хотя и делают одинаковое. Такое меню Вам на форуме ни кто не будет делать, у самого времени мало. Тем более меню платное я код даже не нашёл. А делать его не сложно, возни много. Начинайте с функций jquery: offset(), position(), height(), width(), mouseover(), mouseout(), animate().

Re: Меню на jQuery

СообщениеДобавлено: 11 ноя 2009, 19:08
Lucifer
Я понимаю, что никто делать не будет. :) А код мутулза у меня есть. Осталось перелопатить его в jQ. Чтож, буду сам пробовать.

Re: Меню на jQuery

СообщениеДобавлено: 22 ноя 2009, 01:40
Местный
В большинстве случаев переделать не получается, лучше самому заново написать.

Re: Меню на jQuery

СообщениеДобавлено: 25 ноя 2009, 01:58
asptema
предлагаю начать вот с этого кода...
Код: Выделить всё
<script type="text/javascript">
$(document).ready(function(){
    $('.topmenu ul li').hover(
        function() {
            $(this).addClass("active");
            $(this).find('ul').stop(true, true);
            $(this).find('ul').slideDown();
        },
        function() {
            $(this).removeClass("active");
            $(this).find('ul').slideUp('slow');
        }
    );
});

$(document).ready(function(){

   $("ul.subnav").parent().append("<span></span>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
   
   $("ul.topnav li span").click(function() { //When trigger is clicked...
      
      //Following events are applied to the subnav itself (moving subnav up and down)
      $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

      $(this).parent().hover(function() {
      }, function(){   
         $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
      });

      //Following events are applied to the trigger (Hover events for the trigger)
      }).hover(function() {
         $(this).addClass("subhover"); //On hover over, add class "subhover"
      }, function(){   //On Hover Out
         $(this).removeClass("subhover"); //On hover out, remove class "subhover"
   });

});
</script>

<style type="text/css">
body {
   margin: 0 auto;
   padding: 0;
   width: 520px;
   font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
   outline: none;
}
.topmenu ul, .topmenu ul li{
   margin: 0;   
   padding: 0;   
   display: inline;
   margin-right:2px;
}
.topmenu ul li {
   float: left;
   position:relative;   
   width:140px;
}
.topmenu ul li a{
   display: block;
   padding:10px 10px 10px 30px;
   
    margin:1px 0px;
   color: #0000FF;
   text-decoration: none;   
   border:1px solid #999;
    white-space: nowrap;
}
.topmenu ul li a:HOVER{
   color: #0000CC;
}

.topmenu ul li ul {
    display: none;
    position:absolute;
    top:36px;
}

.topmenu ul li ul li {
    display:block;   
    border-top:0px;
}
.active {
    background-color:#eee;
}
</style>
</head>
<body>
    <div class="topmenu">
        <ul>
            <li><a href="#" title="Меню 1">Меню 1</a>
                <ul>
                  <li><a href="#" title="Элемент 1.1">Элемент 1.1</a></li>
                  <li><a href="#" title="Элемент 1.2">Элемент 1.2</a></li>
                  <li><a href="#" title="Элемент 1.3">Элемент 1.3</a></li>
               </ul>
            </li>
            <li class="drop"><a href="#" title="Меню 2">Меню 2</a>
                <ul>
                  <li><a href="#" title="Элемент 2.1">Элемент 2.1</a></li>
                  <li><a href="#" title="Элемент 2.2">Элемент 2.2</a></li>
                  <li><a href="#" title="Элемент 2.3">Элемент 2.3</a></li>
               </ul>
            </li>
            <li class="drop"><a href="#" title="Меню 3">Меню 3</a>
                <ul>
                  <li><a href="#" title="Элемент 3.1">Элемент 3.1</a></li>
                  <li><a href="#" title="Элемент 3.2">Элемент 3.2</a></li>
                  <li><a href="#" title="Элемент 3.3">Элемент 3.3</a></li>
               </ul>
            </li>
        </ul>       
    </div>
</body>
</html>

Re: Меню на jQuery

СообщениеДобавлено: 25 ноя 2009, 13:11
admin
Похоже, но там (http://demo.rockettheme.com/oct09) другой эффект при скрытии субменю, похоже не slideDown(), а animate() со скрытием.