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

1. Использование свойства CSS Float.
   Свойство CSS floatможно использовать для перемещения меню вправо. Вот пример:

HTML:

<header>
  <nav class="menu1">Menu 1</nav>
  <nav class="menu2">Menu 2</nav>
</header>

CSS:

header {
  width: 100%;
  overflow: hidden;
}
nav {
  float: right;
}

2. Использование CSS Flexbox.
   CSS Flexbox — это мощная модель макета, которая упрощает выравнивание элементов. Мы можем использовать его для перемещения меню вправо:

HTML:

<header class="header">
  <nav class="menu1">Menu 1</nav>
  <nav class="menu2">Menu 2</nav>
</header>

CSS:

.header {
  display: flex;
  justify-content: flex-end;
}

3. Применение CSS Grid:
   CSS Grid предоставляет систему макетов на основе сетки, которую можно использовать для перемещения меню вправо:

HTML:

<header class="header">
  <nav class="menu1">Menu 1</nav>
  <nav class="menu2">Menu 2</nav>
</header>

CSS:

.header {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: end;
}

4. Использование Bootstrap Framework.
   Если вы используете платформу Bootstrap, вы можете использовать ее встроенные классы для создания плавающих меню справа:

HTML:

<header class="header">
  <nav class="navbar navbar-expand-lg">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Menu 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Menu 2</a>
      </li>
    </ul>
  </nav>
</header>

5. Применение JavaScript/jQuery.
   Если вам требуется динамическое поведение или более сложная функциональность, для достижения эффекта плавающего меню можно использовать JavaScript или jQuery. Вот пример использования jQuery:

HTML:

<header class="header">
  <nav class="menu1">Menu 1</nav>
  <nav class="menu2">Menu 2</nav>
</header>

JavaScript/jQuery:

$(document).ready(function() {
  $('.menu1, .menu2').css('float', 'right');
});

В этой статье мы рассмотрели различные способы размещения нескольких меню справа от заголовка. В зависимости от требований и предпочтений вашего проекта вы можете выбирать между свойствами CSS, такими как float, моделями макета CSS, такими как Flexbox и Grid, использованием таких платформ, как Bootstrap, или реализацией JavaScript/jQuery для более динамичного поведения. Поэкспериментируйте с этими методами, чтобы добиться желаемого эффекта плавающего меню в заголовке вашего сайта.