Skip to content

Instantly share code, notes, and snippets.

@adriano66

adriano66/index.html

Created May 8, 2015 21:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save adriano66/b20a0d6ffac0a7ab11ee to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save adriano66/b20a0d6ffac0a7ab11ee to your computer and use it in GitHub Desktop.
Download ZIP
Link group footer popup Additional footer information displayed on click // source http://jsbin.com/xuxibe
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Additional footer information displayed on click">
<meta charset="utf-8">
<title>Link group footer popup</title>
<style id="jsbin-css">
html, body {
background: #dedede;
}
.links {
display: inline-block;
width: 19%;
text-align: left;
}
.box {
display: none;
}
.dummy-box {
z-index: -1;
}
.links a:hover + .box,
.box:target, .dummy-box {
display: block;
position: absolute;
left: 0;
top: 10em;
border: 1px solid #fefefe;
background: #ccc;
padding: 1em;
width: 100%;
min-height: 20px
}
.box:before, .box:after {
content: "";
width: 0;
height: 0;
background: transparent;
position: absolute;
top: -25px;
left: 50%;
border: 15px solid transparent;
border-bottom: 15px solid #ccc;
}
.box:after {
top: -26px;
border: 15px solid transparent;
border-bottom: 15px solid #fefefe;
z-index: -1;
}
#link-01:before, #link-01:after {
left: 5%;
}
#link-02:before, #link-02:after {
left: 25%;
}
#link-03:before, #link-03:after {
left: 45%;
}
#link-04:before, #link-04:after {
left: 65%;
}
#link-05:before, #link-05:after {
left: 85%;
}
</style>
</head>
<body>
<footer>
<div class="dummy-box">Dummy text</div>
<ol>
<li class="links">
<a href="#link-01">01 - Lorem ipsum dolor.</a>
<div id="link-01" class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe placeat porro numquam, aspernatur neque, id!</div>
</li>
<li class="links">
<a href="#link-02">02 - Inventore, optio, unde.</a>
<div id="link-02" class="box">Corporis maxime iste, reiciendis tenetur similique veniam aliquam, praesentium numquam delectus nam nihil laudantium temporibus!</div>
</li>
<li class="links">
<a href="#link-03">03 - Minima, voluptates, incidunt!</a>
<div id="link-03" class="box">Reprehenderit, deserunt error dolorem ullam cum sapiente atque cupiditate odio saepe corporis! Rerum, doloribus, deleniti?</div>
</li>
<li class="links">
<a href="#link-04">04 - Totam, nesciunt, nisi.</a>
<div id="link-04" class="box">Error voluptates a praesentium voluptas accusantium consequuntur totam explicabo, soluta voluptatibus perferendis! Saepe, cupiditate, mollitia.</div>
</li>
<li class="links">
<a href="#link-05">05 - Optio, inventore eius!</a>
<div id="link-05" class="box">Veritatis asperiores nesciunt, saepe veniam quas consequuntur voluptatibus totam, doloribus eum, similique iusto illo quibusdam!</div>
</li>
</ol>
</footer>
<script id="jsbin-source-css" type="text/css">html, body {
background: #dedede;
}
.links {
display: inline-block;
width: 19%;
text-align: left;
}
.box {
display: none;
}
.dummy-box {
z-index: -1;
}
.links a:hover + .box,
.box:target, .dummy-box {
display: block;
position: absolute;
left: 0;
top: 10em;
border: 1px solid #fefefe;
background: #ccc;
padding: 1em;
width: 100%;
min-height: 20px
}
.box:before, .box:after {
content: "";
width: 0;
height: 0;
background: transparent;
position: absolute;
top: -25px;
left: 50%;
border: 15px solid transparent;
border-bottom: 15px solid #ccc;
}
.box:after {
top: -26px;
border: 15px solid transparent;
border-bottom: 15px solid #fefefe;
z-index: -1;
}
#link-01:before, #link-01:after {
left: 5%;
}
#link-02:before, #link-02:after {
left: 25%;
}
#link-03:before, #link-03:after {
left: 45%;
}
#link-04:before, #link-04:after {
left: 65%;
}
#link-05:before, #link-05:after {
left: 85%;
}
</script>
</body>
</html>
Raw
jsbin.xuxibe.css
html, body {
background: #dedede;
}
.links {
display: inline-block;
width: 19%;
text-align: left;
}
.box {
display: none;
}
.dummy-box {
z-index: -1;
}
.links a:hover + .box,
.box:target, .dummy-box {
display: block;
position: absolute;
left: 0;
top: 10em;
border: 1px solid #fefefe;
background: #ccc;
padding: 1em;
width: 100%;
min-height: 20px
}
.box:before, .box:after {
content: "";
width: 0;
height: 0;
background: transparent;
position: absolute;
top: -25px;
left: 50%;
border: 15px solid transparent;
border-bottom: 15px solid #ccc;
}
.box:after {
top: -26px;
border: 15px solid transparent;
border-bottom: 15px solid #fefefe;
z-index: -1;
}
#link-01:before, #link-01:after {
left: 5%;
}
#link-02:before, #link-02:after {
left: 25%;
}
#link-03:before, #link-03:after {
left: 45%;
}
#link-04:before, #link-04:after {
left: 65%;
}
#link-05:before, #link-05:after {
left: 85%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment