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

Меню на jQuery

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

Меню на jQuery

Сообщение Lucifer » 10 ноя 2009, 21:43

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

Re: Меню на jQuery

Сообщение admin » 10 ноя 2009, 23:02

Главное начать!
Код: Выделить всё
;(function( $ ){
//меню...
})( jQuery );
admin
Администратор
 
Сообщения: 165
Зарегистрирован: 15 авг 2009, 20:02

Re: Меню на jQuery

Сообщение Lucifer » 11 ноя 2009, 08:46

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

Re: Меню на jQuery

Сообщение admin » 11 ноя 2009, 15:06

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

Re: Меню на jQuery

Сообщение Lucifer » 11 ноя 2009, 19:08

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

Re: Меню на jQuery

Сообщение Местный » 22 ноя 2009, 01:40

В большинстве случаев переделать не получается, лучше самому заново написать.
Местный
 

Re: Меню на jQuery

Сообщение asptema » 25 ноя 2009, 01:58

предлагаю начать вот с этого кода...
Код: Выделить всё
<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>
asptema
 
Сообщения: 4
Зарегистрирован: 22 ноя 2009, 17:31

Re: Меню на jQuery

Сообщение admin » 25 ноя 2009, 13:11

Похоже, но там (http://demo.rockettheme.com/oct09) другой эффект при скрытии субменю, похоже не slideDown(), а animate() со скрытием.
admin
Администратор
 
Сообщения: 165
Зарегистрирован: 15 авг 2009, 20:02


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

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

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

cron