How to create a transparent current state clipping in a fixed menu?

Question

I know that we can use triangles that have the same color as the background color to cut out the label in the current state on nav. However, I created a navigation menu in a fixed position div with a high z and background color set to opacity .7, so that the entire navigator is on top of the contents of the page, but you can scroll down the page. Is it possible to create a current state clipping that “cuts” through an opaque div to show the content under it when scrolling through the page?

For reference, I'm trying to reproduce the experience that you get in the iOS app store. Click this link for the image: http://cl.ly/image/2u3W1o38423y

Thanks for the advanced.

Answer 1

There are many ways you could do this, here I take it upon myself:

This is the layout I would use. <nav> is fixed at the top with the <div> for the inscription at the bottom right. Content is under both of them with an upper top layer equal to the heights of the navigator and notch.

 +--------------------------------+--+ | | | | nav (fixed) | | <-- the content is below these fixeds, | | | which have a higher z-index +--------------------------------+ | | notch (fixed) | | +--------------------------------+ | | | | | | | | content | | section | | (padding-top = nav+notch heights) | | | | | +-----------------------------------+ 

I'm going to suggest that you need a fluid layout, so I prefer using FlexBox (http://www.w3.org/TR/css3-flexbox/) to save the label where it should be changed in the browser. If you have a fixed layout, there are a few more straightforward solutions that don't require FlexBox or figure out where the cutout should be placed in a flexible container.

Since the other parts should be simple enough, here is a breakdown of the cut <div>

 +---------------------------------------------------+ | | | | | | spacing | notch | notch | spacing | | (flexible) | left | right | (flexible) | | | | | | +---------------------------------------------------+ 

The two outer <div> bend and have the same background-color as <nav> . Then, two internal cuts use gradients to create triangles.

 background: -webkit-linear-gradient( top left, rgba(145, 145, 145, 1) 0%, rgba(145, 145, 145, 1) 50%, transparent 50%, transparent 100% ); 

By running the gradients in the upper left and upper right, the <div> are filled halfway diagonally.

The rest is just a definition of the place where the inscription should be placed when clicking on the navigation links. I do this by adding and removing widths from the flexible <div> after determining where the user clicked. It will take some time to understand how FlexBox works when adding and subtracting widths from bendable elements, but you can check the code to see this.

I did all this in Chrome using the -webkit- prefixes, so run this JSFiddle in Chrome or Safari: http://jsfiddle.net/dwJbq/

As I said earlier, there are several other ways to do this, and it would be much easier if you hadn’t used the liquid layout. Another idea that you could try is to have a caption for each navigation link, and then show / hide the caption under the link that was clicked. This does not require you to calculate something, but simply change the cutout backgrounds.

Here is an example of how this can be done: http://jsfiddle.net/V4K6K/1/