css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
                <div class="side-menu" data-loaded="0" data-menu-type="icon">
		<div class="background"></div>

		<ul>
			<li>
				<a class="icon sience">
					<!-- <img src="img/sience.svg"> -->
					<span>Menu-1</span>
				</a>
				<ul>
					<li>
						<a href="#menu-1-1" class="icon pen">
							<!-- <img src="img/pen.svg"> -->
							<span>Menu-1-1</span>
						</a>
					</li>
					<li>
						<a href="#menu-1-2" class="icon cloud">
							<!-- <img src="img/cloud.svg"> -->
							<span>Menu-1-2</span>
						</a>
					</li>
				</ul>
			</li>
			
			<li>
				<a href="#menu-2" class="icon book">
					<!-- <img src="img/book.svg"> -->
					<span>Menu-2</span>
				</a>
			</li>

			<li>
				<a class="icon graph_up">
					<!-- <img src="img/graph_up.svg"> -->
					<span>Menu-3</span>
				</a>
				<ul>
					<li>
						<a href="#menu-3-1" class="icon graph">
							<!-- <img src="img/graph.svg"> -->
							<span>Menu-3-1</span>
						</a>
					</li>
					<li>
						<a href="#menu-3-2" class="icon graph2">
							<!-- <img src="img/graph2.svg"> -->
							<span>Menu-3-2</span>
						</a>
						<ul>
							<li>
								<a href="#menu-3-1" class="icon calc">
									<!-- <img src="img/calc.svg"> -->
									<span>Menu-3-1</span>
								</a>
							</li>
							<li data-dropdown="1">
								<a href="#menu-3-2" class="icon paper">
									<!-- <img src="img/paper.svg"> -->
									<span>Menu-3-2</span>
								</a>
								<ul>
									<li>
										<a href="#menu-3-2-1" class="icon graph_up">Menu-3-2-1</a>
									</li>
									<li>
										<a href="#menu-3-2-1" class="icon graph_up">Menu-3-2-2</a>
									</li>
									<li data-dropdown="1">
										<a href="#menu-3-2-3" class="icon graph_up">Menu-3-2-3</a>
										<ul>
											<li>
												<a href="#menu-3-2-3-1" class="icon graph_up">Menu-3-2-3-1</a>
											</li>
											<li>
												<a href="#menu-3-2-3-2" class="icon graph_up">Menu-3-2-3-2</a>
											</li>
											<li>
												<a href="#menu-3-2-3-3" class="icon graph_up">Menu-3-2-3-3</a>
											</li>
										</ul>
									</li>
								</ul>
							</li>
						</ul>

					</li>
				</ul>
			</li>
		</ul>

  </div>
            
          
!
            
              html,body{
  margin  : 0;
  padding : 0;
  border  : 0;
  width   : 100%;
  height  : 100%;
}
*, *:before, *:after {
  -webkit-box-sizing : border-box;
     -moz-box-sizing : border-box;
       -o-box-sizing : border-box;
      -ms-box-sizing : border-box;
          box-sizing : border-box;
}

.close{
  cursor:pointer;
}

.side-menu[data-loaded="0"] > *{
  display:none;
}
.side-menu[data-loaded="1"] > *{
  display:block;
}


/* Side-menu */
.side-menu[data-menu-type="normal"]{
  width : 200px;
  min-height:100%;
  background-color:white;
  box-shadow:1px 0px 10px rgba(51,51,51,0.3);
}
.side-menu[data-menu-type="normal"] ul{
  padding:0;
  margin:0;
  border:0;
}
.side-menu[data-menu-type="normal"] li{
  padding:0;
  margin:0;
  border:0;
  list-style:none;
}
.side-menu[data-menu-type="normal"] > ul > li{
  min-height:60px;
  line-height:60px;
  background-color:white;
}
.side-menu[data-menu-type="normal"] > ul > li li{
  line-height:40px;
  background-color:#eef;
}


.side-menu[data-menu-type="normal"] a{
  display:block;
  border-bottom:1px solid #ccc;
  white-space:nowrap;
  overflow:hidden;
}
.side-menu[data-menu-type="normal"] ul > li > a{
  position : relative;
  padding-left:10px;
  text-decoration:none;
  border-right:1px solid #ccc;
}
.side-menu[data-menu-type="normal"] > ul > li > ul > li > a{
  padding-left:10px;
}

.side-menu[data-menu-type="normal"] li[data-dropdown="1"] > a:after{
  content: "";
  position : absolute;
  right : 4px;
  top : 50%;
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: middle;
  border-top: 6px dashed;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  box-sizing: border-box;
  margin-left:4px;
}
.side-menu[data-menu-type="normal"] a:hover{
  background-color:#fdd;
}

.side-menu[data-menu-type="normal"] > ul > li ul > li > a{
  height:0;
  overflow:hidden;
  border-bottom-width:0px;
}

/* ecpand-open */
.side-menu[data-menu-type="normal"] li[data-view="1"] > ul > li > a{
  animation: menu-list-open 0.1s linear forwards;
}
/* expand-close */
.side-menu[data-menu-type="normal"] li[data-view="0"] > ul > li > a{
  animation: menu-list-close 0.1s linear forwards;
}

/* Icon */
.side-menu[data-menu-type="normal"] img{
  height : 30px;
  vertical-align : middle;
  margin-right:8px;
  border:1px solid black;
  border-radius:50%;
  padding:3px;
  background-color:#CFC;
}

@keyframes menu-list-open{
  0%{
    height:0;
    border-bottom-width:0px;
  }
  100%{
    height:40px;
    border-bottom-width:1px;
  }
}
@keyframes menu-list-close{
  0%{
    height:40px;
    border-bottom-width:1px;
  }
  100%{
    height:0;
    border-bottom-width:0px;
  }
}




.side-menu[data-menu-type="icon"]{
  width : 100%;
  min-height:100%;
  box-shadow:none;
  position:relative;
}
.side-menu[data-menu-type="icon"] ul{
  width:80px;
  padding:0;
  margin:0;
  border:0;
  background-color:white;
}

.side-menu[data-menu-type="icon"] li{
  padding:0;
  margin:0;
  border:0;
  list-style:none;
}
.side-menu[data-menu-type="icon"] > ul > li,
.side-menu[data-menu-type="icon"] ul > li{
  min-height:auto;
  height:100%;
  line-height:80px;
  position:relative;
}
.side-menu[data-menu-type="icon"] > ul > li li{
  line-height:normal;
  background-color:white;
}


.side-menu[data-menu-type="icon"] a{
  display:block;
  border-bottom:1px solid #ccc;
  white-space:nowrap;
  text-decoration:none;
}
.side-menu[data-menu-type="icon"] ul > li > a{
  border-right:0;
  width:80px;
  height:80px;
  font-size:10px;
  text-align:center;
  display:block;
  padding:4px 0;
  position:relative;
  line-height:normal;
}
.side-menu[data-menu-type="icon"] > ul > li > ul > li > a{
  padding-left:0;
}

.side-menu[data-menu-type="icon"] li[data-dropdown="1"] > a:after{
  content: "";
  top : 56px;
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: middle;
  border-top: 6px dashed;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  box-sizing: border-box;
  margin-left:4px;
}
.side-menu[data-menu-type="icon"] a:hover{
  background-color:#fdd;
}

/* ecpand-open */
.side-menu[data-menu-type="icon"] li[data-view="1"] > ul{
  animation: menu-list-open-small 0.1s linear forwards;
}

/* expand-close */
.side-menu[data-menu-type="icon"] li[data-view="0"] > ul{
  animation: menu-list-close-small 0.1s linear forwards;
}


/* Icon */
.side-menu[data-menu-type="icon"] img{
  width:40px;
  height:40px;
  border:1px solid black;
  border-radius:50%;
  padding:3px;
  background-color:#CFC;
  
  display:block;
  margin:4px 20px;
}

.side-menu[data-menu-type="icon"] > ul > li[data-dropdown="1"] ul{
  position:absolute;
  top:0;
  left:80px;
  overflow:hidden;
  border:0px solid #ccc;
  margin-top:-1px;
}

.side-menu[data-menu-type="icon"] > ul > li ul{
  width:0;
}

.side-menu[data-menu-type="icon"][data-view-submenu="1"] > .background{
  width:calc(100% - 80px);
  background-color:rgba(0,0,0,0.3);
}
.side-menu[data-menu-type="icon"] > .background{
  position:absolute;
  top:0;
  left:80px;
  width:1px;
  height:100%;
  background-color:rgba(0,0,0,0.2);
  border-left:1px solid #ccc;
}


@keyframes menu-list-open-small{
  0%{
    width:0;
    border-width:0px 0px 0px 0px;
    overflow:hidden;
  }
  100%{
    width:82px;
    border-width:1px 1px 0 1px;
    overflow:visible;
  }
}
@keyframes menu-list-close-small{
  0%{
    width:82px;
    border-width:1px 1px 0 1px;
    overflow:visible;
  }
  100%{
    width:0;
    border-width:0px 0px 0px 0px;
    overflow:hidden;
  }
}




.side-menu .icon.sience:before{
  content:url("data:image/svg+xml;base64,PCEtLT94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPy0tPgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+Cgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9Il94MzJfIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJ3aWR0aDogMjU2cHg7IGhlaWdodDogMjU2cHg7IG9wYWNpdHk6IDE7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojNEI0QjRCO30KPC9zdHlsZT4KPGc+Cgk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDgwLjA3NywxMzIuMDJjLTIzLjk5Ni00MS41NjgtNzYuMjk5LTQxLjc2NS0xMjguOTA4LTI3LjYwOEMzNDQuNTQ4LDYxLjg0MiwzMjMuNzYzLDAsMjYwLjcxOSwwCgkJYy00Ny45OSwwLTc0LjI4OSw0NS4wNzgtODguMzQ4LDk3LjY4NkMxMzIuMjE1LDgyLjIyNSw2OC4xNjUsNjkuMjc1LDM2LjY0MSwxMjMuOThjLTIzLjk5MSw0MS41NjgsMS45MTEsODYuOTQyLDQwLjQ2LDEyNS4zOTIKCQljLTMzLjUyOSwyNy4wMTEtNzYuNzAxLDc2LTQ1LjE3NiwxMzAuNjA4YzIzLjk5Niw0MS41NjgsNzYuMjk5LDQxLjc2NSwxMjguODA0LDI3LjYwOEMxNjcuNDU0LDQ1MC4xNTYsMTg4LjIzMyw1MTIsMjUxLjI4Myw1MTIKCQljNDcuOTg2LDAsNzQuMjg5LTQ1LjE3Niw4OC4zNDMtOTcuNzg0YzQwLjI2LDE1LjU1OSwxMDQuMjA2LDI4LjQxMSwxMzUuNzMtMjYuMTk2YzIzLjk5Ni00MS40NzEtMS45MDYtODYuODQzLTQwLjQ1NS0xMjUuMjk0CgkJQzQ2OC40MywyMzUuNjE3LDUxMS41OTYsMTg2LjYyNyw0ODAuMDc3LDEzMi4wMnogTTQ0Ni43NDMsMzc1LjE2NmMtMjAuODgyLDM2LjA0LTcwLjU3MywyNC44OTItMTAxLjM5NiwxMy41NDkKCQljNi44MjgtMzUuNzM2LDguOTM2LTcyLjI4NCw4LjkzNi05OC4zODJoLTE4LjY3MmMwLDIyLjk5MS0zLjcxNSw1Ni41Mi0xMS44NDgsODkuMTQ3Yy0yLjEwNyw4LjMzNC00LjUxNSwxNi41NjktNy4yMjUsMjQuNTk4CgkJYy0xMy45NTYsNDEuODYyLTM2LjI0NSw3Ni42OTYtNjguMzY3LDc2LjY5NmMtNDEuNjYyLDAtNTYuOTIyLTQ4LjU4OC02Mi40NDctODAuOTExYzM0LjQzNi0xMS45NTIsNjcuMDY0LTI4LjQxMiw4OS42NTItNDEuNTU5CgkJbC05LjMzOC0xNi4xNjZjLTE5Ljg3NywxMS40NC01MC43OTgsMjUtODMuMTIyLDM0LjIzNWMtOC4zMzQsMi40MTItMTYuNjY3LDQuNTItMjUuMDAxLDYuMTE4CgkJYy00My4xNjcsOC44NDQtODQuNDI2LDcuMDMtMTAwLjQ5LTIwLjg4MmMtMjAuNzg0LTM2LjAzOSwxMy41NTQtNzMuNDgsMzguODUzLTk0LjU2OGMyNy42MDgsMjMuNzk0LDU4LjEyMiw0My44NzIsODAuODE0LDU2LjkyMQoJCWw5LjMzOC0xNi4xNTdjLTE5Ljg3OC0xMS40NS00Ny4wODktMzEuNTI5LTcxLjI3OS01NS4wMTljLTYuMTIzLTUuOTIyLTEyLjA0OS0xMi4wMzktMTcuNjcyLTE4LjM3MwoJCWMtMjkuMzE0LTMzLjAyOS00OC4yODktNjkuNjY3LTMyLjIyNi05Ny41NzhjMjAuNzg1LTM2LjA0LDcwLjQ3Ni0yNC44OTIsMTAxLjMtMTMuNTQ5Yy02LjgyOCwzNS43MzUtOC45MzcsNzIuMjg0LTguOTM3LDk4LjM4MgoJCWgxOC43NzVjMC0yMi45OTEsMy43MTEtNTYuNTIsMTEuODQyLTg5LjE0N2MyLjEwOC04LjMzNCw0LjUyLTE2LjY2Nyw3LjIzMS0yNC42OTZjMTMuOTU2LTQxLjg2MiwzNi4yNC03Ni41OTgsNjguMzY3LTc2LjU5OAoJCWM0MS42NjIsMCw1Ni45MjEsNDguNTg5LDYyLjQ0MSw4MC45MTJjLTM0LjQzLDExLjk1LTY3LjE2MSwyOC40MTItODkuNzUsNDEuNTU5bDkuNDM2LDE2LjE2NmMxOS43OC0xMS40NCw1MC43MDEtMjUsODMuMTI4LTM0LjIzNQoJCWM4LjIzLTIuNDEyLDE2LjU2NC00LjUyLDI0Ljg5Ny02LjExOGM0My4yNy04Ljg0NCw4NC41MjktNy4wMywxMDAuNTkzLDIwLjg4MmMyMC43NzksMzYuMDM5LTEzLjU1NCw3My40OC0zOC44NTMsOTQuNTY4CgkJYy0yNy42MDgtMjMuNzk0LTU4LjIyNi00My44NzItODAuODE0LTU2LjkyMWwtOS4zMzgsMTYuMTU2YzE5Ljc3NSwxMS40NTIsNDcuMDg0LDMxLjUzLDcxLjE3Nyw1NS4wMgoJCWM2LjIyNSw1LjkyMSwxMi4xNDYsMTIuMTQ4LDE3Ljc2OSwxOC40N0M0NDMuODMyLDMxMC42MTcsNDYyLjgwNywzNDcuMjU0LDQ0Ni43NDMsMzc1LjE2NnoiIHN0eWxlPSJmaWxsOiByZ2IoNzUsIDc1LCA3NSk7Ij48L3BhdGg+Cgk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjU2LjAwMywyMjAuMDJjLTE5Ljg2OCwwLTM1Ljk3NSwxNi4wOTgtMzUuOTc1LDM1Ljk3YzAsMTkuODcyLDE2LjEwOCwzNS45OCwzNS45NzUsMzUuOTgKCQljMTkuODY0LDAsMzUuOTcxLTE2LjEwOCwzNS45NzEtMzUuOThDMjkxLjk3NCwyMzYuMTE3LDI3NS44NjcsMjIwLjAyLDI1Ni4wMDMsMjIwLjAyeiIgc3R5bGU9ImZpbGw6IHJnYig3NSwgNzUsIDc1KTsiPjwvcGF0aD4KPC9nPgo8L3N2Zz4K");
  width:40px;
  height:40px;
  border:1px solid black;
  border-radius:50%;
  padding:3px;
  background-color:#CFC;
  display:block;
  margin:4px 20px;
}

