Скользящий текстовый переключатель меню не вписывается в

0

Я пытаюсь создать меню, которое по элементу наведет ширину слайдов элементов, с фоновым изображением вправо, а текст появится слева. Теперь, когда я это делаю, появление текста выглядит не очень хорошо - текст делает какой-то эффект прыжка. Может ли кто-нибудь помочь мне исправить это меню?

Вот html:

<ul id="menu" align="center">

<a title="Passwords Management" href="admin-passwords-management.php"><li id="menu-item" class="menu-first"><p class="" style="display: none;">Passwords management</p></li></a>
        <li id="menu-item" class="website-not-active"><img src="../dashboard/images/menu2.png"></li>
        <a href="admin-facebook-management.php"><li id="menu-item" class="menu-third"><p class="" style="display: none;">Facebook apps management</p></li></a>
        <a href="admin-email-management.php"><li id="menu-item" class="menu-fourth"><p class="" style="display: none;">Email management</p></li></a>
                <a href="dashboard-billing.php"><li id="menu-item" class="menu-bill"><p class="" style="display: none;">Billing management</p></li></a>
        <a href="dashboard_client_settings.php"><li id="menu-item" class="menu-fifth"><p class="" style="display: none;">Client info</p><!--<img src="../dashboard/images/menu5.png"/>--></li></a>
    </ul>

и JS:

$(".menu-first").on({
    mouseenter: function() {
    $(this).addClass("hover");
    $(".menu-first p").addClass("normal");
    $(".normal").toggle("fast");
    },
    mouseleave: function() {
    $(this).removeClass("hover");
    $(".normal").toggle("fast");
    $(".menu-first p").removeClass("normal");
    }
});

$(".menu-bill").on({
    mouseenter: function() {
    $(this).addClass("hover");
    $(".menu-bill p").addClass("normal");
    $(".normal").toggle("fast");
    },
    mouseleave: function() {
    $(this).removeClass("hover");
    $(".normal").toggle("fast");
    $(".menu-bill p").removeClass("normal");
    }
});

$(".menu-second").on({
    mouseenter: function() {
        $(this).addClass("hover");
    $(".menu-second p").addClass("normal");
    $(".normal").toggle("fast");
$(".menu-second p").fadeIn(200);
    },
    mouseleave: function() {
        $(this).removeClass("hover");
    $(".normal").toggle("fast");
    $(".menu-second p").removeClass("normal");
$(".menu-second p").fadeOut(200);

    }
});

$(".menu-third").on({
    mouseenter: function() {
        $(this).addClass("hover");
    $(".menu-third p").addClass("normal");
    $(".menu-third p").toggle("fast");
    },
    mouseleave: function() {
        $(this).removeClass("hover");
    $(".normal").toggle("fast");
    $(".menu-third p").removeClass("normal");

    }
});

$(".menu-fourth").on({
    mouseenter: function() {
        $(this).addClass("hover");
    $(".menu-fourth p").addClass("normal");
    $(".normal").toggle("fast");
    },
    mouseleave: function() {
        $(this).removeClass("hover");
    $(".normal").toggle("fast");
    $(".menu-fourth p").removeClass("normal");

    }
});

$(".menu-fifth").on({
    mouseenter: function() {
    $(this).addClass("hover");
    $(".menu-fifth p").addClass("normal");
    $(".normal").toggle("fast");
    },
    mouseleave: function() {
    $(this).removeClass("hover");
    $(".normal").toggle("fast");
    $(".menu-fifth p").removeClass("normal");

    }
 });

Вот jsFiddle

  • 0
    Попробуйте установить выравнивание текста по левому краю в ваших якорях. Также ваш HTML неверен. ul -> a -> li недействителен.
  • 0
    Кстати, эффект выдвижения может быть достигнут без использования Javascript. Вот подтверждение концепции . Не уверен, что это поможет, но может оказаться более простым в управлении решением.
Теги:

1 ответ

0
Лучший ответ

По моему скромному мнению

  1. Ваша разметка не является семантической: она должна быть ul > li > a а не ul > a> li > p.
  2. Мой подход был бы только CSS и с не так много раздувания кода, как я вижу в вашей (JS, CSS и HTML мудрый). Нет необходимости в JS для добавления классов. Что-то вроде этого.
  3. Обратите внимание, как я использую свойство hover на li. Это не работает на IE8 и ниже.
  • 0
    Спасибо за решение

Ещё вопросы

Сообщество Overcoder
Наверх
Меню