IE выпадающего меню Superfish - PullRequest
       41

IE выпадающего меню Superfish

1 голос
/ 08 апреля 2011

Я использую выпадающие меню на веб-сайте, они отлично работают, за исключением IE.

Я потратил последние два часа, пытаясь понять это, но я просто не могу понять, в чем проблема.

Я использую суперфиш для меню, и как только вы щелкаете мышью по ссылке, меню остается на экране в течение 2-3 секунд, и оно немного не в своем положении.

Я попытался css исправить наul, но он применил его только к выпадающему jquery, а не к оставшемуся экземпляру.

Эти изображения иллюстрируют происходящее;

Navigation working correctly

After image of the menu

Вот CSS / HTML для меню;

Разметка

<div class="main-menu">
    <div class="menu-header">
        <ul id="menu-main" class="menu sf-js-enabled">
            <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40">
                <a class="sf-with-ul" href="http://wp.ashtonklein.com/ashton-klein/">
                Ashton Klein
                <span class="sf-sub-indicator"> »</span>
                </a>
                <ul class="sub-menu" style="visibility: hidden; display: none;">
                    <li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49">
                        <a class="sf-with-ul" href="http://wp.ashtonklein.com/ashton-klein/about/">
                        About
                        <span class="sf-sub-indicator"> »</span>
                        </a>
                        <ul class="sub-menu" style="visibility: hidden; display: none;">
                            <li id="menu-item-48" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48">
                            <a href="http://wp.ashtonklein.com/ashton-klein/about/who-we-are/">Who we are</a>
                            </li>
                            <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47">
                            <a href="http://wp.ashtonklein.com/ashton-klein/about/our-vision/">Our Vision</a>
                            </li>
                            <li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46">
                            <a href="http://wp.ashtonklein.com/ashton-klein/about/our-commitment/">Our Commitment</a>
                            </li>
                        </ul>
                    </li>
                    <li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45">
                        <a class="sf-with-ul" href="http://wp.ashtonklein.com/ashton-klein/opportunities/">
                        Opportunities
                        <span class="sf-sub-indicator"> »</span>
                        </a>
                        <ul class="sub-menu" style="display: none; visibility: hidden;">
                            <li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44">
                            <a href="http://wp.ashtonklein.com/ashton-klein/opportunities/careers/">Careers</a>
                            </li>
                            <li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43">
                            <a href="http://wp.ashtonklein.com/ashton-klein/opportunities/franchising/">Franchising</a>
                            </li>
                            <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42">
                            <a href="http://wp.ashtonklein.com/ashton-klein/opportunities/marketing-opportunities/">Marketing</a>
                            </li>
                        </ul>
                    </li>
                    <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41">
                    <a href="http://wp.ashtonklein.com/ashton-klein/newsroom/">Newsroom</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

CSS

#header .webmenu .main-menu ul
{
    width:100%;
    height:40px;    
}
#header .webmenu .main-menu ul li
{
    float:left;
    line-height:30px;
    font-family: 'Philosopher', arial, serif;
    font-size:18px;
    height:30px;
    margin:5px 15px 5px 0;
    padding:0 10px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius: 4px;
    position: relative;
    z-index: 20px;
    display:block;
}

#header .webmenu .main-menu ul li.current-menu-item, #header .webmenu .main-menu ul li.current-menu-parent, #header .webmenu .main-menu ul li.current-page-ancestor
{
    background:url('../images/menu_current.png') repeat-x;
}
#header .webmenu .main-menu ul li a
{
    color:#FFF;
    text-decoration:none;
    display:block;
    outline:none;
}
#header .webmenu .main-menu ul li:hover
{
    background:url('../images/menu_current.png') repeat-x;
}
#header .webmenu .main-menu ul li span.sf-sub-indicator
{
    display:block;
    float:right;
    width:6px;
    height:4px;
    background:url('../images/menu_arrow.png') no-repeat right;
    margin-left:10px;
    margin-top:13px;
    text-indent:-9999px;
}

#header .webmenu .main-menu ul li ul.sub-menu
{
    position:absolute;
    display:none;

    /* corners */
    border-radius:0 4px 4px;
    -moz-border-radius:0 4px 4px;
    -webkit-border-radius:0 4px 4px;

    background:#007E63;
    padding:5px;
    height:auto;
    width:200px;
}
#header .webmenu .main-menu ul li:hover ul.sub-menu
{
    display:inherit;
    left:0px;
    top:28px;
}
#header .webmenu .main-menu ul li ul li
{
    display:block;
    float:none;
    background:none;
    margin-right:0;
    padding:0 10px;
    margin:0 0 3px;
}
#header .webmenu .main-menu ul li ul li:hover
{
    background:#333333; 
}
#header .webmenu .main-menu ul li ul li a, #header .webmenu .main-menu ul li ul li a:hover
{
    color:#FFF; 
}