.side-menu .icon.pen:before{
  content:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNjMuNjA2IDYzLjYwNiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjMuNjA2IDYzLjYwNjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxnPg0KCQkJPGc+DQoJCQkJPHBhdGggZD0iTTAsNjMuNTU3bDUuNzg1LTIzLjA0MWwxMy44MjYsMTMuNDk3bDI3LjQ3Ni0yNi44MjFMMzUuODAxLDE2LjE3NWwtMjIuNTE2LDIxLjk4bDkuODU0LDkuNjE5bC0yLjc5NSwyLjg2MQ0KCQkJCQlMNy41NTksMzguMTU1bDI4LjI0Mi0yNy41NjlsMTcuMDEzLDE2LjYwNmwtMzIuMiwzMS40MzNMMCw2My41NTd6IE03Ljk3MSw0OC4yMzlsLTIuNDg0LDkuODkzbDEwLjEzNC0yLjQyNUw3Ljk3MSw0OC4yMzl6Ii8+DQoJCQk8L2c+DQoJCTwvZz4NCgkJPGc+DQoJCQk8Zz4NCgkJCQk8cG9seWdvbiBwb2ludHM9IjU1LjA1NSwyNS4wMDMgNDIuMzM5LDEyLjU5IDQ1LjEzNCw5LjcyOSA1NS4wNTUsMTkuNDE0IDU3Ljg4LDE2LjY1NiA0Ni41OTUsNS42MzkgMzcuMDUzLDE0Ljk1NSANCgkJCQkJMzQuMjU4LDEyLjA5MSA0Ni41OTUsMC4wNDkgNjMuNjA2LDE2LjY1NiAJCQkJIi8+DQoJCQk8L2c+DQoJCTwvZz4NCgk8L2c+DQoJPGc+DQoJPC9nPg0KCTxnPg0KCTwvZz4NCgk8Zz4NCgk8L2c+DQoJPGc+DQoJPC9nPg0KCTxnPg0KCTwvZz4NCgk8Zz4NCgk8L2c+DQoJPGc+DQoJPC9nPg0KCTxnPg0KCTwvZz4NCgk8Zz4NCgk8L2c+DQoJPGc+DQoJPC9nPg0KCTxnPg0KCTwvZz4NCgk8Zz4NCgk8L2c+DQoJPGc+DQoJPC9nPg0KCTxnPg0KCTwvZz4NCgk8Zz4NCgk8L2c+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg==");
  width:40px;
  height:40px;
  border:1px solid black;
  border-radius:50%;
  padding:3px;
  background-color:#CFC;
  display:block;
  margin:4px 20px;
}
.side-menu .icon.cloud:before{
  content:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaWQ9IkxheWVyXzEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDY0IDY0OyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNjQgNjQiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxnPjxwYXRoIGQ9Ik0zMiw1MC4zMjNjLTEuMzU2LDAtMi40NTYtMS4xLTIuNDU2LTIuNDU2VjMyLjE0NGMwLTEuMzU2LDEuMS0yLjQ1NiwyLjQ1Ni0yLjQ1NiAgICBzMi40NTYsMS4xLDIuNDU2LDIuNDU2djE1LjcyM0MzNC40NTYsNDkuMjIzLDMzLjM1Niw1MC4zMjMsMzIsNTAuMzIzeiIgc3R5bGU9ImZpbGw6IzUxNTE1MTsiLz48L2c+PGc+PHBvbHlnb24gcG9pbnRzPSIzMiw0Ni4wNSAyNi42NzQsNDYuMDUyIDMyLjAwMiw1MS40NzQgMzcuMzI2LDQ2LjA0OCAgICIgc3R5bGU9ImZpbGw6IzUxNTE1MTsiLz48cGF0aCBkPSJNMzIuMDAyLDUzLjkzYy0wLjY1OSwwLTEuMjktMC4yNjUtMS43NTItMC43MzVsLTUuMzI4LTUuNDIyYy0wLjY5My0wLjcwNi0wLjg5Ni0xLjc1OC0wLjUxMy0yLjY3ICAgIGMwLjM4Mi0wLjkxMiwxLjI3NS0xLjUwNiwyLjI2NC0xLjUwN2w1LjMyNi0wLjAwMmwwLDBsNS4zMjYtMC4wMDJjMCwwLDAuMDAxLDAsMC4wMDEsMGMwLjk4OSwwLDEuODgxLDAuNTkzLDIuMjY0LDEuNTA1ICAgIGMwLjM4MywwLjkxMiwwLjE4MiwxLjk2NS0wLjUxMSwyLjY3MWwtNS4zMjMsNS40MjdDMzMuMjk0LDUzLjY2NSwzMi42NjIsNTMuOTMsMzIuMDAyLDUzLjkzICAgIEMzMi4wMDMsNTMuOTMsMzIuMDAzLDUzLjkzLDMyLjAwMiw1My45M3oiIHN0eWxlPSJmaWxsOiM1MTUxNTE7Ii8+PC9nPjxnPjxwYXRoIGQ9Ik00Ni43MTksNDkuMDY1aC0xLjUwNGMtMS41NDgsMC0yLjgwMy0xLjI1NS0yLjgwMy0yLjgwM2MwLTEuNTQ4LDEuMjU1LTIuODAzLDIuODAzLTIuODAzaDEuNTA0ICAgIGMzLjk1NywwLDcuMTc1LTMuMjE5LDcuMTc1LTcuMTc1cy0zLjIxOS03LjE3NS03LjE3NS03LjE3NWMtMC4zLDAtMC42MDQsMC4wMi0wLjkzMSwwLjA2M2MtMC43OTUsMC4xMDItMS41OTYtMC4xNC0yLjItMC42NjcgICAgYy0wLjYwNC0wLjUyNy0wLjk1NC0xLjI4Ny0wLjk2MS0yLjA4OGMtMC4wNTMtNS45MjMtNC45MTQtMTAuNzQyLTEwLjgzNy0xMC43NDJjLTUuOTc3LDAtMTAuODQsNC44NjMtMTAuODQsMTAuODQgICAgYzAsMS4yNzIsMC4yMTgsMi41MTgsMC42NDksMy43MDJjMC4zOTQsMS4wODUsMC4wODMsMi4zMDEtMC43ODUsMy4wNjNjLTAuODY4LDAuNzYyLTIuMTE0LDAuOTE0LTMuMTM5LDAuMzgyICAgIGMtMC43NDItMC4zODQtMS41NDMtMC41NzktMi4zODEtMC41NzljLTIuODYxLDAtNS4xODgsMi4zMjctNS4xODgsNS4xODhzMi4zMjcsNS4xODgsNS4xODgsNS4xODhoMy41MTUgICAgYzEuNTQ4LDAsMi44MDMsMS4yNTUsMi44MDMsMi44MDNjMCwxLjU0OC0xLjI1NSwyLjgwMy0yLjgwMywyLjgwM2gtMy41MTVDOS4zNDIsNDkuMDY1LDQuNSw0NC4yMjMsNC41LDM4LjI3MiAgICBzNC44NDItMTAuNzk0LDEwLjc5NC0xMC43OTRjMC4wMjYsMCwwLjA1MywwLDAuMDc5LDBjLTAuMDE5LTAuMzItMC4wMjgtMC42NDEtMC4wMjgtMC45NjNjMC05LjA2OCw3LjM3Ny0xNi40NDUsMTYuNDQ2LTE2LjQ0NSAgICBjNC4zNjcsMCw4LjQ3OSwxLjY5NCwxMS41NzksNC43NjljMi40MjMsMi40MDQsNC4wMDgsNS40MzMsNC42MDEsOC43MjZjNi40NjIsMC42MzEsMTEuNTMsNi4wOTUsMTEuNTMsMTIuNzIgICAgQzU5LjUsNDMuMzMyLDUzLjc2Nyw0OS4wNjUsNDYuNzE5LDQ5LjA2NXoiIHN0eWxlPSJmaWxsOiM1MTUxNTE7Ii8+PC9nPjwvZz48L3N2Zz4=");
  width:40px;
  height:40px;
  border:1px solid black;
  border-radius:50%;
  padding:3px;
  background-color:#CFC;
  display:block;
  margin:4px 20px;
}
.side-menu .icon.book:before{
  content:url("data:image/svg+xml;base64,PCEtLT94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPy0tPgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTUuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+Cgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9Il94MzJfIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJ3aWR0aDogMjU2cHg7IGhlaWdodDogMjU2cHg7IG9wYWNpdHk6IDE7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCgkuc3Qwe2ZpbGw6IzRCNEI0Qjt9Cgo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MTEuNDM4LDU1Ljg3NWMtNS4zMTMtMy43ODEtMTEuNTk0LTUuNzM0LTE3Ljk2OS01LjczNGMtMy40MzgsMC02LjkwNiwwLjU3OC0xMC4yNSwxLjc1bDAuNjI1LTAuMjE5CgkJbC0yMDQuOTIyLDcxLjcxOWMtMTAuNzk3LTAuNzM0LTIwLjc2Ni0zLjA0Ny0yNy41MTYtNi4xMDljLTMuNjI1LTEuNjA5LTYuMjgxLTMuNDA2LTcuNjcyLTQuNzY2CgkJYy0wLjcwMy0wLjY3Mi0xLjA3OC0xLjIwMy0xLjI2Ni0xLjVsLTAuMTI1LTAuMjY2bC0wLjAxNi0wLjAxNmMtMS4xNzItNi45NjktNy43NjYtMTEuNjcyLTE0Ljc2Ni0xMC41MzEKCQljLTYuOTg0LDEuMTg4LTExLjcxOSw3Ljc5Ny0xMC41NjMsMTQuNzgxYzEuMTI1LDYuNjcyLDQuNzUsMTIuMDYzLDguOTg0LDE2LjA5NGM2LjQzOCw2LjA2MywxNC41MzEsMTAsMjMuNzAzLDEyLjk2OQoJCWM5LjE1NiwyLjkwNiwxOS40NjksNC42NzIsMzAuMjY2LDUuMTg4bDIuNSwwLjEyNWwyMDguNjA5LTczLjAxNmwwLjY1Ni0wLjIzNGMwLjU3OC0wLjE4OCwxLjE1Ni0wLjI4MSwxLjc1LTAuMjgxCgkJYzEuMTA5LDAsMi4xODgsMC4zMjgsMy4xMjUsMC45ODRjMS40MDYsMSwyLjI1LDIuNjQxLDIuMjUsNC4zNTl2MzA5LjMxM2MwLDEwLTYuMzEzLDE4LjkzOC0xNS43ODEsMjIuMjM1bC0yMDcuMTI1LDcyLjQ4NAoJCWwtMC4zNzUsMC4xNzJjLTEuMjk3LDAuNTQ3LTMuMTI1LDAuOTM4LTUuNTMxLDAuOTM4Yy00LjUxNiwwLjA0Ny0xMC45ODQtMS41MzEtMTcuNzgxLTQuNQoJCWMtMTAuMTg4LTQuMzkxLTIxLjA2My0xMS43NjYtMjguNzk3LTE4LjcwM2MtMy44NzUtMy40NjktNi45NjktNi44NDQtOC43NjYtOS4zMTNjLTAuNzgxLTEuMDYzLTEuMjUtMS44NzUtMS41LTIuMzU5CgkJYzAuMDE2LTAuNjQxLDAuMDMxLTEuMzc1LDAuMDQ3LTIuMzI4YzAuMTQxLTExLjU0NywwLjIwMy00Ny4zOTEsMC4yMDMtOTEuOTA3YzAtMTAxLjY4OC0wLjI4MS0yNDguMDc4LTAuMjgxLTI0OC4wNzh2LTQuNzM0CgkJYzAtMi4yODEsMS40NTMtNC4zMTMsMy41OTQtNS4wNjNsMjEwLjg0NC03NC4zOTFjNi43MDMtMi4zNTksMTAuMjE5LTkuNjg4LDcuODQ0LTE2LjM3NWMtMi4zNDQtNi42ODgtOS42ODgtMTAuMTg4LTE2LjM3NS03LjgyOAoJCUwxMDguMjUsNzUuMTFsMC4wMzEtMC4wMTZjLTEyLjQ2OSw0LjM1OS0yMC43OTcsMTYuMDk0LTIwLjc5NywyOS4yOTd2NC43NXYwLjAxNmMwLDAuMDMxLDAuMDE2LDkuMTQxLDAuMDQ3LDI0LjQ1MwoJCWMwLjA2Myw0NS45NTMsMC4yMTksMTQ3LjM1OSwwLjIxOSwyMjMuNTk0YzAsMjUuNDA2LDAsNDguMDMxLTAuMDYzLDY0Ljg0NGMtMC4wMTYsOC40MDYtMC4wNDcsMTUuMzc1LTAuMDc4LDIwLjUKCQljLTAuMDE2LDIuNTQ3LTAuMDMxLDQuNjU2LTAuMDYzLDYuMjM0Yy0wLjAxNiwxLjU0Ny0wLjAzMSwyLjY3Mi0wLjA0NywyLjkwNnYtMC4wMTZsLTAuMDE2LDAuODEzCgkJYzAuMDk0LDUuMTQxLDEuNzE5LDguNTc4LDMuNDUzLDExLjgxM2MzLjE1Niw1LjU2Myw3LjU2MywxMC41NjMsMTMsMTUuNzM0YzguMTI1LDcuNjcyLDE4LjUzMSwxNS4zMjgsMjkuODc1LDIxLjM1OQoJCWMxMS4zNTksNS45NTMsMjMuNTE2LDEwLjUxNiwzNi4yMTksMTAuNjA5YzQuODkxLDAsOS45MjItMC44MjgsMTQuNzY2LTIuNzVsMC4wMTYsMC4wNjNsMjA2LjczNC03Mi4zNTkKCQljMTkuNzUtNi45MDYsMzIuOTY5LTI1LjU0NywzMi45NjktNDYuNDY5VjgxLjE3MkM0MjQuNTE2LDcxLjExLDQxOS42NDEsNjEuNjg4LDQxMS40MzgsNTUuODc1eiIgc3R5bGU9ImZpbGw6IHJnYig3NSwgNzUsIDc1KTsiPjwvcGF0aD4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNTkuNjg4LDEwNi40MDdjMS4xODgsMy4zNDQsNC44MjgsNS4xMDksOC4xODgsMy45MzhMMzU0Ljc1LDQ0LjkyMmMzLjM0NC0xLjE3Miw1LjEwOS00LjgyOCwzLjkzOC04LjE4OAoJCWMtMS4xNzItMy4zMjgtNC44NDQtNS4wOTQtOC4xODgtMy45MjJMMTYzLjYyNSw5OC4yMTlDMTYwLjI4MSw5OS4zOTEsMTU4LjUsMTAzLjA2MywxNTkuNjg4LDEwNi40MDd6IiBzdHlsZT0iZmlsbDogcmdiKDc1LCA3NSwgNzUpOyI+PC9wYXRoPgo8L2c+Cjwvc3ZnPgo=");
  width:40px;
  height:40px;
  border:1px solid black;
  border-radius:50%;
  padding:3px;
  background-color:#CFC;
  display:block;
  margin:4px 20px;
}
.side-menu .icon.graph_up:before{
  content:url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJwdG4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgPgoKPGcgaWQ9InR4dCIgY2xhc3M9InN0MCIgeD0iMCIgeT0iMCI+PGcgaWQ9Imljb25fMDAwOTkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsMCkiPgo8Zz4KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iNTUuMTc2LDQ1NS4wOTggNTUuMTc2LDE2LjU3NCA1NS4xNzYsMCAwLDAgMCwxNi41NzQgMCw0NTUuMDk4IDAsNDk1LjQyNiAwLDUxMiAxNi4wNyw1MTIgNTUuMTc2LDUxMiAKCQk0ODAuNDEyLDUxMiA0OTYuNDg0LDUxMiA0OTYuNDg0LDQ1NS4wOTggNDgwLjQxMiw0NTUuMDk4IAkiPjwvcG9seWdvbj4KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMjIxLjI1OCwyMzkuOTQgMzE4LjU4MiwzMzYuNzY2IDQ1OC40ODIsMTk3LjU3OCA0OTAuNDIsMjI5LjM1NCA1MTIsMTAwLjUxNCAzODIuNTA0LDEyMS45OSAKCQk0MTQuNDQsMTUzLjc2IDMxOC41ODIsMjQ5LjEzMSAyMjEuMjU4LDE1Mi4zMDUgNzIuMDYsMzAwLjczMiAxMTYuMTAyLDM0NC41NTMgCSI+PC9wb2x5Z29uPgo8L2c+CjwvZz48L2c+Cjwvc3ZnPg==");
  width:40px;
  height:40px;
  border:1px solid black;
  border-radius:50%;
  padding:3px;
  background-color:#CFC;
  display:block;
  margin:4px 20px;
}
.side-menu .icon.graph:before{
  content:url("data:image/svg+xml;base64,PCEtLT94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPy0tPgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTUuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+Cgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9Il94MzJfIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJ3aWR0aDogMjU2cHg7IGhlaWdodDogMjU2cHg7IG9wYWNpdHk6IDE7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCgkuc3Qwe2ZpbGw6IzRCNEI0Qjt9Cgo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0yODQuMzQ0LDB2MjI1LjIwM2wyMTEuNjQxLTc3LjAzMUM0NjQuNDUzLDYxLjgxMywzODEuNDg0LDAsMjg0LjM0NCwweiIgc3R5bGU9ImZpbGw6IHJnYig3NSwgNzUsIDc1KTsiPjwvcGF0aD4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0yNDEuMjE5LDI4Ni43ODFWNjEuNTc4QzExNy4wNDcsNjEuNTYzLDE2LjAxNiwxNjIuNTk0LDE2LjAxNiwyODYuNzgxYzAsMjcuMDYzLDQuNzk3LDUyLjk4NCwxMy41NzgsNzcuMDMxCgkJQzYxLjEyNSw0NTAuMTcyLDE0NC4wNzgsNTEyLDI0MS4yMTksNTEyYzEyNC4xODgsMCwyMjUuMjE5LTEwMS4wMzEsMjI1LjIxOS0yMjUuMjE5YzAtMjcuMDMxLTQuNzk3LTUyLjk4NC0xMy41NzgtNzcuMDMxCgkJTDI0MS4yMTksMjg2Ljc4MXoiIHN0eWxlPSJmaWxsOiByZ2IoNzUsIDc1LCA3NSk7Ij48L3BhdGg+CjwvZz4KPC9zdmc+Cg==");
  width:40px;
  height:40px;
  border:1px solid black;
  border-radius:50%;
  padding:3px;
  background-color:#CFC;
  display:block;
  margin:4px 20px;
}
.side-menu .icon.graph2:before{
  content:url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJfeDMyXyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0id2lkdGg6IDI1NnB4OyBoZWlnaHQ6IDI1NnB4OyBvcGFjaXR5OiAxOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6IzRCNEI0Qjt9Cjwvc3R5bGU+CjxnPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTcwLjY5NywzOTUuMzUyaDgwLjYzM2M1LjY1OCwwLDEwLjI0Ni00LjI1MiwxMC4yNDYtOS40OTh2LTE0My43MmMwLTUuMjQ2LTQuNTg4LTkuNDk5LTEwLjI0Ni05LjQ5OUg3MC42OTcKCQljLTUuNjU4LDAtMTAuMjQ2LDQuMjUzLTEwLjI0Niw5LjQ5OXYxNDMuNzJDNjAuNDUxLDM5MS4xLDY1LjAzOSwzOTUuMzUyLDcwLjY5NywzOTUuMzUyeiI+PC9wYXRoPgoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTIxNS42ODQsMzk1LjM1Mmg4MC42MzFjNS42NTgsMCwxMC4yNDgtNC4yNTIsMTAuMjQ4LTkuNDk4VjE0MS4xMTdjMC01LjI0Ni00LjU5LTkuNDk4LTEwLjI0OC05LjQ5OGgtODAuNjMxCgkJYy01LjY2LDAtMTAuMjQ4LDQuMjUyLTEwLjI0OCw5LjQ5OHYyNDQuNzM2QzIwNS40MzYsMzkxLjEsMjEwLjAyNCwzOTUuMzUyLDIxNS42ODQsMzk1LjM1MnoiPjwvcGF0aD4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zNjAuNjY4LDM5NS4zNTJoODAuNjMxYzUuNjYsMCwxMC4yNDgtNC4yNTIsMTAuMjQ4LTkuNDk4VjI1Ljk2NGMwLTUuMjQ2LTQuNTg4LTkuNDk5LTEwLjI0OC05LjQ5OWgtODAuNjMxCgkJYy01LjY2LDAtMTAuMjQ4LDQuMjUzLTEwLjI0OCw5LjQ5OXYzNTkuODlDMzUwLjQyLDM5MS4xLDM1NS4wMDgsMzk1LjM1MiwzNjAuNjY4LDM5NS4zNTJ6Ij48L3BhdGg+Cgk8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjQ5NS40MjYsNDM4LjYzMyAxNi41NzQsNDM4LjYzMyAwLDQzOC42MzMgMCw0OTUuNTM1IDE2LjU3NCw0OTUuNTM1IDQ5NS40MjYsNDk1LjUzNSA1MTIsNDk1LjUzNSAKCQk1MTIsNDM4LjYzMyAJIj48L3BvbHlnb24+CjwvZz4KPC9zdmc+Cg==");
  width:40px;
  height:40px;
  border:1px solid black;
  border-radius:50%;
  padding:3px;
  background-color:#CFC;
  display:block;
  margin:4px 20px;
}
.side-menu .icon.calc:before{
  content:url("data:image/svg+xml;base64,PCEtLT94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPy0tPgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTUuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+Cgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9Il94MzJfIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJ3aWR0aDogMjU2cHg7IGhlaWdodDogMjU2cHg7IG9wYWNpdHk6IDE7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCgkuc3Qwe2ZpbGw6IzRCNEI0Qjt9Cgo8L3N0eWxlPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik03MiwwdjUxMmgzNjhWMEg3MnogTTI0MC4wMzEsNDU5Ljk4NGgtMTEydi0xMTJoMTEyVjQ1OS45ODR6IE0yNDAuMDMxLDMxNS45ODRoLTExMnYtMTEyaDExMlYzMTUuOTg0egoJCSBNMzg0LjAzMSw0NTkuOTg0aC0xMTJ2LTExMmgxMTJWNDU5Ljk4NHogTTM4NC4wMzEsMzE1Ljk4NGgtMTEydi0xMTJoMTEyVjMxNS45ODR6IE0zODQuMDMxLDE1MS45ODRoLTI1NnYtOTZoMjU2VjE1MS45ODR6IiBzdHlsZT0iZmlsbDogcmdiKDc1LCA3NSwgNzUpOyI+PC9wYXRoPgoJPHJlY3QgeD0iMjk2LjAzMSIgeT0iMjUxLjk4NCIgY2xhc3M9InN0MCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjE2IiBzdHlsZT0iZmlsbDogcmdiKDc1LCA3NSwgNzUpOyI+PC9yZWN0PgoJPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSIxNzYuMDMxLDI5MS45ODQgMTkyLjAzMSwyOTEuOTg0IDE5Mi4wMzEsMjY3Ljk4NCAyMTYuMDMxLDI2Ny45ODQgMjE2LjAzMSwyNTEuOTg0IDE5Mi4wMzEsMjUxLjk4NCAKCQkxOTIuMDMxLDIyNy45ODQgMTc2LjAzMSwyMjcuOTg0IDE3Ni4wMzEsMjUxLjk4NCAxNTIuMDMxLDI1MS45ODQgMTUyLjAzMSwyNjcuOTg0IDE3Ni4wMzEsMjY3Ljk4NCAJIiBzdHlsZT0iZmlsbDogcmdiKDc1LCA3NSwgNzUpOyI+PC9wb2x5Z29uPgoJPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSIxNjMuNDA2LDQzNC45MzggMTg0LjAzMSw0MTQuMjgxIDIwNC42NTYsNDM0LjkzOCAyMTQuOTY5LDQyNC41OTQgMTk0LjM0NCw0MDMuOTY5IDIxNC45NjksMzgzLjM0NCAKCQkyMDQuNjU2LDM3My4wMzEgMTg0LjAzMSwzOTMuNjU2IDE2My40MDYsMzczLjAzMSAxNTMuMDk0LDM4My4zNDQgMTczLjcxOSw0MDMuOTY5IDE1My4wOTQsNDI0LjU5NCAJIiBzdHlsZT0iZmlsbDogcmdiKDc1LCA3NSwgNzUpOyI+PC9wb2x5Z29uPgoJPHJlY3QgeD0iMjk2LjAzMSIgeT0iMzc1Ljk4NCIgY2xhc3M9InN0MCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjE2IiBzdHlsZT0iZmlsbDogcmdiKDc1LCA3NSwgNzUpOyI+PC9yZWN0PgoJPHJlY3QgeD0iMjk2LjAzMSIgeT0iNDE1Ljk4NCIgY2xhc3M9InN0MCIgd2lkdGg9IjY0IiBoZWlnaHQ9IjE2IiBzdHlsZT0iZmlsbDogcmdiKDc1LCA3NSwgNzUpOyI+PC9yZWN0PgoJPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSIzMjAuNDIyLDEyNC41OTQgMzIyLjUsMTA5LjY4OCAzMTguOTUzLDEwNS40NjkgMzE0LjM3NSwxMDkuNDY5IDMxMi4yOTcsMTI0LjQwNiAzMTUuODU5LDEyOC41MzEgCSIgc3R5bGU9ImZpbGw6IHJnYig3NSwgNzUsIDc1KTsiPjwvcG9seWdvbj4KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMzIzLjkzOCw5OS4xNDEgMzI1Ljk1Myw4NC4yODEgMzIyLjM5MSw4MC4xNTYgMzE3LjgyOCw4NC4wOTQgMzE1Ljc5Nyw5OS4wNjMgMzE5LjM3NSwxMDMuMjE5IAkiIHN0eWxlPSJmaWxsOiByZ2IoNzUsIDc1LCA3NSk7Ij48L3BvbHlnb24+Cgk8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjMyMy4yMzQsMTI2LjM3NSAzMTguNjcyLDEzMC40MDYgMzIyLjMxMywxMzQuNTE2IDMzNy43MTksMTM0LjUxNiAzNDIuMjgxLDEzMC41NjMgMzM4LjY1NiwxMjYuMzc1IAkKCQkiIHN0eWxlPSJmaWxsOiByZ2IoNzUsIDc1LCA3NSk7Ij48L3BvbHlnb24+Cgk8cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjM0NC4yMDMsODIuMzEzIDM0OC43NSw3OC4yODEgMzQ1LjEyNSw3NC4xNzIgMzI5LjcwMyw3NC4xNzIgMzI1LjE0MSw3OC4xMjUgMzI4Ljc2Niw4Mi4zMTMgCSIgc3R5bGU9ImZpbGw6IHJnYig3NSwgNzUsIDc1KTsiPjwvcG9seWdvbj4KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMzQzLjQ4NCwxMDkuNTQ3IDM0MS40NjksMTI0LjQwNiAzNDUuMDMxLDEyOC41MzEgMzQ5LjYwOSwxMjQuNTk0IDM1MS42MjUsMTA5LjYyNSAzNDguMDYzLDEwNS40NjkgCQoJCSIgc3R5bGU9ImZpbGw6IHJnYig3NSwgNzUsIDc1KTsiPjwvcG9seWdvbj4KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMzQ0LjkyMiw5OSAzNDguNDg0LDEwMy4yMTkgMzUzLjA0Nyw5OS4yMTkgMzU1LjEyNSw4NC4yODEgMzUxLjU2Myw4MC4xNTYgMzQ3LDg0LjA5NCAJIiBzdHlsZT0iZmlsbDogcmdiKDc1LCA3NSwgNzUpOyI+PC9wb2x5Z29uPgo8L2c+Cjwvc3ZnPgo=");
  width:40px;
  height:40px;
  border:1px solid black;
  border-radius:50%;
  padding:3px;
  background-color:#CFC;
  display:block;
  margin:4px 20px;
}
.side-menu .icon.paper:before{
  content:url("data:image/svg+xml;base64,PCEtLT94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPy0tPgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+Cgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9Il94MzJfIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHN0eWxlPSJ3aWR0aDogMjU2cHg7IGhlaWdodDogMjU2cHg7IG9wYWNpdHk6IDE7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojNEI0QjRCO30KPC9zdHlsZT4KPGc+Cgk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDY2LjY3NCwwLjgwNmMtMC43OTUtMC41MjQtMS43MTYtMC43OTYtMi42NjQtMC43OTZjLTAuNjk2LDAtMS4zNzYsMC4xNDctMi4wMTUsMC40M2wtNzYuODIzLDM0LjU1NAoJCUwzMjAuNTM0LDUuOTI0bC02NC41NzcsMjkuMDY5TDE5MS4zNjIsNS45MjRsLTY0LjU3NiwyOS4wNjlMNDkuOTk5LDAuNDE4QzQ5LjM2NiwwLjE0Niw0OC42OSwwLDQ4LjAwNiwwCgkJYy0wLjk0MiwwLTEuODU5LDAuMjcyLTIuNjgsMC43OTVjLTEuMzg3LDAuOTIxLTIuMjIsMi40NS0yLjIyLDQuMDkzdjUwMi4yMTRjMCwxLjY2NCwwLjgzNywzLjE5MiwyLjIyOSw0LjA5MgoJCWMwLjc5NiwwLjUyMywxLjcyMywwLjc5NSwyLjY3NCwwLjc5NWMwLjY4NiwwLDEuMzU2LTAuMTM2LDIuMDA2LTAuNDE5bDc2LjgyMi0zNC41NjRsNjQuNjI4LDI5LjA3bDY0LjU3Ny0yOS4wN2w2NC42MDYsMjkuMDcKCQlsNjQuNTc2LTI5LjA3bDc2Ljc4NywzNC41NzVjMC42MzQsMC4yNzIsMS4zMDQsMC40MTksMS45OTQsMC40MTljMC45NDIsMCwxLjg1OS0wLjI3MiwyLjY4LTAuNzk1CgkJYzEuMzgyLTAuOTIyLDIuMjA5LTIuNDUsMi4yMDktNC4wOTRWNC44OThDNDY4Ljg5NCwzLjIzNCw0NjguMDYxLDEuNjk2LDQ2Ni42NzQsMC44MDZ6IE00MzAuNjk3LDQ1NS41NzhsLTQ1LjQ3Mi0yMC40NzQKCQlsLTY0LjU3NiwyOS4wNjlsLTY0LjYwNi0yOS4wNTlsLTY0LjU3NywyOS4wNTlsLTY0LjYyOC0yOS4wNTlsLTQ1LjUyNCwyMC40NzZWNTYuNDJsNDUuNDcyLDIwLjQ2NWw2NC41NzYtMjkuMDU4bDY0LjU5NiwyOS4wNTgKCQlsNjQuNTg2LTI5LjA1OGw2NC42MjgsMjkuMDU4bDQ1LjUyNS0yMC40NzRWNDU1LjU3OHoiPjwvcGF0aD4KCTxyZWN0IHg9IjEzNy4zMDYiIHk9IjE2Ny4zNjkiIGNsYXNzPSJzdDAiIHdpZHRoPSIyMzcuMzk5IiBoZWlnaHQ9IjI1LjQ5Ij48L3JlY3Q+Cgk8cmVjdCB4PSIxMzcuMzA2IiB5PSIyNTMuNjc2IiBjbGFzcz0ic3QwIiB3aWR0aD0iMjM3LjM5OSIgaGVpZ2h0PSIyNS41Ij48L3JlY3Q+Cgk8cmVjdCB4PSIxMzcuMzA2IiB5PSIzMzkuOTkzIiBjbGFzcz0ic3QwIiB3aWR0aD0iMTIzLjI2OSIgaGVpZ2h0PSIyNS40ODkiPjwvcmVjdD4KPC9nPgo8L3N2Zz4K");
  width:40px;
  height:40px;
  border:1px solid black;
  border-radius:50%;
  padding:3px;
  background-color:#CFC;
  display:block;
  margin:4px 20px;
}
.side-menu .icon.list:before{
  content:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pjxzdmcgdmlld0JveD0iMCAwIDMyIDMyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojMTAxODIwO308L3N0eWxlPjwvZGVmcz48dGl0bGUvPjxnIGRhdGEtbmFtZT0iTGF5ZXIgNSIgaWQ9IkxheWVyXzUiPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTE2LDMxQTE1LDE1LDAsMSwxLDMxLDE2LDE1LDE1LDAsMCwxLDE2LDMxWk0xNiwzQTEzLDEzLDAsMSwwLDI5LDE2LDEzLDEzLDAsMCwwLDE2LDNaIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjEsMTdIMTFhMSwxLDAsMCwxLDAtMkgyMWExLDEsMCwwLDEsMCwyWiIvPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTIxLDEySDExYTEsMSwwLDAsMSwwLTJIMjFhMSwxLDAsMCwxLDAsMloiLz48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yMSwyMkgxMWExLDEsMCwwLDEsMC0ySDIxYTEsMSwwLDAsMSwwLDJaIi8+PC9nPjwvc3ZnPg==");
  width:40px;
  height:40px;
  border:1px solid black;
  border-radius:50%;
  padding:3px;
  background-color:#CFC;
  display:block;
  margin:4px 20px;
}

            
          
