Блог

Главная - Вопросы по программированию - CSS перемещение верхних пунктов меню в меню гамбургера для меньших размеров экрана без дублирования элементов

CSS перемещение верхних пунктов меню в меню гамбургера для меньших размеров экрана без дублирования элементов

#javascript #html #css

#javascript #HTML #css

Вопрос:

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

Я сделал это с помощью CSS media query. скрывая верхние элементы и одновременно отображая меню в меню гамбургера. Проблема в том, что мне приходится размещать все дважды, один раз в top и один раз в hamburger. Это также доступно здесь: https://jsfiddle.net/fqxndrhy

 document.getElementById('hamburger').onclick = function() {
  document.getElementById('mobile_menu').classList.toggle('show');
}  
 body {
  margin: 0;
}
nav {
  display: flex;
  position: sticky;
  left: 0;
  top: 0;
  width: 100vw;
}

nav>section {
  border: 1px solid red;
}

#mobile_menu {
  display: none;
  position: fixed;
  top: 1cm;
  right: 0;
  border: 1px solid green;
  display: none;
  flex-direction: column;
  color: black;
  background-color: white;
}

#mobile_menu.show {
  display: flex;
}

#desktop1 {
  flex: 1;
}

/* hiding certain items at smaller resolutions */

#mobile1,
#mobile2,
#mobile3,
#mobile4,
#mobile5,
#hamburger {
  display: none;
}

@media (max-width: 1000px) {
  #desktop2 {
    display: none;
  }
  #mobile2,
  #hamburger {
    display: initial;
  }
}

@media (max-width: 900px) {
  #desktop5 {
    display: none;
  }
  #mobile5 {
    display: initial;
  }
}

@media (max-width: 800px) {
  #desktop3,
  #desktop4 {
    display: none;
  }
  #mobile3,
  #mobile4 {
    display: initial;
  }
}  
 <nav>
  <section id="desktop1">desktop1</section>
  <section id="desktop2">desktop2</section>
  <section id="desktop3">desktop3</section>
  <section id="desktop4">desktop4</section>
  <section id="desktop5">desktop5</section>
  <button id="hamburger">☰</button>
</nav>

<div id="mobile_menu">
  <section id="mobile1">mobile1</section>
  <section id="mobile2">mobile2</section>
  <section id="mobile3">mobile3</section>
  <section id="mobile4">mobile4</section>
  <section id="mobile5">mobile5</section>
</div>

Open it in separate window and shrink browser width to hide top items. Items are hiding in random order and appearing in hamburger menu (desktop2 at 1000px width, desktop5 at 900px width, desktop3 and desktop4 at 800px width

Возможно ли избежать этого дублирования? Я предпринял несколько попыток, но они были очень запутанными, я ищу простое, надежное решение?

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

1. Вы не сможете избежать дублирования, если хотите добиться этого с помощью чистого css. Но вы можете использовать JS. Например, с помощью слушателя при изменении размера окна. Или вы также можете создать мобильную часть меню с помощью javascript в программе document ready listener, выполнив цикл в меню рабочего стола, таким образом, вам не придется дублировать меню в вашем html

Ответ №1:

Вы можете это сделать, но это небольшая хитрость с использованием флажка

 body {
        margin: 0;
    }
    nav {
        display: flex;
        position: sticky;
        left: 0;
        top: 0;
        width: 100vw;
    }

    #mobile_menu {
        display: flex;
        flex-direction: row-reverse;
    }

    #mobile_menu>* {
        flex: 1;
    }

    #hamburger {
        width: 0;
        height: 0;
        overflow: hidden;
        position: absolute;
        padding: 0;
        margin: 0;
    }



    @media (max-width: 1000px) {
        #hamburger, label {
            display: inline-block;
        }

        #mobile_menu section {
            display: none;
        }

        #hamburger:checked ~ section {
            display: inline-block;
        }
    }

    @media (min-width: 1000px) {
        #hamburger, label{
            display: none;
        }

        #mobile_menu section {
            display: inline-block;
        }
    }  
 <div id="mobile_menu">
    <label for="hamburger">☰</label>
    <input type="checkbox" id="hamburger" />
    <section id="mobile1">mobile1</section>
    <section id="mobile2">mobile2</section>
    <section id="mobile3">mobile3</section>
    <section id="mobile4">mobile4</section>
    <section id="mobile5">mobile5</section>
</div>

Здесь я показываю скрытие гамбургера в зависимости от разрешения, а в мобильной версии я показываю / скрываю элементы, используя комбинацию sibling и : checked selector

Это всего лишь CSS-решение, но в целом JavaScript-решения используются чаще и более гибко.