[HTMLパーツ] メニュー項目サンプル #7「サイドメニューアイコン多階層表示」

2019年3月8日

HTML テクノロジー プログラミング

最近のホームページの傾向は、文字サイズを大きめにして、アイコンなどのピクトグラムを活用し、表示の細かな箇所までアニメーションを施すという事で、見栄え、使い勝手などを向上させているようです。 メニューがたくさんあるサイトは、機能が多く使いづらい、探すのが大変・・・などというネガティブな意見が出やすいのですが、逆に言うと、機能が多くてわかりやすく使いやすいサイトであれば、何ら問題が無いという事でもあります。 これまで作ってきたサイドメニューは、比較的大きめのサイドメニューで表示していたため、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; }

ソース解説

今回は、アイコンを使用するためIMGタグを使った画像を設置してもいいのですが、あえてCSSにbase64を書き込んでアイコンファイルを使わないという横着をやってみました。 でも、慣れるとこっちの方が扱いやすくなるかもね。 ちなみに、svgファイルをbase64に変換するのは、下記のサイトで簡単に行なえます。 https://lab.syncer.jp/Tool/Base64-encode/ サブメニュー表示のクリックと、コンテンツ部分に覆いかぶさる半透明エレメントの連動をしっかりコントロールしないといけないのをjavascriptで制御しています。 今回はこれまでで一番長いソースコードになってしまいましたが、cssのネイティブの書き方だとどうしてもトリッキーなことをやると、長くなってしまう傾向がありますね。 @mediaクエリーを使って、もっと便利にDOM構造の階層をコントロールできればいいのに・・・

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。