具有非均匀背景的块内的渐变边框

Question

shaidullin2h

Asked:2022-09-04 02:09:50 +0000 UTC2022-09-04 02:09:50 +0000 UTC 2022-09-04 02:09:50 +0000 UTC

块的布局到屏幕的整个宽度

772

有一个带有导航菜单的标题，当您将鼠标悬停在项目上时，带有子项目的块会退出，在悬停的帮助下退出。

您需要将此下拉块拉伸到全宽，如果将宽度设置为 100%，则此块超出页面边界。只有在负值 left 的帮助下才能定位，但也许有不同的选择来实现这一点？我正在寻找以下结果：

<header class="header">
        <div class="logo">
        </div>

        
        <nav class="menu">
          <ul class="menu__list">
            <li>
              <a href="" class="menu__link">Пункт 1</a>
              <ul class="sub-menu__list">
                <div class="list__links">
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                </div>
              </ul>
            </li>
            <li>
              <a href="" class="menu__link">Пункт 2</a>
              <ul class="sub-menu__list">
                <div class="list__links">
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                </div>
              </ul>
            </li>
            <li>
              <a href="" class="menu__link">Пункт 3</a>
              <ul class="sub-menu__list">
                <div class="list__links">
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                </div>
              </ul>
            </li>
            <li>
              <a href="" class="menu__link">Пункт 4</a>
              <ul class="sub-menu__list">
                <div class="list__links">
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                </div>
              </ul>
            </li>
            <li>
              <a href="" class="menu__link">Пункт 5</a>
              <ul class="sub-menu__list">
                <div class="list__links">
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                  <li>
                    <a href="" class="sub-menu__link">Подпункт меню</a>
                  </li>
                </div>
              </ul>
            </li>
          </ul>
        </nav>  
        <!-- HAMBURGER MENU BEGIN -->
          <div class="burger-menu">
            <a href="#" class="burger-menu__button">
              <span class="burger-menu__lines"></span>
            </a>
            <nav class="burger-menu__nav"> <!--menu-->
              <ul>
                <input type="radio" name="menu" id="one" checked>
                <li>
                  <label for="one" class="title"><i class="fa fa-folder"></i>Пункт 1</label>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                </li>
                <input type="radio" name="menu" id="two">
                <li>
                  <label for="two" class="title"><i class="fa fa-edit"></i>Пункт 2</label>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                </li>
                <input type="radio" name="menu" id="three">
                <li>
                  <label for="three" class="title"><i class="fa fa-gavel"></i>Пункт 3</label>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                </li>
                <input type="radio" name="menu" id="four">
                <li>
                  <label for="four" class="title"><i class="fa fa-gears"></i>Пункт 4</label>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                </li>
                <input type="radio" name="menu" id="five">
                <li>
                  <label for="five" class="title"><i class="fa fa-gears"></i>Пункт 5</label>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                  <a href="#">Подпункт меню</a>
                </li>
              </ul>
            </nav>
              
              
              <!-- <a href="" class="burger-menu__link">asdasd</a>
              <a href="" class="burger-menu__link">asdasd</a>
              <a href="" class="burger-menu__link">asda</a>
              <a href="" class="burger-menu__link">a</a>
              <a href="" class="burger-menu__link">aa</a> -->
            </nav>

            <div class="burger-menu__overlay">

            </div>
          </div>
        <!-- HAMBURGER MENU END -->

      </header>

CSS 代码

.header {
    padding: 0 100px 0 100px;
    font-weight: 500;
    width: 100%;
    min-height: 198px;
    max-height: 288px;
    color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #0B0A0D;
    font-size: 16px;
    font-family: 'M PLUS 1p', sans-serif;
  }
  .list__links {
    display: flex;
    width: 362px;
    height: 159px;
    
    flex-wrap: wrap;
    flex-direction: column;
  }
  .logo {
    background: url(./img/logo.png);
    width: 42px;
    height: 50px;
    margin-right: 213px;
  }
  
  .menu a {
    text-decoration: none;
  }
  
  .menu li {
    list-style: none;
    position: relative;
    margin-bottom: 30px;
    margin-right: 142px;
  }
  
  .menu__list {
    display: flex;
  }
  
  .menu__list>li {
    margin: 0 5px;
  }
  
  .menu__list>li:hover {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
  }
  
  .menu__link {
    font-size: 1.6vw;
    color: #fff;
  }
  
  .menu__link:hover + .sub-menu__list,
  .sub-menu__list:hover {
    padding-top: 23px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #0B0A0D;
    z-index: 999;
    margin-top: 3px;
  }
  
  .sub-menu__list {
    
    height: 288px;
    display: none;
    
    position: absolute;
    left: 0;
    top: 16px;
    padding: 20px 0px 0px 0px;
    box-shadow: 0 0 0 100vw rgba(0, 0, 0, .4);
    width: calc(100vw - 550px); 
    justify-content: space-between;
  }
  

  
  .sub-menu__link {
    color: white;
    transition: .4s;
    &:hover {
        color:#75FF72;
        transition: .4s;
        ;
    }
  }


