Динамическое меню

[Владимир Миронов]

Заметил на одном SEO форуме

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

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

Ещё интересно узнать, как сделать динамическое меню, чтобы при наведении на пункт меню сразу выпадало столбиком под меню с пунктами?

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

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

 

[Hope]

js:

(function(e){e.fn.lavaLamp=function(t){t=e.extend({fx:"linear",speed:500,click:function(){}},t||{});return this.each(function(){function a(e){i.css({left:e.offsetLeft+"px",width:e.offsetWidth+"px"});u=e}function f(n){i.each(function(){e.dequeue(this,"fx")}).animate({width:n.offsetWidth,left:n.offsetLeft},t.speed,t.fx)}var n=e(this),r=function(){},i=e('<li class="back"><div class="left"></div></li>').appendTo(n),s=e("li",this),u=e("li.selected",this)[0]||e(s[0]).addClass("selected")[0];s.not(".back").hover(function(){f(this)},r);e(this).hover(r,function(){});e(document).click(function(t){if(e(t.target).closest(".publicTabs").length)return;f(u)});s.click(function(e){f(u)});a(u);})}})(jQuery)

Вызов:

<script>
    $(document).ready(function(){
        $('body').ready(function () {
            $(this).find('.navTab' + '.selected').addClass('hover');
        });
        $('.navTab').hover(function () {
            $(this).addClass('hover');
            $(this).siblings('.navTab').removeClass('hover');
        });
        $(document).click(function(event) {
            $(this).find('.navTab').removeClass('hover');
            $(this).find('.navTab' + '.selected').addClass('hover');
        });

        $('.navLink').click(function(e) {
            e.stopPropagation();
        });
        $('.tabLinks a').click(function(e) {
            e.stopPropagation();
        });

        $('.navLink').mouseover(function () {
            $(this).closest('.navTab').addClass('mouseover');
        });
        $('.navLink').mouseout(function () {
            $(this).closest('.navTab').removeClass('mouseover');
        });

        $('.publicTabs').lavaLamp({
            fx: 'easeOutBack',
            speed: 800
        });

        $('#ft_year').text( (new Date).getFullYear() );

        $('.QuickReplyInsertUsername').click(function () {
            $('html, body').animate({scrollTop:$('#QuickReply').position().top}, 'slow');
        });
    });
    </script>

Дальше правка css и шаблонов, короче муторно.

 

[Time]

Можно чуть подробнее как сделать показ подменю при наведении на вкладку?