#header .webmenu .main-menu ul li ul li.current-menu-item, #header .webmenu .main-menu ul li ul li.current-menu-parent
{
    background:#333333; 
}
#header .webmenu .main-menu ul li ul li span.sf-sub-indicator
{
    background:url('../images/menu_arrow_sub.png'); background-repeat:no-repeat;
    float:right;
    margin-left:10px;
    width:16px;
    height:16px;
    margin-top:8px;
    text-indent:-9999px;
}

#header .webmenu .main-menu ul li ul.sub-menu li ul.sub-menu
{
    position:absolute;
    left:-999em;

    /* corners */
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;

    background:#007E63;
    padding:5px;
    height:auto;
    width:200px;
}
#header .webmenu .main-menu ul li ul.sub-menu li:hover ul.sub-menu
{
    left:200px;
    top:0;
}

jQuery

$('ul.menu').superfish({ 
        delay:       1000,                            // one second delay on mouseout 
        animation:   {opacity:'show',height:'show'},  // fade-in and slide-down animation 
        speed:       'slow',                          // faster animation speed 
        autoArrows:  true,                           // disable generation of arrow mark-up 
        dropShadows: false                            // disable drop shadows 
     }); 

Я ценю любую помощь, которую вы можете предоставить!

http://www.stylishmedia.co.uk/ak/

вот ссылка на тестовую версию

Ответы [ 2 ]

4 голосов
/ 10 апреля 2011

Хорошо, для полной отладки потребовалось некоторое время, главное в Superfish - то, что ваше меню должно работать ПЕРЕД добавлением улучшений Superfish, а ваше - из их собственной документации (с моим жирным шрифтом):

Superfish - это расширенный плагин jQuery для меню в стиле Suckerfish, который берет существующее раскрывающееся меню с чистым CSS (таким образом, изящно деградирует без JavaScript) и добавляет следующие востребованные улучшения

Оригинальный выпуск

Причина, по которой вы получили задержку, состоит в том, что вы не применили правила li.sfHover в CSS к тем же местам, где был li:hoverтакже используется, например,

#header .webmenu .main-menu ul li:hover,
#header .webmenu .main-menu ul li.sfHover
{
    background:url('http://www.stylishmedia.co.uk/ak/wp-content/themes/AshtonKlein/library/images/menu_current.png') repeat-x;
}

, чтобы в каждом месте вызывался li:hover, и ваша исходная проблема была исправлена ​​

Другие вещи, обнаруженные на пути

Я нашелэто было трудно отладить, потому что IE не работал вообще без скрипта, но как только я запустил его, например, IE7 и ниже не понравились float: right изображений индикаторов, это быловзяв ссылки, которые содержали их на 100% ширины, что означало, что «Ashton Klein», первая ссылка, составляла 100% ширины верхней строки меню, а затем перебрасывала все остальные пункты меню в строку под

решениемэто означало абсолютно позиционировать изображения, но это означало, что ссылки не стали достаточно широкими, чтобы «отделить» изображения от текста, но Superfish также классифицирует эти ссылки sf-with-ul, так что вы можете добавить дополнительные правые отступы к ним -и затем поместите изображения в дополняемое пространство

Я немного изменил размер ссылок меню, потому что он вообще не был стабильным в IE, и менялся в зависимости от версии, а также от браузера, иногда падения былиначиная слишком высоко над текстом, в FF они фактически обрезались ... вы также не можете использовать display: inherit; (хорошо, вы должны это сделать, но это пока слишком глючно), поэтому меню не появлялось без сценария

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

ссылка на рабочий пример

если вы закомментируете скрипт внизу, вы увидите, что он делает это сейчасработать без него тоже, хотя никаких причудливых задержек не происходит;)

0 голосов
/ 08 апреля 2011

У меня нет IE, но у меня была очень похожая проблема некоторое время назад. Я не прочесал вашу таблицу стилей, но посмотрите, что для меня решило: CSS меню "зависает" в Chrome & Safari

Надеюсь, это поможет.

...