<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<meta name="viewport" content="width=device-width" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<nav>
<ul>
<li class="menu" id="dropMenu">
<div class="drop-box">
<a class="drop-text" href="#"><i class="hamburger fa fa-bars" aria-hidden="true"></i>Dropdown menu<i class="fa fa-chevron-up rotate"></i></a>
</div>
<ul id="ul">
<li class="home"><div class="arrow"></div><a href="#"><div class="blue-box"></div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 33 33" style="enable-background:new 0 0 33 33;" xml:space="preserve" width="512px" height="512px">
<g>
<path id="home" d="M27.813,31.617H5.186c-0.276,0-0.5-0.224-0.5-0.5V12.521c0-0.276,0.224-0.5,0.5-0.5s0.5,0.224,0.5,0.5v18.096h21.627 V12.521c0-0.276,0.224-0.5,0.5-0.5s0.5,0.224,0.5,0.5v18.596C28.313,31.393,28.09,31.617,27.813,31.617z" fill="#838ea7"/>
<path id="home" d="M32.5,17.492c-0.123,0-0.247-0.045-0.344-0.136L16.499,2.57L0.844,17.355c-0.201,0.19-0.52,0.18-0.707-0.02 c-0.189-0.201-0.181-0.517,0.02-0.707L16.155,1.519c0.193-0.183,0.494-0.182,0.688,0l16.001,15.109 c0.2,0.19,0.209,0.506,0.02,0.707C32.765,17.439,32.633,17.492,32.5,17.492z" fill="#838ea7"/>
<path id="home" d="M20.491,31.617H12.51c-0.276,0-0.5-0.224-0.5-0.5V20.281c0-0.276,0.224-0.5,0.5-0.5h7.981c0.276,0,0.5,0.224,0.5,0.5 v10.836C20.991,31.393,20.767,31.617,20.491,31.617z M13.01,30.617h6.981v-9.836H13.01V30.617z" fill="#838ea7"/>
</g></svg>Home</a></li>
<li class="messages"><a href="#"><div class="blue-box"></div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 31.012 31.012" style="enable-background:new 0 0 31.012 31.012;" xml:space="preserve" width="512px" height="512px">
<g>
<path id='mail' d="M28.512,26.529H2.5c-1.378,0-2.5-1.121-2.5-2.5V6.982c0-1.379,1.122-2.5,2.5-2.5h26.012c1.378,0,2.5,1.121,2.5,2.5v17.047 C31.012,25.408,29.89,26.529,28.512,26.529z M2.5,5.482c-0.827,0-1.5,0.673-1.5,1.5v17.047c0,0.827,0.673,1.5,1.5,1.5h26.012 c0.827,0,1.5-0.673,1.5-1.5V6.982c0-0.827-0.673-1.5-1.5-1.5H2.5z" fill="#838ea7"/>
<path id='mail' d="M15.506,18.018c-0.665,0-1.33-0.221-1.836-0.662L0.891,6.219c-0.208-0.182-0.23-0.497-0.048-0.705 c0.182-0.21,0.498-0.23,0.706-0.049l12.778,11.137c0.64,0.557,1.72,0.556,2.358,0L29.46,5.466c0.207-0.183,0.522-0.162,0.706,0.049 c0.182,0.208,0.16,0.523-0.048,0.705L17.342,17.355C16.836,17.797,16.171,18.018,15.506,18.018z" fill="#838ea7"/>
</g>
</svg>Messages</a></li>
<li class="settings"><a href="#"><div class="blue-box"></div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 611.997 611.996" style="enable-background:new 0 0 611.997 611.996;" xml:space="preserve">
<g>
<g>
<path id='gear' d="M590.113,257.801c15.844-5.637,25.012-19.654,20.905-32.155l-11.975-36.339c-3.043-9.2-12.649-15.144-24.475-15.144 c-3.824,0-7.684,0.608-11.483,1.813l-102.401,14.087c-5.107-6.793-10.737-13.321-17.074-19.792l29.03-99.327 c4.068-8.391,4.963-17.502,2.446-25.101c-1.842-5.566-5.503-9.952-10.281-12.341l-34.131-17.166 c-2.731-1.396-5.725-2.103-8.889-2.103c-10.055,0-20.142,7.083-25.87,18.106l-62.627,82.31c-8.352-1.23-17.046-1.909-25.932-2.018 l-49.635-90.785c-4.545-12.893-15.169-21.842-26.023-21.842c-2.082,0-4.125,0.325-6.097,0.968l-36.279,11.971 c-5.114,1.683-9.395,5.51-12.048,10.78c-3.609,7.157-4.072,16.293-1.301,25.164l14.052,102.37 c-6.966,5.227-13.618,10.96-19.852,17.116l-99.302-29.065c-5.181-2.517-10.719-3.846-16.066-3.846 c-9.638,0-17.594,4.323-21.301,11.593L16.304,181.26c-2.442,4.771-2.789,10.468-0.968,16.039 c2.488,7.616,8.634,14.423,16.918,18.763l82.412,62.567c-1.279,8.86-1.972,17.59-2.053,26.048l-90.679,49.586 c-8.85,3.1-15.946,8.947-19.53,16.123c-2.604,5.217-3.11,10.867-1.431,15.869l11.946,36.447 c3.075,9.176,12.677,15.105,24.468,15.105c3.803,0,7.645-0.604,11.426-1.795l102.486-14.01 c5.139,6.842,10.833,13.465,17.003,19.756l-28.988,99.258c-7.408,15.041-4.096,31.404,7.758,37.516l34.124,17.061 c2.778,1.438,5.817,2.166,9.03,2.166c10.016,0,20.082-7.086,25.807-18.113l62.656-82.256c8.75,1.229,17.459,1.875,25.97,1.922 l49.61,90.746c4.556,12.945,15.134,21.934,25.91,21.934c2.085,0,4.135-0.332,6.054-0.979l36.364-12 c5.104-1.646,9.38-5.439,12.041-10.674c3.638-7.152,4.121-16.316,1.347-25.24L421.896,460.61 c6.87-5.135,13.501-10.807,19.788-16.932l99.355,28.953c5.191,2.537,10.74,3.873,16.105,3.873c9.659,0,17.611-4.348,21.266-11.613 l17.321-34.279c5.842-11.691-1.142-26.836-15.918-34.725l-82.493-62.52c1.215-8.678,1.887-17.406,2.004-26.055L590.113,257.801z M485.427,342.11l86.304,65.41c0.325,0.246,0.671,0.465,1.035,0.652c8.617,4.43,12.346,12.057,10.324,16.104l-17.314,34.264 c-1.209,2.404-4.439,3.838-8.638,3.838c-3.354,0-6.917-0.912-10.303-2.639c-0.396-0.203-0.81-0.369-1.237-0.492l-103.975-30.299 c-2.502-0.736-5.195-0.029-7.012,1.826c-7.623,7.744-15.833,14.768-24.396,20.867c-2.143,1.527-3.263,4.113-2.902,6.719 l14.745,107.275c0.061,0.424,0.155,0.84,0.29,1.248c1.777,5.406,1.657,11.178-0.314,15.055c-0.665,1.314-1.862,3.008-3.828,3.641 l-36.445,12.027c-4.248,1.445-11.238-3.479-14.296-12.643c-0.134-0.398-0.304-0.785-0.505-1.156l-51.926-94.432 c-1.244-2.268-3.619-3.131-6.202-3.131c-0.043,0-0.085,0-0.128,0c-10.479,0-21.156-1.152-31.974-2.902 c-2.587-0.424-5.171,0.352-6.75,2.422l-65.578,85.961c-0.272,0.355-0.509,0.664-0.704,1.062 c-3.566,7.158-9.475,10.865-13.473,10.865c-0.943,0-1.771-0.209-2.619-0.646l-34.134-17.074 c-4.139-2.135-5.673-10.498-1.262-19.086c0.205-0.398,0.367-0.818,0.498-1.25l30.342-103.895c0.731-2.502,0.025-5.205-1.841-7.029 c-7.804-7.648-14.851-15.84-20.948-24.357c-1.527-2.131-4.128-3.256-6.701-2.889L46.281,422.091 c-0.435,0.061-0.862,0.16-1.276,0.297c-2.555,0.852-5.114,1.283-7.616,1.283c-5.521,0-9.967-2.195-11.048-5.414l-11.946-36.449 c-0.629-1.869,0.014-3.811,0.661-5.104c1.947-3.891,6.535-7.432,11.974-9.242c0.399-0.135,0.792-0.303,1.159-0.506l94.902-51.885 c2.297-1.26,3.715-3.684,3.676-6.307c-0.152-10.277,0.693-21.06,2.513-32.059c0.424-2.587-0.615-5.199-2.704-6.782l-86.261-65.49 c-0.343-0.262-0.71-0.491-1.099-0.686c-5.089-2.562-9.09-6.711-10.437-10.833c-0.661-2.018-0.622-3.771,0.138-5.252l17.208-34.215 c1.226-2.407,4.474-3.842,8.687-3.842c3.347,0,6.902,0.905,10.281,2.623c0.389,0.198,0.799,0.357,1.216,0.48l103.939,30.423 c2.506,0.732,5.231,0.018,7.058-1.862c7.51-7.744,15.724-14.823,24.415-21.043c2.135-1.527,3.245-4.11,2.888-6.708L189.903,46.364 c-0.06-0.427-0.156-0.848-0.293-1.258c-1.803-5.45-1.693-11.062,0.293-15.007c0.675-1.339,1.891-3.075,3.849-3.714l36.279-11.967 c0.53-0.191,1.078-0.276,1.668-0.276c4.146,0,10.052,4.492,12.833,12.812c0.131,0.399,0.3,0.785,0.502,1.152l51.929,94.475 c1.241,2.269,3.619,3.177,6.203,3.177c0.018,0,0.036,0,0.053,0l1.516,0.495c10.525,0,20.76,1.096,30.423,2.76 c2.615,0.459,5.23-0.463,6.828-2.559l65.571-86.119c0.269-0.354,0.506-0.7,0.7-1.096c3.565-7.153,9.503-10.878,13.536-10.878 c0.919,0,1.725,0.191,2.498,0.583l34.184,17.198c1.81,0.901,2.735,2.757,3.198,4.149c1.361,4.114,0.615,9.822-1.947,14.89 c-0.194,0.385-0.356,0.788-0.477,1.205l-30.381,103.939c-0.728,2.499-0.028,5.195,1.827,7.019 c8.101,7.977,14.982,15.964,21.04,24.415c1.526,2.131,4.096,3.234,6.708,2.884l107.193-14.745c0.438-0.06,0.866-0.159,1.283-0.3 c2.562-0.859,5.132-1.294,7.648-1.294c5.531,0,9.974,2.188,11.048,5.439l11.971,36.325c1.438,4.375-3.39,11.43-12.613,14.554 c-0.386,0.13-0.761,0.293-1.117,0.491l-94.979,51.805c-2.283,1.248-3.701,3.651-3.684,6.259 c0.078,10.649-0.756,21.478-2.474,32.183C482.303,337.937,483.346,340.534,485.427,342.11z" fill="#838ea7"/>
<path d="M305.976,228.735c-42.613,0-77.28,34.65-77.28,77.241c0,42.634,34.671,77.323,77.28,77.323 c42.616,0,77.284-34.686,77.284-77.323C383.259,263.385,348.588,228.735,305.976,228.735z M305.976,369.163 c-34.82,0-63.144-28.346-63.144-63.187c0-34.798,28.327-63.104,63.144-63.104c34.816,0,63.146,28.31,63.146,63.104 C369.122,340.817,340.792,369.163,305.976,369.163z" fill="#838ea7"/>
</g></svg>Settings</a></li>
</ul>
</li>
</ul>
</nav>
<script type="text/javascript" src="js/scripts.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box; }
body {
background-color: black; }
a {
text-decoration: none;
width: 100%;
height: 100%;
font-family: 'Open Sans';
font-size: 14px;
cursor: default;
color: #838ea7; }
nav {
width: 100%;
top: 30%;
left: 42%;
background-color: #FEFEFE;
position: absolute;
border-radius: 2px;
display: inline-block;
height: 50px;
line-height: 50px;
width: 300px; }
nav ul li ul {
display: none;
margin-top: 20px; }
nav ul li ul li {
display: block; }
nav ul li ul li:hover {
background-color: #F4F4F4; }
nav ul li ul li svg {
margin-left: 20px;
margin-right: 20px; }
nav li li {
background-color: #FEFEFE; }
.home {
border-top-left-radius: 1px;
border-top-right-radius: 1px;
border-bottom: 1px #d7d9dd solid;
position: relative; }
.home svg {
width: 20px;
height: 20px;
position: relative;
top: 4px; }
.home:hover a {
color: #6d6c6c; }
.home:hover .blue-box {
background-color: #3FA6FD;
position: absolute;
margin-left: 0;
height: 100%;
width: 4px; }
.home:hover #home {
fill: #6d6c6c; }
.settings {
border-bottom-left-radius: 1px;
border-bottom-right-radius: 1px;
border-top: 1px #d7d9dd solid; }
.settings svg {
width: 20px;
height: 20px;
position: relative;
top: 4px; }
.settings:hover a {
color: #6d6c6c; }
.settings:hover .blue-box {
background-color: #3FA6FD;
position: absolute;
margin-left: 0;
height: 100%;
width: 4px; }
.settings:hover #gear {
fill: #6d6c6c; }
.messages svg {
width: 20px;
height: 20px;
position: relative;
top: 4px; }
.messages:hover a {
color: #6d6c6c; }
.messages:hover .blue-box {
background-color: #3FA6FD;
position: absolute;
margin-left: 0;
height: 100%;
width: 4px; }
.messages:hover #mail {
fill: #6d6c6c; }
.hamburger {
margin-right: 20px;
margin-left: 20px; }
.arrow {
width: 0;
height: 0;
margin-left: 275px;
border-right: 9px solid transparent;
border-left: 9px solid transparent;
border-bottom: 9px solid #FEFEFE;
position: absolute;
top: -9px; }
.fa-chevron-up {
margin-left: 110px; }
.marked {
background-color: #3FA6FD;
border-radius: 2px; }
.marked1 {
color: #ffffff; }
.rotate {
moz-transition: all 0.3s linear;
webkit-transition: all 0.3s linear;
transition: all 0.3s linear; }
.rotate.down {
moz-transform: rotate(180deg);
webkit-transform: rotate(180deg);
transform: rotate(180deg); }
/*# sourceMappingURL=main.css.map */$(function() {
$('.drop-box').click (function() {
$('#ul')
.fadeToggle();
});
$('.drop-box').on('click', function() {
$(this).toggleClass('marked');
$('.drop-text').toggleClass('marked1');
});
$(".drop-box").click(function(){
$('.rotate').toggleClass("down");
});
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.