Skip to content

Instantly share code, notes, and snippets.

@McJay

McJay/clip-nav.css

Last active December 11, 2015 04:28
Show Gist options
  • Save McJay/4545207 to your computer and use it in GitHub Desktop.
Save McJay/4545207 to your computer and use it in GitHub Desktop.
Download ZIP
CSS clip put to good use. Idea is that the clip is used to cut off the box-shadow from top of the drop-down navigation and from the bottom of the parent item so that the current item doesn't cast it's shadow onto the content. This creates seamless areas with shadows without using images. Unfortunately this method requires that one extra span. Ex…
Raw
clip-nav.css
* { margin: 0; padding: 0; }
.clearfix {
zoom: 1;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
zoom: 1;
}
.clearfix:after {
clear: both;
}
#container {
margin: 20%;
}
#content {
background: #E8E8E8;
padding: 50px;
}
ul {
list-style: none outside;
}
#tabs {
background: #CCC;
width: 100%;
}
#tabs > li {
position: relative;
float: left;
z-index: 10;
}
#tabs > li:hover {
z-index: 20;
}
#tabs > li > .clipper {
display: none;
position: absolute;
width: 100%; height: 100%;
top: 0px; left: 0px;
background: #FFF;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
clip: rect(-10px, 1000px, 50px, -10px);
margin: 0;
}
#tabs > li.current > .clipper {
display: block;
top: -3px;
background: #E8E8E8;
padding: 3px 0 0;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
clip: rect(-10px, 1000px, 53px, -10px);
}
#tabs > li:hover > .clipper, #tabs > li.current:hover > .clipper {
display: block;
background: rgba(255,255,255,0.8);
}
#tabs > li > a {
position: relative; overflow: hidden;
display: block; padding: 0 10px;
height: 50px; line-height: 50px;
}
#tabs > li:hover > a {
}
#tabs > li > ul {
display: none;
position: absolute; top: 50px; left: 0px;
background: rgba(255,255,255,0.8);
width: 240px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
overflow: hidden;
clip: rect(0px, 1000px, 1000px, -10px);
}
#tabs > li:hover > ul {
display: block;
}
#tabs > li > ul > li > a {
display: block;
padding: 10px;
}
Raw
clip-nav.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS clip</title>
<meta name="author" content="Miska Närhi">
<link rel="stylesheet" type="text/css" href="css-clip.css">
</head>
<body>
<div id="container">
<ul id="tabs" class="clearfix">
<li><span class="clipper"></span><a href="#">First link</a>
<ul>
<li><a href="#">Second link</a></li>
<li><a href="#">Another one</a></li>
<li><a href="#">Finishing third</a></li>
</ul>
</li>
<li class="current"><span class="clipper"></span><a href="#">Another one</a>
<ul>
<li><a href="#">Second link</a></li>
<li><a href="#">Another one</a></li>
<li><a href="#">Finishing third</a></li>
</ul>
</li>
<li><span class="clipper"></span><a href="#">Finishing third</a>
<ul>
<li><a href="#">Second link</a></li>
<li><a href="#">Another one</a></li>
<li><a href="#">Finishing third</a></li>
</ul>
</li>
</ul>
<div id="content">
<p>Current item shouldn't cast it's shadow on this content area.</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment