gradient background behind the menu with transparent background on hover

Question

Here is the code for the menu(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> 

in this Fiddle you can already see desired behaviour of the menu, which is following:

- behind the white menu is the gradient background

- links get transparent background on hover making the gradient background visible and this visible part have to have its colours always corresponding with the colours of blueLine div above (which has the same gradient background).

The solution above, however, uses Javascript (to count the width of div.fill on resize), which is undesirable because this makes a flick on page refresh due to javascript being loaded after css.

My question is how could I do the same using purely CSS.

Thank you.

Answer 1

Flexbox can do that using a pseudo-element instead of filler elements.

I've also also elimimated the extra wrapping divs etc.

 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

SAMPLE FIDDLE

---

I have rewrote your code a little because I feel this effect could be done a lot easier and cleaner in pure 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>