菜单背后的渐变背景与悬停的透明背景

Question

这是菜单的代码（jQuery，CSS，HTML）：

 $(window).resize(function() { // styling pro header var winW = $(window).width(); var menuW = $('.fixedNav ul').width() + $('.fixedNav span').width() + 10; $('.fill').width(winW - menuW); }); $(window).resize(); 

 .blueLine { width: 100%; height: 0.2em; background-color: #00b0d6; background-image: -webkit-linear-gradient(left, #00b0d6 0%, #243892 100%); background-image: linear-gradient(to right,#00b0d6 0%, #243892 100%); position: fixed; z-index: 1000; } header { width: 100%; height: 5em; line-height: 5em; position: fixed; z-index: 999; } header > div { width: 100%; background-color: #FFF; height: 100%; } .fixedNav { height: 100%; background-color: #00b0d6; background-image: -webkit-linear-gradient(left, #00b0d6 0%, #243892 100%); background-image: linear-gradient(to right,#00b0d6 0%, #243892 100%); } .fixedNav::after { clear: both; content: ""; display: table; } .fixedNav div:first-of-type { display: inline-block; height: 100%; position: absolute; background-color: #fff; } .fixedNav div:first-of-type a { display: inline-block; float: left; height: 100%; margin-left: 2em; } .fixedNav div:first-of-type a img { height: 60%; vertical-align: middle; } .fixedNav span:first-of-type { display: block; height: 100%; background-color: #FFF; float: right; width: 2em; } .fixedNav span:nth-of-type(2) { display: none; } .fixedNav ul { list-style: none; float: right; margin: 0; padding: 0; height: 100%; position: relative; display: block; } .fixedNav ul li { height: 100%; background-color: #FFF; display: inline-block; text-align: center; } .fixedNav ul li:hover { background-color: transparent; } .fixedNav ul li:hover a { color: #fff; } .fixedNav ul li a { display: block; width: 100%; height: 100%; color: #666666; text-decoration: none; font-family: "Open Sans", sans-serif; font-weight: 600; padding: 0 1em; box-sizing: border-box; font-size: 1.1em; letter-spacing: 1px; } .fill { float: right; background-color: #fff; height: 100%; } 

 <div class="blueLine"></div> <header> <div> <div class="fixedNav"> <div><a href="#"><img src="" alt=""></a></div> <span></span> <span id="menuToggle"></span> <ul> <li><a href="#">MENUITEM</a></li><li> <a href="#">MENUITEM</a></li><li> <a href="#">MENUITEM</a></li> </ul> <div class="fill"></div> </div> </div> </header> 

在这个小提琴中，你已经可以看到菜单所需的行为，如下所示：

- 白色菜单后面是渐变背景

- 链接在悬停时获得透明背景，使渐变背景可见，此可见部分的颜色必须始终与上面的blueLine div的颜色相对应（具有相同的渐变背景）。

然而，上面的解决方案使用Javascript（在resize上计算div.fill的宽度），这是不可取的，因为这会因为在css之后加载javascript而轻弹页面刷新。

我的问题是如何使用纯CSS来做同样的事情。

谢谢。

Answer 1

Flexbox可以使用伪元素而不是填充元素来实现。

我也也消除了额外的包装div等。

 header { width: 100%; height: 5em; line-height: 5em; position: fixed; z-index: 999; } .fixedNav { background-color: #00b0d6; background-image: -webkit-linear-gradient(left, #00b0d6 0%, #243892 100%); background-image: linear-gradient(to right, #00b0d6 0%, #243892 100%); padding-top: 4px; /* now the top 'border' */ } .fixedNav ul { list-style: none; margin: 0; padding: 0; height: 100%; position: relative; display: block; display: flex; } .fixedNav ul:before { content: ''; flex: 1; background: white; /* filler element */ } .fixedNav ul li { height: 100%; background-color: #FFF; text-align: center; } .fixedNav ul li:hover { background-color: transparent; } .fixedNav ul li:hover a { color: #fff; } .fixedNav ul li a { display: block; width: 100%; height: 100%; color: #666666; text-decoration: none; font-family: "Open Sans", sans-serif; font-weight: 600; padding: 0 1em; box-sizing: border-box; font-size: 1.1em; letter-spacing: 1px; } 

 <header> <div class="fixedNav"> <ul> <li><a href="#">MENUITEM</a> </li> <li><a href="#">MENUITEM</a> </li> <li><a href="#">MENUITEM</a> </li> </ul> </div> </header> 

Answer 2

样品

---

我已经重写了一点代码，因为我觉得这个效果可以在纯CSS中更轻松，更清洁。

 header { width: 100%; height: 75px; padding-top:5px; position: fixed; z-index: 999; display: table; background-color: #00b0d6; background-image: -webkit-linear-gradient(left, #00b0d6 0%, #243892 100%); background-image: linear-gradient(to right, #00b0d6 0%, #243892 100%); } .fixedNav { height: 100%; width: 100%; display: table-row; overflow: hidden; } .fixedNav li { background: #fff; list-style: none; display: table-cell; height: 100%; vertical-align:top; } .fixedNav li.menuBtn { width: 20px; } .fixedNav li.btn { width: 50px; } .fixedNav li.btn:hover, .fixedNav li.menuBtn:hover { background: none; } .fixedNav a { display: block; width: 100%; height: 100%; color: #666; text-decoration: none; font: 600 1.1em/75px "Open Sans", sans-serif; box-sizing: border-box; padding: 0 1em; letter-spacing: 1px; } .fixedNav a:hover { color: #fff; } 

 <header> <ul class="fixedNav"> <li class="menuBtn"> <a href="#menuToggle">*</a> </li> <li><a href="#"></a></li> <li class="btn"><a href="#">MENUITEM</a></li> <li class="btn"><a href="#">MENUITEM</a></li> <li class="btn"><a href="#">MENUITEM</a></li> </ul> </header>