Develop Reference

Add automatic animation to hover effect

i am interested in a carousel animation. so far it reacts to hover. So when I go to the second or third element, these areas enlarge and more information is shown. the areas should also open up one after the other or react as if you were driving across the other two areas. i was looking for slides and carousel animation but i don't know exactly what to look for.
$(document).ready(function () {
$(".bloc").hover(function () {
$(this).toggleClass("active"); //Toggle the active class to the area is hovered
$('.first').toggleClass("active"); //Toggle the active class to the area is hovered
});
});
#import url('https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700');
#import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700');
body {
margin: 0;
}
.container {
width: 100%;
height: 100vh;
}
ul {
margin: 0;
padding: 0;
}
ul li {
position: relative;
display: inline-flex;
columns: 3;
width: calc(25% - 22px);
height: calc(100vh - 20px);
margin: 10px;
background-size: cover;
background-position: center center;
transition: .5s all ease-in-out;
overflow: hidden;
}
ul li .bloc {
position: relative;
overflow: hidden;
}
ul li .content {
opacity: 0;
left: 40px;
bottom: 40px;
position: absolute;
border-left: 6px solid #FFF;
padding-left: 20px;
transition: .2s all;
user-select: none;
}
ul li .content H2 {
letter-spacing: 5px;
color: #FFF;
font-size: 35px;
margin: 0;
}
ul li .content H3 {
font-weight: 400;
color: #FFF;
font-size: 25px;
margin: 0;
}
.active .content {
opacity: 1;
transition: 2s all;
transition-delay: .5s;
}
ul li .bloc::before {
opacity: 0;
position: absolute;
content: '';
background-color: rgba(0, 0, 0, 0);
width: 100%;
height: 100%;
animation: opacity 1s;
}
.active {
position: relative;
width: calc(50% - 22px);
transition: .5s all ease-in-out;
}
.active::before {
top: 0;
position: absolute;
content: '';
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
animation: opacity 1s;
}
.first {
background: red;
}
.second {
background: red;
}
.third {
float: right;
background: red;
}
#keyframes opacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<ul>
<li class="bloc first active">
<div class="content">
<H2>First title</H2>
<H3>It's a first subtitle</H3>
</div>
</li>
<li class="bloc second">
<div class="content">
<H2>Second title</H2>
<H3>Subtitle</H3>
</div>
</li>
<li class="bloc third">
<div class="content">
<H2>Third title</H2>
<H3>Last subtitle</H3>
</div>
</li>
</ul>
</div>
to describe it better, I added a gif animation of how the elements should behave.

You can use setInterval to create a continuous animation and temporarily stop that interval when the user hovers over one of the slides.
$(document).ready(function() {
const animation = () => {
const activeCarouselElement = $('.bloc.active');
activeCarouselElement.removeClass('active');
const nextCarouselElement = activeCarouselElement.next().length ? activeCarouselElement.next() : activeCarouselElement.siblings()[0];
$(nextCarouselElement).addClass('active');
};
let animationInterval = setInterval(animation, 3500);
$(".bloc").hover(function() {
$('.bloc.active').removeClass("active");
$(this).addClass("active");
clearInterval(animationInterval);
});
$(".bloc").mouseleave(function() {
animationInterval = setInterval(animation, 3500);
});
});
#import url('https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700');
#import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700');
body {
margin: 0;
}
.container {
width: 100%;
height: 100vh;
}
ul {
margin: 0;
padding: 0;
}
ul li {
position: relative;
display: inline-flex;
columns: 3;
width: calc(25% - 22px);
height: calc(100vh - 20px);
margin: 10px;
background-size: cover;
background-position: center center;
transition: .5s all ease-in-out;
overflow: hidden;
}
ul li .bloc {
position: relative;
overflow: hidden;
}
ul li .content {
opacity: 0;
left: 40px;
bottom: 40px;
position: absolute;
border-left: 6px solid #FFF;
padding-left: 20px;
transition: .2s all;
user-select: none;
}
ul li .content H2 {
letter-spacing: 5px;
color: #FFF;
font-size: 35px;
margin: 0;
}
ul li .content H3 {
font-weight: 400;
color: #FFF;
font-size: 25px;
margin: 0;
}
.active .content {
opacity: 1;
transition: 2s all;
transition-delay: .5s;
}
ul li .bloc::before {
opacity: 0;
position: absolute;
content: '';
background-color: rgba(0, 0, 0, 0);
width: 100%;
height: 100%;
animation: opacity 1s;
}
.active {
position: relative;
width: calc(50% - 22px);
transition: .5s all ease-in-out;
}
.active::before {
top: 0;
position: absolute;
content: '';
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
animation: opacity 1s;
}
.first {
background: red;
}
.second {
background: red;
}
.third {
float: right;
background: red;
}
#keyframes opacity {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<ul>
<li class="bloc first active">
<div class="content">
<H2>First title</H2>
<H3>It's a first subtitle</H3>
</div>
</li>
<li class="bloc second">
<div class="content">
<H2>Second title</H2>
<H3>Subtitle</H3>
</div>
</li>
<li class="bloc third">
<div class="content">
<H2>Third title</H2>
<H3>Last subtitle</H3>
</div>
</li>
</ul>
</div>

