Меню навигации исчезает до изменения размера окна

Question

Меню навигации исчезает до изменения размера окна

0

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

Div для изображения находится над навигационной панелью, и по какой-то причине, когда изображение загружено, текст li в навигационной панели исчезает (фактическая панель навигации остается) до тех пор, пока окно не будет изменено.

В моем коде фоновое изображение также расположено над кодом для панели навигации, поскольку они расположены относительно друг друга.

Кто-нибудь может понять, что может быть причиной того, что выглядит как глюк? Проблема происходит в Chrome, Safari, Firefox и IE11/10.

Все, что вам нужно сделать, - это изменить размер окна, чтобы обновить навигацию, однако навигационное меню не должно быть скрыто при загрузке окна или вам нужно изменить размер окна, чтобы отобразить пункты меню.

Любое понимание того, что может быть причиной этой проблемы?

http://jsfiddle.net/UavyG/1/

благодаря

Javascript and HTML Code below ----->
<!------------Random Image script   start  below------------>
<div id="main-image">
<script type="text/javascript">
var images = ['type-writer.jpg', 'quechua3.jpg', 'chicago3.jpg', 'type-writer-books.jpg', 'one-hundred-plus-forty-eight.jpg'];
$('#main-image').css({'background-image': 'url(images/cover-images/' + images[Math.floor(Math.random() * images.length)] + ')'});
$('<img src="images/cover-images/' + images[Math.floor(Math.random() * images.length)] + '">').appendTo('#main-image');
</script>
</div>
<!------------Random Image script   END------------>



<nav class="container">
<div id="mobile-logo"><img src="images/logo-2.svg" width="70px" alt="3Elements Review, a literary journal based in Chicago, Illinois. This is our magazine logo." border="none" id="mobile-logo"></div>
<ul>
<li class="current" style="background-color:#313131;"><a href="current-journal.html" class="current">CURRENT JOURNAL<span class="sub-nav">Our latest and greatest!</span></a></li>
<li class="submit" style="background-color:#404040;"><a href="submit.html" class="current">SUBMIT<span class="sub-nav">Your writing</span></a></li>
<li class="guidelines" style="background-color:#505050;"><a href="submission-guidelines.html" class="current">SUBMISSION GUIDELINES<span class="sub-nav">Everything you need to know is here</span></a></li>
<li class="blog" style="background-color:#4b4b4b;"><a href="3eblog.html" class="current">BLOG<span class="sub-nav">Just a blog</span></a></li>
<li class="past" style="background-color:#404040;"><a href="past-journals.html" class="current">PAST JOURNALS<span class="sub-nav">Browse our issue archives</span></a></li>
<li class="about" style="background-color:#313131;"><a href="about-3elements.html" class="current">ABOUT 3E<span class="sub-nav">What we're about</span></a></li>
</ul>
</nav>

----------- CSS ------------

    nav.container {
    position:relative;
    top:-5px!important;
    width:100%;
    height:70px;
    background-color:#252525;
    z-index:50;
    border-bottom:5px solid #ffd09d;
}

nav.container ul {
    position:relative;
    height:70px;
    top:-63px;
    margin:0px!important;
    padding:0px!important;
    text-align:center;
}

nav.container ul li a:hover > span {
    color:#ffffff!important;
}

.current, .submit, .guidelines, .blog, .past, .about {
    position:relative;
    margin-right:-4px;
    padding-left:12px;
    padding-right:13px;
    padding-top:0px;
    padding-bottom:1.5px;
    top:1px;
    left:0px;
    font-family:myriad pro, arial, sans-serif;
    color:#ffffff;
    font-size:1.46em;
    text-align:center;
    line-height:1.95em;
    outline:none;
    list-style:none;
    display:inline-block;
    transition:750ms;
    -webkit-transition:750ms;
    list-style:none;
}

a {
    text-decoration:none;
}

a:hover {
    text-decoration:none;
    color:#252525;
}

li.current:hover, li.submit:hover, li.guidelines:hover, li.blog:hover, li.past:hover, li.about:hover {
    cursor:pointer;
    background-color:#beb29a!important;
    border-bottom:15px solid #ff6000!important;
    transition:100ms;
    -webkit-transition:100ms;
}
#main-image img {
    position:relative;
    top:0px;
    width:100%;
    height:auto;
    margin:0px;
    padding:0px;
}

Marlon Fowler 01 дек. 2013, в 08:13

Источник

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Marlon Fowler · Accepted Answer · 2013-12-01T06-58-00.000Z

В моем коде у меня был еще один скрипт, который управляет переключением/сдвигом пункта меню. В этом меню, а также в главном меню навигации используется свойство nav.

В моем javascript-коде мне просто нужно было больше нацелить мой css вместо использования nav ul, поскольку не более точно в javascript-коде для моего мобильного меню, повлияло на основное меню навигации, в результате чего оно было скрыто ненадолго, пока окно не было изменено.

Поэтому я изменил одну строку кода следующим образом:

<script>
$(function () {
        var pull = $('button.open-menu');
        menu = $('ul.nav-menu');
        menuHeight = menu.height();
        menu.slideToggle(0);
        $(pull).on('click', function (e) {
            e.preventDefault();
            menu.slideToggle();
        });

        $(window).resize(function () {
            var w = $(window).width();
            if (w > 320 && menu.is(':hidden')) {
                menu.removeAttr('style');
            }
        });
    });
</script>

из этого: menu = $ ('nav ul');

к этому: menu = $ ('ul.nav-menu');