Skip to content

Instantly share code, notes, and snippets.

@jramsahai
Created March 23, 2017 16:10
Show Gist options
  • Save jramsahai/03dc2d652e323791394c775427ebe052 to your computer and use it in GitHub Desktop.
Save jramsahai/03dc2d652e323791394c775427ebe052 to your computer and use it in GitHub Desktop.
Dropdown Annotation
<style type="text/css">.navbar {
margin: 5px;
}
ul {
position: relative;
display: block;
list-style-type: none;
margin: 0;
padding: 0;
width: 270px;
}
li {
background-color: #61c661;
border-radius: 2px;
box-shadow: 0 1.5px rgba(0,0,0,0.15);
}
li:hover {
background-color: #3da93d;
border-color: #369636;
-moz-transition: all .15s ease-in;
-o-transition: all .15s ease-in;
-webkit-transition: all .15s ease-in;
transition: all .15s ease-in;
cursor: pointer;
}
li a, li label {
display: block;
padding: 10px 15px;
color: #fff;
text-decoration: none;
cursor: pointer;
}
li a:hover {
background-color: #a1dda1;
-moz-transition: all .15s ease-in;
-o-transition: all .15s ease-in;
-webkit-transition: all .15s ease-in;
transition: all .15s ease-in;
}
.dropdown-arrow {
display: inline;
position: absolute;
width: 25px;
height: 25px;
top: 0;
right: 0;
cursor: pointer;
background-image: url("https://cdn.vidyard.com/hubs/logos/24dcf01c-b572-470d-83ed-c80db58de995.png");
background-position: 19px 7px;
background-repeat: no-repeat;
}
.group {
max-height: 0;
overflow: hidden;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.group-title:checked + label + ul {
max-height: 150px;
}
.group-title:checked + label {
background-image: url("https://cdn.vidyard.com/hubs/logos/be497a24-570d-46bc-8768-68dbd4e14444.png");
}
.group li {
background-color: #8fd68f;
border: 0;
border: 0;
border-radius: 0;
box-shadow: inset 0 -1px #66ba5e;
}</style><nav class="navbar" role="navigation"><ul><li><label for="group_title">Explore the Platform</label> <input id="group_title" class="group-title" type="checkbox" hidden="" /><ul class="group"><li><a target="_blank" href="https://www.vidyard.com/integrations/">Smart Integrations</a></li><li><a target="_blank" href="https://www.vidyard.com/platform/personalized-video/">Personalized Videos</a></li><li><a target="_blank" href="https://www.vidyard.com/platform/engage/">Vidyard Engage</a></li></ul></li></ul></nav>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment