Фон во всю ширину для подменю, но остается на месте - PullRequest
Новая
       60

Фон во всю ширину для подменю, но остается на месте

0 голосов
/ 06 мая 2020

Мой вопрос очень простой, но я не могу найти эффективного решения. Я просто хочу сделать фон моего подменю (в моем случае желтым) на всю ширину. Я знаю, что помещаю относительную позицию в оболочку, потому что это то, что я хочу (я хочу, чтобы подменю начиналось прямо под lo go). JSFIDDLE

Результат, который я хочу - объяснил с изображением: IMAGE

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Navigation</title>
</head>
<body>
  <nav id="main-nav">
    <div class="wrapper">
      <h1 class="logo">Site Name</h1>
      <ul class="main-menu">
        <li><a href="#">Item 1</a></li>
        <li>
        <a href="#">Item 2</a>
        <ul class="sub-menu">
          <li><a href="#">Item 2.1</a></li>
          <li><a href="#">Item 2.2</a></li>
          <li><a href="#">Item 2.3</a></li>
        </ul>
        </li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
      </ul>
      <ul class="left-menu">
        <li>Don't mind me.</li>
      </ul>
    </div>
  </nav>
</body>
</html>

CSS 

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

.wrapper {
  max-width: 1000px;
  width: 80%;
  margin: 0 auto;
}

#main-nav {
  width: 100%;
  background-color: #EEE;
}

#main-nav ul {
  display: flex;
}

#main-nav .wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

#main-nav ul.main-menu {
  flex: 1;
  margin-left: 40px;
}

#main-nav ul.main-menu a {
  height: 50px;
  display: flex;
  align-items: center;
}

#main-nav ul.main-menu a:hover {
  background: #000;
  color: #FFF;
}

#main-nav ul.sub-menu {
  position: absolute;
  left: 0;
  right: 0;
  background-color: yellow;
}

Ответы [ 3 ]

0 голосов
/ 06 мая 2020

Чтобы сделать это аккуратно, вам, вероятно, придется переконструировать nav-bar в более определенные компоненты.

Однако быстрое исправление будет: 

#main-nav ul.sub-menu {
  position: absolute;
  left: 0;
  right: 0;
  background-color: yellow;
  width: 125%;
  margin-left: -12.5%;
  padding-left: 12.5%;
}

Обратите внимание, что указанные выше значения работают только с указанными вами размерами. Если вы хотите изменить какой-либо из них, вам также придется изменить значения в стиле подменю.

EDIT

Другой способ - вообще удалить обертку div и полагайтесь только на поля и отступы для элементов, которые вам нужно центрировать. 

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

.logo {
  margin-left: 10%;
}

.left-menu {
  margin-right: 10%;
}

#main-nav {
  width: 100%;
  background-color: #EEE;
}

#main-nav ul {
  display: flex;
}
 
#main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

#main-nav ul.main-menu {
  flex: 1;
  margin-left: 40px;
}

#main-nav ul.main-menu a {
  height: 50px;
  display: flex;
  align-items: center;
}

#main-nav ul.main-menu a:hover {
  background: #000;
  color: #FFF;
}

#main-nav ul.sub-menu {
  position: absolute;
  left: 0;
  right: 0;
  background-color: yellow;
  padding-left: 10%;
}

Если это не сработает и для вас, вам, вероятно, придется использовать JavaScript для вставки подсписка в другой контейнер, который не содержится в оболочке .

0 голосов
/ 06 мая 2020

вы должны обернуть <ul class="sub-menu"> с <div class="sub-menu-wrap"> и добавить эти стили: 

.sub-menu-wrap {
    position: fixed;
    width: 100%;
    left: 0;
    background-color: yellow;
}

и изменить стили .sub-menu to: 

#main-nav ul.sub-menu {
    width: 80%;
    margin: 0 auto;
}

пример: https://jsfiddle.net/umsqo576/

0 голосов
/ 06 мая 2020

Я добавил 3 строки к вашей последней записи. Расширьте ширину до полного окна просмотра, а затем необходимо компенсировать это, начиная с 60 пикселей слева - margin-left -60px, чтобы переместить желтый цвет к краю страницы, а затем 60 пикселей заполнения, чтобы текст начинался там, где вы хотите. . Хорошо смотрелся на jsfiddle, когда я был там. 

#main-nav ul.sub-menu {
  position: absolute;
  left: 0;
  right: 0;
  background-color: yellow; 
  padding-left: 60px;
  margin-left: -60px;
  width: 100vw;
}
...