// adaptive

@media screen and (max-width: 980px) {
    .menu {
        display: none;
    }

}

2 个回答

Voted

HaZcker · Answer 1 · 2022-09-04T17:48:56Z

试试这个
。这是你的代码在某些地方发生了变化。CSS
注意header那些顶部标有注释的块。this

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

.header {
    padding: 0 100px 0 100px;
    font-weight: 500;
    width: 100%;
    min-height: 198px;
    max-height: 288px;
    position: relative;
    color: white;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #0B0A0D;
    font-size: 16px;
    font-family: 'M PLUS 1p', sans-serif;
}

.list__links {
    display: flex;
    width: 362px;
    height: 159px;

    flex-wrap: wrap;
    flex-direction: column;
}

.logo {
    background: url(./img/logo.png);
    width: 42px;
    height: 50px;
    margin-right: 213px;
}

.menu a {
    text-decoration: none;
}

/*this*/
.menu li {
    list-style: none;
    margin-bottom: 30px;
    margin-right: 142px;
}

.menu__list {
    display: flex;
}

.menu__list>li {
    margin: 0 5px;
}

.menu__list>li:hover {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
}

.menu__link {
    font-size: 1.6vw;
    color: #fff;
}

/*this*/
.menu__link:hover + .sub-menu__list,
.sub-menu__list:hover {
    padding-top: 23px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #0B0A0D;
    z-index: 999;
    position: absolute;
    top: 100%;
}

/*this*/
.sub-menu__list {
    position: absolute;
    height: 288px;
    display: none;
    left: 0;
    right: 0;
    bottom:  -100%;
    padding: 20px 0px 0px 0px;
    box-shadow: 0 0 0 100vw rgba(0, 0, 0, .4);
    justify-content: space-between;
    opacity: .5;
    background-color: red;
}



.sub-menu__link {
    color: white;
    transition: .4s;
}

.sub-menu__link:hover {
    color: #75FF72;
    transition: .4s;
}


// adaptive

@media screen and (max-width: 980px) {
    .menu {
        display: none;
    }

}

HaZcker · Answer 2 · 2022-09-04T02:28:05Z

您需要正确定位子菜单

看看这个解决方案
注意它挂了哪些块position: absolut，position:relative

以及属性left_ right_top

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

.navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    background: gray;
    font-size: 22px;
    position: relative;
}

.sub-menu {
      position: absolute;
    left: 0;
    right: 0;
    min-height: 300px;
    display: none;
    opacity: 0;
    pointer-events: none;
    background: gold;
}

.sub-item {
    width: 75px;
    height: 35px;
    background: red;
    margin: 10px;
}

.menu-item {
    margin: 10px;
}

.menu-item span {
    display: block;
    padding: 10px 25px;
    background: white;
    cursor: pointer;
}

.menu-item:hover .sub-menu {
    display: flex;
    pointer-events: auto;
    opacity: 1;
    top: 100%;
}

.sub-menu--2 {
    background: limegreen;
}

.sub-menu--3 {
    background: aquamarine;
}

<header>
    <nav class="navigation">
            <div class="menu-item">
                <span>Меню 1</span>
                <div class="sub-menu sub-menu--1">
                    <div class="sub-item">1</div>
                    <div class="sub-item">2</div>
                    <div class="sub-item">3</div>
                </div>
            </div>
            <div class="menu-item">
                <span>Меню 2</span>
                <div class="sub-menu sub-menu--2">
                    <div class="sub-item">4</div>
                    <div class="sub-item">5</div>
                    <div class="sub-item">6</div>
                </div>
            </div>
            <div class="menu-item">
                <span>Меню 3</span>
                <div class="sub-menu sub-menu--3">
                    <div class="sub-item">7</div>
                    <div class="sub-item">8</div>
                    <div class="sub-item">9</div>
                </div>
            </div>
    </nav>
</header>

块的布局到屏幕的整个宽度

我看不懂措辞

请求的模块“del”不提供名为“default”的导出

"!+tab" 在 HTML 的 vs 代码中不起作用

我正在尝试解决“猜词”的问题。Python

可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件？

Python解析野莓

问题：“警告：检查最新版本的 pip 时出错。”

帮助编写一个用值填充变量的循环。解决这个问题

尽管依赖数组为空，但在渲染上调用了 2 次 useEffect

数据不通过 Telegram.WebApp.sendData 发送

块的布局到屏幕的整个宽度

2 个回答

相关问题