Отзывчивый Top Nav Bar Moving Up Ошибка - PullRequest
Новая
       31

Отзывчивый Top Nav Bar Moving Up Ошибка

0 голосов
/ 22 декабря 2018

Я только начал кодировать сайт для себя… все еще пытаясь понять, как делать что-то, я застрял в этой надоедливой мелочи и очень хочу это исправить.У меня есть следующие коды HTML и CSS, проблема в том, что когда я нажимаю на иконку панели навигации, она открывается по некоторым причинам немного выше ...

you can see the nav bar goes up a little bit and doesn't stay in place

HTML 

<header class="topNav" id="topResNav">

    <a>DANIEL SHALAR</a>

    <nav>
    <a>MIX SHOW</a>
    <a>MUSIC</a>
    <a style="color:gray;">HOME</a> 
    </nav>

    <a href="javascript:void(0);" class="ResNav" onclick="myResNav()">
    <i class="fa fa-bars"></i>
    </a>

</header>

CSS 

/* Responsive Header */

header .ResNav{
    display: none;
}

@media screen and (max-width: 650px) {

    header nav a{display: none;}

    header a.ResNav{
    float: right;
    display: block;
    color: white;
    }

    .topNav.responsive {position: relative;}

    .topNav.responsive .ResNav {
    position: absolute;
    right: 0;
    top: 0;
    }

    .topNav.responsive a {
    float: none;
    display: block;
    text-align: left;
    }
}

JAVA SCRIPT 

<script>
function myResNav() {
    var x = document.getElementById("topResNav");
    if (x.className === "topNav") {
        x.className += " responsive";
    } else {
        x.className = "topNav";
    }
}
</script>

1 Ответ

0 голосов
/ 22 декабря 2018

При нажатии на значок навигации вы применяете к нему новый класс и видите его смещение, потому что вы меняете его на position: absolute;.Это убирает значок из относительного потока страниц.Кроме того, использование top:0 и right:0 помещает значок в правом верхнем углу контейнера, который отличается от исходного положения значка.

Есть несколько вещей, которые вы можете попробовать:

Попробуйте установить без значений: Для начала, попробуйте не иметь right или top, и посмотрите, что произойдет.В зависимости от других факторов вам может повезти.Я говорю это для других, а не для вашего конкретного случая.

Соответствие значениям заполнения: Очевидная вещь, которую нужно сделать ... соответствует значениям для top и right, чтобычто такое заполнение для родительского контейнера - или --- просто подправьте значения, придавая ему глазной вид.Например, если родительский контейнер имеет padding:1em, вы будете использовать top:1em и right:1em на значке.Вы также можете использовать значения пикселей, если хотите.

Использовать Javascript: Более продвинутый метод заключается в использовании дополнительного Javascript для определения исходного положения страницы относительного элемента, а затем применять его какЗначения top и right, которые влияют на переключение на position:absolute;.Создайте функцию с этим, и это будет особенно полезно, если вы меняете относительную / абсолютную позицию для многих элементов.

Вы бы использовали что-то вроде этого: 

var el = document.getElementById("my_menu_icon");
var elPosition = el.getBoundingClientRect();
el.style.right = br.right + 'px';
el.style.top = br.top + 'px';
...