This has already been asked, but I need it in a different way. Please have a look at the image below to see the nav bar I try to realize:
Problems:
Of course a static image could do this, but I would like to use something else. Do you have any ideas, how to do that (with as much browser support as possible)?
EDIT:
<nav>
is absolute positioned
Here is what I did so far
But it is not possible to apply a border and the fixed sizes are also problematic.
nav {
float: left;
position: absolute;
background-color: #ffffff;
top: 0;
left: 0;
display: inline;
padding: 12px;
padding-right: 0;
width: auto;
}
.behind_nav {
height: 60px;
width: 523px;
position: absolute;
top: 0;
left: 0;
border-right: 20px solid transparent;
border-top: 48px solid white;
}
.behind_nav
is behind <nav>
(surprise, surprise). Actually this works well except for the shadow and border problem stated above. Also it is bound to a fixed value, which is problematic. <nav>
fits width to content (which might differ due to CMS data / browser)
Rough demo: http://jsfiddle.net/W82UV/3/
I think this covers the crux of your difficulties, i.e. the edge skew, drop shadow, and border.
<div id="top">
The top bar
</div>
<div id="container">
<div id="background">
</div>
<nav>
Test
</nav>
</div>
#top{
background-color: #f0f0f0;
border-bottom: 1px solid #555;
box-shadow: 8px 8px 8px #aaa;
}
#container {
position: relative;
top: -1px;
overflow: hidden;
height: 96px;
}
#background {
background-color: #f0f0f0;
position: absolute;
top: -1px;
left: -32px;
border: 1px solid #555;
width: 400px;
height: 64px;
box-shadow: 8px 8px 8px #aaa;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
-ms-transform: skew(-20deg);
transform: skew(-20deg);
}
Tested in IE 8 (doesn't skew), 9, 10, FF, and Chrome. Note that I would probably rearrange the markup a little to be cleaner for the final solution (better class names and/or IDs), and position everything proportionately.
Looks like a static image for the edges will be the only way (unless you want to get technical and use canvas but that would be silly). You could get the angled edge with a rotated block, but you'd run into problems with the shadow. The text inside the bar doesn't seem like it'd be a problem though - for reference, those nav bars are usually implemented as flat lists.
Sorry I couldn't be of more help !
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With