JavaScript | Nice dropdown menu! (HTML, CSS, JS) ...

<!DOCTYPE html>
<html lang="en" >

<title>CodePen - Nice dropdown menu!</title>

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 */
</style>

</head>

<body translate="no">
  <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>
  
      <script id="rendered-js" >
$(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");
  });

});
//# sourceURL=pen.js
    </script>

</body>

</html>

Comments 0

Note: