Блог

Главная - Вопросы по программированию - Расположение подменю внутри пункта главного меню на мобильном устройстве и под главным меню на рабочем столе

Расположение подменю внутри пункта главного меню на мобильном устройстве и под главным меню на рабочем столе

#css #flexbox #responsive-design

Вопрос:

Это общий вопрос. Я представляю себе следующее меню для рабочего стола введите описание изображения здесь

и следующее для мобильных устройств

введите описание изображения здесь

я пробовал разные подходы:

1: Используйте два разных заголовка и покажите, скройте их с помощью css, легко стилизуется, но не идеально подходит для чтения с экрана.

 <header class="mobile-header">
</header>
<header class="desktop-header">
</header>

2: Используйте один заголовок:

 <header>
<h1 aria-label="Brandname">
  <a class="" href="/">
    Brandname
  </a>
</h1>

<nav class="main-menu-wrapper" role="navigation">
    <button class="toggle-mobile-menu" aria-expanded="false">Menu</button>
        <ul class="main-menu">
            <li><a href="/">Menu Item 1</a>
                <ul>
                    <li>Submenu Item 1</li>
                    <li>Submenu Item 2 </li>
                </ul>       
            </li>
            <li><a href="/">Menu Item 1</a>
                <ul>
                    <li>Submenu Item 1</li>
                    <li>Submenu Item 2 </li>                    
                </ul>
            </li>
            <li><a href="/">Menu Item 3</a>
                <ul>
                    <li>Submenu Item 1</li>
                    <li>Submenu Item 2 </li>                    
                </ul>
            </li>   
        </ul>
</nav>

</header>

Что касается синтаксиса, то мне нравится эта структура. И на мобильных устройствах он отлично работает, но как я могу стилизовать его для рабочего стола? Я думал использовать position: absolute подменю, но я не так уверен в этом подходе, потому что мне нужно рассчитать высоту с помощью javascript.
Может быть, есть простое решение?

Пример:

Как на этом сайте: https://www.bruecke-museum.de/

Для рабочего стола:

введите описание изображения здесь

Мобильный:

введите описание изображения здесь

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

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

1. попробуйте использовать @media query для мобильного дизайна [ w3schools.com/cssref/css3_pr_mediaquery.asp] , для абсолютной позиции, это не будет хорошей идеей для адаптивного дизайна, попробуйте использовать гибкий или сетчатый, это сделает его более отзывчивым.

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

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

4.может быть, я нашел ответ здесь: bbc.github.io/gel/components/site-menu bbc.github.io/gel/components/demos/site-menu/#

Ответ №1:

 .main-menu{
display:flex;
flex-wrap: nowrap;
}
  ul{
      display: flex;
      gap:50px

    }
   
 <header>
<h1 aria-label="Brandname">
  <a class="" href="/">
    Brandname
  </a>
</h1>

<nav class="main-menu-wrapper" role="navigation">
    <button class="toggle-mobile-menu" aria-expanded="false">Menu</button>
        <ul class="main-menu">
            <li><a href="/">Menu Item 1</a>
                <ul id="addclasshere">
                    <li>Submenu Item 1</li>
                    <li>Submenu Item 2 </li>
                </ul>       
            </li>
            <li><a href="/">Menu Item 1</a>
                <ul id="addclasshere">
                    <li>Submenu Item 1</li>
                    <li>Submenu Item 2 </li>                    
                </ul>
            </li>
            <li><a href="/">Menu Item 3</a>
                <ul id="addclasshere">
                    <li>Submenu Item 1</li>
                    <li>Submenu Item 2 </li>                    
                </ul>
            </li>   
        </ul>
</nav>

</header>
<body></body>

Если вы хотите сделать выпадающее меню и просто показывать только один из пунктов меню, вам нужно добавить файл js document.getelementById().addclass() и создать другой класс css visibilty="visible . или вы можете проверить наличие w3school

Метки: