最近のホームページの傾向は、文字サイズを大きめにして、アイコンなどのピクトグラムを活用し、表示の細かな箇所までアニメーションを施すという事で、見栄え、使い勝手などを向上させているようです。
メニューがたくさんあるサイトは、機能が多く使いづらい、探すのが大変・・・などというネガティブな意見が出やすいのですが、逆に言うと、機能が多くてわかりやすく使いやすいサイトであれば、何ら問題が無いという事でもあります。
これまで作ってきたサイドメニューは、比較的大きめのサイドメニューで表示していたため、PCで表示していたとしても、画面内のサイズが比較的大きい割合を占めてしまっていたので、今回はアイコンベースにしてそれの多階層にしてみたいと思います。
デモ
See the Pen side-menu(icon-version) by YugetaKoji (@geta1972) on CodePen.
機能解説
今回のバージョンの特徴は、アイコンメニューの為、スペースをとらないという事に焦点を定めました。 そして、多階層にする為に、サブメニューを表示している時には、コンテンツ部分に半透明エレメントを被せて誤クリックをしないようにも工夫しています。 また、サブメニューの表示には、細かなアニメーションを入れ込んで、表示のスライドインを見た目で体感できるようにしています。 ※こういうアニメーションって、仕様設計の時に記述しずらいので、やはり実際にサンプルコードを書いたほうがいいんですね。ソース
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML-parts SideMenu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="icon.css">
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="side-menu-small.css">
<script src="side-menu.js"></script>
</head>
<body>
<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>
</body>
</html>
;(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 $$;
})();
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[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;
}
0 件のコメント:
コメントを投稿