!
            
              ;(function(){
  // ページ内にjsライブラリの読み込み
  var $$addScript = function(file){
    var s = document.createElement("script");
    s.src = file;
    document.body.appendChild(s);
  }

  // イベントライブラリ
  var $$event = function(target, mode, func){
		//other Browser
		if (typeof target.addEventListener !== "undefined"){
      target.addEventListener(mode, func, false);
    }
    else if(typeof target.attachEvent !== "undefined"){
      target.attachEvent('on' + mode, function(){func.call(target , window.event)});
    }
  };


  var $$ = function(){
    var state = document.readyState;
		if(state === "complete"){
			this.start();
		}
		else if(state === "interactive"){
			$$event(window , "DOMContentLoaded" , (function(e){this.start(e)}).bind(this));
		}
		else{
			$$event(window , "load" , (function(e){this.start(e)}).bind(this));
		}
  };

  $$.prototype.start = function(){

    // dropdown-set
    this.set_dropdown();

    // dropdown-click
    this.set_dropdown_click();

    // top-menu
    var links = document.querySelectorAll(".side-menu ul > li[data-dropdown='1'] > a");
    for(var i=0; i<links.length; i++){
      $$event(links[i] , "click" , (function(e){this.set_top_menu_toggle(e)}).bind(this));
    }

    // side-menu-close-button
    var close = document.querySelectorAll(".side-menu a.close , .side-menu-close");
    if(close.length){
      for(var i=0; i<close.length; i++){
        $$event(close[i] , "click" , (function(e){this.set_sidemenu_close(e)}).bind(this));
      }
    }

    // other-click
    var background = document.querySelector(".side-menu .background");
    if(background){
      $$event(background , "click" , (function(e){
        this.set_top_menu_hidden_quick(e);
        // var side_menu = document.querySelector(".side-menu");
        // if(side_menu){
        //   side_menu.removeAttribute("data-view-submenu");
        // }
      }).bind(this));
    }

    // loaded
    var root = document.querySelector(".side-menu");
    if(root.getAttribute("data-loaded") === "0"){
      root.setAttribute("data-loaded" , "1");
    }
  };

  $$.prototype.set_top_menu_toggle = function(e){
    var currentTarget = e.currentTarget;
    if(!currentTarget || currentTarget.parentNode.getAttribute("data-dropdown") !== "1"){
      this.set_top_menu_hidden();
    }

    var top_menus = document.querySelectorAll(".side-menu ul > li");
    for(var i=0; i<top_menus.length; i++){
      // 対象リンククリック
      if(top_menus[i] === currentTarget.parentNode){
        if(top_menus[i].getAttribute("data-view") !== "1"){
          this.set_top_menu_view(top_menus[i] , true);
        }
        else if(top_menus[i].getAttribute("data-view") !== null){
          this.set_top_menu_view(top_menus[i] , false);
        }
      }

      // 対象の親階層は処理しない
      else if(this.checkHierarchy(currentTarget , top_menus[i])){
        continue;
      }

      // 対象外リンククリック
      else{
        this.set_top_menu_view(top_menus[i] , false);
      }
    }

    // bg-check
    var top_links = document.querySelectorAll(".side-menu > ul > li[data-view='1']");
    var side_menu = document.querySelector(".side-menu");
    if(top_links.length > 0){
      side_menu.setAttribute("data-view-submenu" , "1");
    }
    else{
      // side_menu.setAttribute("data-view-submenu" , "0");
      side_menu.removeAttribute("data-view-submenu");
    }
  };

  $$.prototype.checkHierarchy = function(currentTarget , menuElement){
    while(!currentTarget.matches(".side-menu")){
      if(currentTarget === menuElement){
        return true;
      }
      currentTarget = currentTarget.parentNode;
    }
    return false;
  };

  
  // bool @ [true:active , false:unactive]
  $$.prototype.set_top_menu_view = function(linkElm , bool){
    if(!linkElm){return;}
    if(bool === true){
      linkElm.setAttribute("data-view" , "1");
    }
    else if(linkElm.getAttribute("data-view") !== null){
      linkElm.setAttribute("data-view" , "0");
    }
  };
  // all-link-hidden
  $$.prototype.set_top_menu_hidden = function(){
    var listElm = document.querySelectorAll(".side-menu ul > li");
    for(var i=0; i<listElm.length; i++){
      if(listElm[i].getAttribute("data-dropdown") !== "1"){continue;}
      if(listElm[i].getAttribute("data-dropdown") === null){continue;}
      listElm[i].setAttribute("data-view" , "0");
    }
  };
  // all-link-hidden-quick
  $$.prototype.set_top_menu_hidden_quick = function(){
    var listElm = document.querySelectorAll(".side-menu ul > li");
    for(var i=0; i<listElm.length; i++){
      if(listElm[i].getAttribute("data-dropdown") !== "1"){continue;}
      if(listElm[i].getAttribute("data-dropdown") === null){continue;}
      listElm[i].removeAttribute("data-view");
    }
  };

  // bool @ [true:view , false:hidden]
  $$.prototype.set_top_menu_active = function(dropdowns , currentTarget){
    if(!dropdowns || !dropdowns.length){return;}
    for(var i=0; i<dropdowns.length; i++){
      if(!currentTarget || dropdowns[i].getAttribute("data-active") === "1"){
        dropdowns[i].setAttribute("data-active" , "0");
      }
      else{
        dropdowns[i].setAttribute("data-active" , "1");
      }
    }
  };


  // window-event
  $$.prototype.checkClick = function(e){
    var target = e.target;

    if(target && target.matches(".side-menu ul > li *")){
      return;
    }

    if(!target || !target.matches(".side-menu ul > li > a")){
      this.set_top_menu_hidden();
    }
  };

  $$.prototype.set_dropdown = function(){
    var top_menus = document.querySelectorAll(".side-menu ul > li");
    for(var i=0; i<top_menus.length; i++){
      var listsElm = top_menus[i].querySelectorAll(":scope > ul");
      if(!listsElm.length){continue;}
      top_menus[i].setAttribute("data-dropdown" , "1");
    }
  };

  $$.prototype.set_dropdown_click = function(){
    var dropdowns = document.querySelectorAll(".side-menu ul li[data-dropdown='1']");
    for(var i=0; i<dropdowns.length; i++){
      var a = dropdowns[i].querySelector(":scope > a");
      a.href = "javascript:void(0)";
    }
  };

  // side-menu-close
  $$.prototype.set_sidemenu_close = function(e){
    var side_menu = document.querySelector(".side-menu");
    if(!side_menu){return;}
    if(side_menu.getAttribute("data-menu-type") === "icon"){
      // side_menu.removeAttribute("data-close");
      side_menu.setAttribute("data-menu-type","normal");
    }
    else{
      side_menu.setAttribute("data-menu-type","icon");
    }

    // 全ての子階層表示をclose
    this.set_top_menu_hidden_quick();

    // backgroundを非表示
    side_menu.removeAttribute("data-view-submenu");
  };

  new $$;
})();
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console