菜單背后的漸變背景與懸停的透明背景

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>