Link not opening when clicked on the href in li tag

I'm using https://codepen.io/ryanmorr/pen/LVzYmx/ Small trouble but major problem
When I click the link a href it won't open, These code seem correct?
So I'm inserting all the css, js - these might trigger this un-open-able link. But in my opinion use only a href should work just fine right?
I'm not sure it's only happen to me, or anyone else?
[].slice.call(document.querySelectorAll('.dropdown .nav-link')).forEach(function(el){
el.addEventListener('click', onClick, false);
});
function onClick(e){
e.preventDefault();
var el = this.parentNode;
el.classList.contains('show-submenu') ? hideSubMenu(el) : showSubMenu(el);
}
function showSubMenu(el){
el.classList.add('show-submenu');
document.addEventListener('click', function onDocClick(e){
e.preventDefault();
if(el.contains(e.target)){
return;
}
document.removeEventListener('click', onDocClick);
hideSubMenu(el);
});
}
function hideSubMenu(el){
el.classList.remove('show-submenu');
}
/* Page */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
background-color: #3498db;
}
.nav {
width: 320px;
margin: 0 auto 0 auto;
text-align: center;
}
/* Navigation */
.nav {
font-family: Georgia, Arial, sans-serif;
font-size: 16px;
}
.nav-items {
padding: 0;
list-style: none;
}
.nav-item {
display: inline-block;
margin-right: 8px;
}
.nav-item:last-child {
margin-right: 0;
}
.nav-link,
.nav-link:link,
.nav-link:visited,
.nav-link:active,
.submenu-link,
.submenu-link:link,
.submenu-link:visited,
.submenu-link:active {
display: block;
position: relative;
font-size: 14px;
letter-spacing: 1px;
cursor: pointer;
text-decoration: none;
outline: none;
}
.nav-link,
.nav-link:link,
.nav-link:visited,
.nav-link:active {
color: #fff;
font-weight: bold;
}
.nav-link::before {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 3px;
background: rgba(0,0,0,0.2);
opacity: 0;
-webkit-transform: translate(0, 10px);
transform: translate(0, 10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.nav-link:hover::before,
.nav-link:hover::before {
opacity: 1;
-webkit-transform: translate(0, 5px);
transform: translate(0, 5px);
}
.dropdown {
position: relative;
}
.dropdown .nav-link {
padding-right: 15px;
height: 17px;
line-height: 17px;
}
.dropdown .nav-link::after {
content: "";
position:absolute;
top: 6px;
right: 0;
border: 5px solid transparent;
border-top-color: #fff;
}
.submenu {
position: absolute;
top: 100%;
left: 50%;
z-index: 100;
width: 200px;
margin-left: -100px;
background: #fff;
border-radius: 3px;
line-height: 1.46667;
margin-top: -5px;
box-shadow: 0 0 8px rgba(0,0,0,.3);
opacity:0;
-webkit-transform: translate(0, 0) scale(.85);
transform: translate(0, 0)scale(.85);
transition: transform 0.1s ease-out, opacity 0.1s ease-out;
pointer-events: none;
}
.submenu::after,
.submenu::before {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -10px;
border: 10px solid transparent;
height: 0;
}
.submenu::after {
border-bottom-color: #fff;
}
.submenu::before {
margin-left: -13px;
border: 13px solid transparent;
border-bottom-color: rgba(0,0,0,.1);
-webkit-filter:blur(1px);
filter:blur(1px);
}
.submenu-items {
list-style: none;
padding: 10px 0;
}
.submenu-item {
display: block;
text-align: left;
}
.submenu-link,
.submenu-link:link,
.submenu-link:visited,
.submenu-link:active {
color: #3498db;
padding: 10px 20px;
}
.submenu-link:hover {
text-decoration: underline;
}
.submenu-seperator {
height: 0;
margin: 12px 10px;
border-top: 1px solid #eee;
}
.show-submenu .submenu {
opacity: 1;
-webkit-transform: translate(0, 25px) scale(1);
transform: translate(0, 25px) scale(1);
pointer-events: auto;
}
<nav class="nav" id="header">
<ul class="nav-items">
<li class="nav-item dropdown">
<a class="nav-link"><span>Link</span></a>
<nav class="submenu">
<ul class="submenu-items">
<li class="submenu-item">Facebook</li>
<li class="submenu-item">This HTML</li>
<li class="submenu-item"><hr class="submenu-seperator" /></li>
<li class="submenu-item">Google</li>
</ul>
</nav>
</li>
<li class="nav-item dropdown">
<a class="nav-link"><span>Info</span></a>
<nav class="submenu">
<ul class="submenu-items">
<li class="submenu-item"><a class="submenu-link">???</a></li>
</ul>
</nav>
</li>
</ul>
</nav>
Thank you in advance

It seems that e.preventDefault(); causes the issue. Please, remove it from:
function showSubMenu(el){
el.classList.add('show-submenu');
document.addEventListener('click', function onDocClick(e){
e.preventDefault(); //this line
if(el.contains(e.target)){
return;
}
document.removeEventListener('click', onDocClick);
hideSubMenu(el);
});
}
It should now open the link as you might expect.
Explanation:
Have a look here. You can see that adding e.preventDefault(); will continue propagating until it is stopped.
So if you prevent the default event on a parent element, then that will propagate to all of the children as well. It means that the default behaviour for href will be also prevented.

Unwanted highlight of element

So I have a dot navigation but when I click one time under the third dot or at the left of the three dots there is a redish box highlighting, I already tried user-select: none or even the ::selection property and put the background color to transparent but the highlighting still remains, would there have any other css property or method that could cancel that?
$(document).ready(() => {
document.getElementById("event").addEventListener("click", e => {
const allItems = $('#event > li');
for (let i = 0; i < allItems.length; i++) {
allItems[i].classList.remove("is-active");
}
e.target.classList.add("is-active");
})
});
html{
user-select: none;
}
::selection{
background-color: transparent;
}
.is-active{
transform: scale(1.2);
background: red !important;
}
#vertical-nav {
position: fixed;
z-index: 3;
right: 15px;
bottom: 0;
margin: auto 0;
height: 100%;
display: flex;
align-items: center;
}
#vertical-nav ul > li {
background: black;
width: 13px;
height: 13px;
margin-bottom: 15px;
border-radius: 50%;
transition: 0.4s ease-in-out;
}
#vertical-nav ul > li a {
display: none;
float: right;
color: black;
margin-right: 13px;
margin-top: -5px;
font-size: 10px;
transition: 0.4s ease-in-out;
padding: 3px;
border-radius: 10px;
}
#vertical-nav ul > li:hover {
cursor: pointer;
transform: scale(1.2);
background: lightgrey;
}
#vertical-nav ul > li:hover a {
//opacity: 1;
}
#vertical-nav ul > li:hover a {
//opacity: 1;
}
ul > li {
list-style-type: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="vertical-nav">
<ul id="event">
<li>
<a data-number="1">Home</a>
</li>
<li>
<a data-number="2">About</a>
</li>
<li>
<a data-number="3">Contact</a>
</li>
</ul>
</nav>

Because you are adding the event listener to the whole container. You should target only the bullet. Since you are using jQuery you can also simplify your code:
$(document).ready(() => {
$("#event > li").click(function() {
$('#event > li').removeClass('is-active')
$(this).addClass("is-active");
})
});
html {
user-select: none;
}
::selection {
background-color: transparent;
}
.is-active {
transform: scale(1.2);
background: red !important;
}
#vertical-nav {
position: fixed;
z-index: 3;
right: 15px;
bottom: 0;
margin: auto 0;
height: 100%;
display: flex;
align-items: center;
}
#vertical-nav ul>li {
background: black;
width: 13px;
height: 13px;
margin-bottom: 15px;
border-radius: 50%;
transition: 0.4s ease-in-out;
}
#vertical-nav ul>li a {
opacity: 0;
float: right;
color: black;
margin-right: 13px;
margin-top: -5px;
font-size: 10px;
transition: 0.4s ease-in-out;
padding: 3px;
border-radius: 10px;
}
#vertical-nav ul>li:hover {
cursor: pointer;
transform: scale(1.2);
background: lightgrey;
}
#vertical-nav ul>li:hover a {
//opacity: 1;
}
#vertical-nav ul>li:hover a {
//opacity: 1;
}
ul>li {
list-style-type: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="vertical-nav">
<ul id="event">
<li>
<a data-number="1">Home</a>
</li>
<li>
<a data-number="2">About</a>
</li>
<li>
<a data-number="3">Contact</a>
</li>
</ul>
</nav>

Why not use jQuery all the way and not check the click on the UL
The issue with your code was that you add is-active to the UL when clicking next to the LI
$(document).ready(() => {
$("#event li").on("click", function() {
$(this).siblings().removeClass("is-active");
$(this).addClass("is-active");
})
});
html {
user-select: none;
}
::selection {
background-color: transparent;
}
.is-active {
transform: scale(1.2);
background: red !important;
}
#vertical-nav {
position: fixed;
z-index: 3;
right: 15px;
bottom: 0;
margin: auto 0;
height: 100%;
display: flex;
align-items: center;
}
#vertical-nav ul>li {
background: black;
width: 13px;
height: 13px;
margin-bottom: 15px;
border-radius: 50%;
transition: 0.4s ease-in-out;
}
#vertical-nav ul>li a {
opacity: 0;
float: right;
color: black;
margin-right: 13px;
margin-top: -5px;
font-size: 10px;
transition: 0.4s ease-in-out;
padding: 3px;
border-radius: 10px;
}
#vertical-nav ul>li:hover {
cursor: pointer;
transform: scale(1.2);
background: lightgrey;
}
#vertical-nav ul>li:hover a {
//opacity: 1;
}
#vertical-nav ul>li:hover a {
//opacity: 1;
}
ul>li {
list-style-type: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="vertical-nav">
<ul id="event">
<li>
<a data-number="1">Home</a>
</li>
<li>
<a data-number="2">About</a>
</li>
<li>
<a data-number="3">Contact</a>
</li>
</ul>
</nav>

simple css solution would be
a.is-active{
transform: scale(1.2);
background: red !important;
}

Problems with the responsive navigation menu

I have a problem with my navigation menu... it works great on desktops and notebooks, but not on mobile devices.
So, someone can help-me?
Here is the following code for the menu in Desktops/Notebooks screens:
#media only screen and (min-width: 768px) {
/*
/ nav
*/
nav {
width: 100%;
background: #000;
border-bottom: 5px solid white;
position: relative;
font-family: 'Decker';
}
nav:after {
content: '';
height: 8px;
width: 100%;
background: inherit;
position: absolute;
bottom: -15px;
left: 0px;
z-index: 1;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav a {
color: #fff;
text-decoration: none;
}
.nav__cat {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
max-width: 100%;
margin: auto;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-bottom: .6em;
}
.nav__li {
display: inline-block;
list-style: none;
position: relative;
padding: 0 .5em;
}
.nav__li:last-child a:before {
display: none;
}
.nav__li:hover > a {
background: #b42024;
text-decoration: none;
color: #fff;
}
.nav__li:hover > a:after {
display: block;
}
.nav__li:hover .sub__category {
visibility: visible;
opacity: 1;
}
.nav__li > a {
display: inline-block;
padding: 25.6px 0.6em 0.7em 0.6em;
position: relative;
font-size: 18px;
line-height: 1;
}
.nav__li > a:before {
content: "|";
display: block;
position: absolute;
right: -10px;
top: 25.6px;
-webkit-transform: translateY(-4%);
transform: translateY(-4%);
line-height: inherit;
font-size: inherit;
}
.nav__li > a:after {
display: none;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
.sub__category {
visibility: hidden;
opacity: 0;
}
.sub__category {
position: absolute;
top: 100%;
left: 0px;
min-width: 160px;
width: 100%;
z-index: 3;
margin: 0 .5em;
padding-top: 23px;
-webkit-transition: all .12s linear;
transition: all .12s linear;
}
.sub__li {
text-align: center;
border-bottom: 2px #000 solid;
background: #b42024;
}
.sub__link {
padding: .7em 1em;
display: block;
font-size: 14px;
}
.sub__link:hover {
background: #fff;
color: #000;
text-decoration: none;
}
nav li a.active {
background: #b42024;
color: #fff;
text-decoration: none;
}
nav li a.active:after {
display: block;
content: "";
position: absolute;
bottom: -25px;
left: 0px;
width: 100%;
height: 8px;
background: #fac312;
z-index: 2;
}
.sub__li a.active-sub {
background: #fff;
color: #000;
text-decoration: none;
}
}
input#control-nav {
visibility: hidden;
position: absolute;
left: -9999px;
opacity: 0;
}
<header>
...
...
...
</header>
<input type="checkbox" id="control-nav" />
<label for="control-nav" class="control-nav"></label>
<label for="control-nav" class="control-nav-close"></label>
<nav>
<ul class="nav__cat">
<li class="nav__li">
Home
</li>
<li class="nav__li">
Sobre a Gente
<ul class="sub__category">
<li class="sub__li">
Sub-page
</li>
<li class="sub__li">
Other sub-page
</li>
<li class="sub__li">
Another sub-page
</li>
</ul>
</li>
<li class="nav__li">
How find us
</li>
<li class="nav__li">
Contact us
</li>
</ul>
</nav>
I try to transform this menu in Responsive... and i get this:
#media (max-width: 767px) {
.control-nav { /* label icon */
position: absolute;
right: 20px;
top: 20px;
display: block;
width: 30px;
padding: 5px 0;
border: solid #333;
border-width: 3px 0;
z-index: 2;
cursor: pointer;
}
.control-nav:before {
content: "";
display: block;
height: 3px;
background: #333;
}
.control-nav-close {
position: fixed; /* label layer */
right: 0;
top: 0;
bottom: 0;
left: 0;
display: block;
z-index: 1;
background: rgba(0,0,0,0.4);
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
-webkit-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
transform: translate(100%, 0);
}
/* checked nav */
input#control-nav {
visibility: visible;
}
input#control-nav:focus ~ .control-nav {
border-color: #000;
box-shadow: 0px 0px 9px rgba(0,0,0,0.3);
}
input#control-nav:focus ~ .control-nav:before {
background: #000;
}
input#control-nav:checked ~ nav,
input#control-nav:checked ~ .control-nav-close {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
/*
/ nav
*/
nav {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 250px;
border-left: 1px solid #ccc;
background: #fff;
overflow-x: auto;
z-index: 2;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
-webkit-transform: translate(100%, 0);
-ms-transform: translate(100%, 0);
transform: translate(100%, 0);
}
nav ul {
list-style: none;
background: #1c1c1c;
padding: 5px 0;
}
nav li a {
display: block;
padding: 0 20px;
color: #fff;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.1em;
letter-spacing: 0.1em;
line-height: 2em;
height: 2em;
border-bottom: 1px solid #383838;
}
nav li:last-child a {
border-bottom: none;
}
nav li a:hover,
nav li a:focus {
color: #1c1c1c;
background: #ccc;
}
}
<header>
...
...
...
</header>
<input type="checkbox" id="control-nav" />
<label for="control-nav" class="control-nav"></label>
<label for="control-nav" class="control-nav-close"></label>
<nav>
<ul class="nav__cat">
<li class="nav__li">
Home
</li>
<li class="nav__li">
Sobre a Gente
<ul class="sub__category">
<li class="sub__li">
Sub-page
</li>
<li class="sub__li">
Other sub-page
</li>
<li class="sub__li">
Another sub-page
</li>
</ul>
</li>
<li class="nav__li">
How find us
</li>
<li class="nav__li">
Contact us
</li>
</ul>
</nav>
I appreciate it the help!
Oh and sorry for my English!, It's not great.

Front end web development

I want to make the button in top right and what it showed after click on it at the corrner of codepen.io site. Someone can fix my code and indicate the errors ?
$(document).ready(function(){
$(".nut").click(function(){
$(".choose").toggle(200);
});
});
#import url(fonts.googleapis.com/css?family=Lato:400,900,400italic,700italic);
html, body{
font-family: 'Open Sans', sans-serif;
}
#container{
background-color: #0d0d0d;
}
.nut{
position: absolute;
top: 10px;
right: 10px;
}
.nut a img{
border-radius: 3px;
cursor: pointer;
height: 44px;
}
.choose{
border: 1px solid black;
width: 200px;
height: 350px;
position: absolute;
top: 64px;
right: 0;
display: hidden;
}
.choose ul{
padding: 0px;
list-style-type: none;
}
.choose .one li{
cursor: pointer;
position: ralative;
padding: 8px 15px 10px;
}
.choose .one li a{
font-size: 15px;
}
.choose .one li:nth-child(7){
border-bottom: 1px solid black;
margin-bottom: 3px;
}
.choose .one li:hover{
background-color: #e6e6e6;
}
.choose .two li{
padding: 0 ;
display: inline;
opacity: .5;
}
.choose .two ul li{
font-size: 7px;
}
.choose .two li:hover{
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nut">
<a><img src="//gravatar.com/avatar/7630787fd05d0b926f921213710bb074?s=80">
</a>
</div>
<div class="choose">
<ul class="one">
<li><a>New Pen</a></li>
<li><a>New Post</a></li>
<li><a>Recent Activity</a></li>
<li><a>Embed Theme Builder</a></li>
<li><a>Settings</a></li>
<li><a>Help</a></li>
<li><a>Log Out</a></li>
<li><a>Your Profile</a></li>
<li>
<ul class="two">
<li><a>Pens</a></li>
<li><a>Posts</a></li>
<li><a>Collections</a></li>
</ul>
<li>
</ul>
</div>

Have a look at my example. all you need to do is have the proper CSS and toggle the open class: JSFiddle
$(document).ready(function(){
$(".user-stuff").click(function(){
$('.user-dropdown').toggleClass('open');
});
});
#import url(fonts.googleapis.com/css?family=Lato:400,900,400italic,700italic);
a {
font-family: 'Lato';
}
.user-dropdown {
background: white;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
position: absolute;
top: 100%;
padding: 5px 0;
width: 200px;
color: #222;
opacity: 0;
visibility: hidden;
-webkit-transition: -webkit-transform 0.15s, opacity 0.15s;
transition: transform 0.15s, opacity 0.15s;
-webkit-transform: scale(0.95);
-ms-transform: scale(0.95);
transform: scale(0.95);
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
transform-origin: top right
}
.open.user-dropdown {
visibility: visible;
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1)
}
#mini-personal-avatar {
border-radius: 2px;
cursor: pointer
}
.link-list,
.link-list ul,
.link-list ol {
list-style: none
}
.link-list a {
color: black;
display: block;
padding: 8px 15px 10px;
line-height: 1.1;
text-shadow: none;
text-decoration: none
}
.link-list a:hover,
.link-list a:focus {
color: inherit;
background: #E7E7E7
}
.link-list a.active {
background: #ccc
}
.link-list a.active .view-meta {
color: #666
}
.user-dropdown {
top: 45px;
left: 0 !important;
right: 0;
}
.user-dropdown>li {
position: relative
}
.user-dropdown>li.sep-after {
border-bottom: 1px solid #666;
padding-bottom: 5px
}
.user-dropdown>li.sep-after+li {
padding-top: 5px
}
.user-dropdown .context-switcher {
position: relative;
padding: 0 !important
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="user-stuff header-chunk">
<img id="mini-personal-avatar" src="//gravatar.com/avatar/b10c8837fdebfca4078b6bad5217c2de?s=80" width="44" height="44" class="user-avatar" alt="User Gravatar" data-dropdown="#user-dropdown">
</div>
<ul class="user-dropdown link-list is-dropdown" id="user-dropdown">
<li class="dropdown-newpen">
<a href="/pen/">
New Pen
</a>
</li>
<li class="dropdown-newpost">
<a href="/write/">
New Post
</a>
</li>
<li class="dropdown-activity">
<a href="/ilanus/activity/">
Recent Activity
</a>
</li>
<li class="dropdown-embedbuilder">
<a href="/ilanus/embed/builder/public/">
Embed Theme Builder
</a>
</li>
<li class="dropdown-yoursettings">
<a href="/ilanus/settings/editor/">
Settings
</a>
</li>
<li class="dropdown-help">
<a href="http://blog.codepen.io/documentation/">
Help
</a>
</li>
<li class="dropdown-logout sep-after">
<a href="/login/logout" id="logout">
Log Out
</a> </li>
</ul>