Блог

Главная - Вопросы по программированию - Как мне создать навигационную панель с горизонтальной прокруткой?

Как мне создать навигационную панель с горизонтальной прокруткой?

#html #css #scroll #html-lists

#HTML #css #прокрутка #html-списки

Вопрос:

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

Я просмотрел ответы на некоторые похожие вопросы и реализовал решения, которые, казалось, работали в моем случае.

Однако ul и его содержимое каким-то образом выходят из навигации и остаются на следующей строке под навигацией. Также,

Я думал, что установка position: fixed; overflow-y: hidden; ul решит проблему. Но вместо этого левая ее часть закрывает кнопку, расположенную в левом углу навигации.

Кто-нибудь может мне помочь??

 <!--HTML-->
<body>
    <nav class="main-nav">
        <div class="btn"><i class="fas fa-bars fa-2x"></i></div>
        <ul>
            <li><a href="#">Hello</a></li>
            <li><a href="#">Hello</a></li>
            <li><a href="#">Hello</a></li>
            <li><a href="#">Hello</a></li>
            <li><a href="#">Hello</a></li>
            <li><a href="#">Hello</a></li>
            <li><a href="#">Hello</a></li>
        </ul>
    </nav>
</body>

 
 /*CSS*/
.main-nav {
    position: fixed;
    z-index: 1000;

    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 3rem;
    
    background-color: #ffffff;
}
.main-nav .btn {
    height: 3rem;
    width: 3rem;

    background-color: chartreuse;
    cursor: pointer;
}

.main-nav ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding-left: 2rem;

}
.main-nav ul li a {
    display: block;
    line-height: 3rem;
    height: 100%;
    padding: 0 1rem;

    text-decoration: none;
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 600;
    color: black;
}

@media (max-width: 800px) {
.main-nav {
        height: 4rem;
        white-space: nowrap;
    }
.main-nav ul {
        position: fixed;
        white-space: nowrap;
        flex-wrap: nowrap;
        overflow-x: scroll;
        overflow-y: hidden;
    }
    .main-nav ul li {
        flex: 0 0 auto;
    }
    
}

Комментарии:

1. Вам нужно включить свой HTML. В противном случае мы бы гадали, какова структура DOM.

Ответ №1:

Итак, я попробовал ваш код в CodePen, и, похоже, единственное, что мешает вашему коду работать, — это position: fixed правило для ul элемента внутри медиа-запроса.

На мой взгляд, поскольку вы намерены сохранить все свои элементы внутри заголовка по оси X, overflow-y: hidden это вообще не нужно.

Я понятия не имею, чего именно вы планируете достичь, но использование навигационной панели с возможностью прокрутки по оси X, похоже, не является хорошей практикой. Возможно, в вашем приложении это имеет смысл, но вы можете пересмотреть это. С точки зрения UX это не лучший подход.

Комментарии:

1. Дэниел, спасибо, что поделился своим пониманием!

2. Как новичок, я подумал, что хранение элементов внутри навигации — хороший способ упростить навигацию, когда экран меньше. Я хотел бы знать, как вы делаете эту панель навигации удобной для пользователя, если вы не возражаете!

3. Ну, здесь это во многом зависит от ваших вкусов, когда дело доходит до веб-дизайна. Мой совет — посмотрите на сайты, которые вам нравятся, и посмотрите, как они ведут себя на экранах мобильных устройств. Также проверьте текущие тенденции в веб-дизайне на YT, есть много отличных дизайнеров, которые делятся своими знаниями. Вы также можете попробовать некоторые курсы по Udemy, чтобы расширить свои знания.

Метки: