diff --git a/src/js/src/css/index.css b/src/js/src/css/index.css index 3e53dbc..58eafdb 100644 --- a/src/js/src/css/index.css +++ b/src/js/src/css/index.css @@ -15,20 +15,49 @@ margin-right: 0.25em; } -#left-menu { - min-width: 300px; - font-size: 1.25em; - min-width: 300px; +#left-menu { + font-size: 1.25em; min-height: 640px; margin-left: 0.5em; color:#CCCCCC; background-color: #516C8D; } -#left-menu img { - padding-right: 0.25em; +#left-menu.expanded.initial li { + animation: left-menu-expanding forwards 0s ease 0s normal; } + +#left-menu.expanded li { + animation: left-menu-expanding forwards 0.2s ease 0s normal; +} + +#left-menu.shrinked li { + animation: left-menu-shrinking forwards 0.2s ease 0s normal; +} + +@keyframes left-menu-expanding { + 0% { + min-width: 1.5em; + max-width: 1.5em; + } + 100% { + min-width: 300px; + max-width: inherit; + } +} + +@keyframes left-menu-shrinking { + 0% { + min-width: 300px; + max-width: inherit; + } + 100% { + min-width: 1.5em; + max-width: 1.5em; + } +} + #left-menu ol { padding-left: 0em; } @@ -41,21 +70,25 @@ #left-menu li { padding-top: 0.25em; padding-bottom:0.25em; - padding-left:0.5em; + padding-left:0.25em; border-bottom-style:solid; border-bottom-width:0.1em; border-bottom-color: #CCCCCC; list-style:none; height: 1.25em; + overflow:hidden; + text-overflow: clip; } #left-menu img { + padding-right: 0.25em; width:auto; height:auto; max-width:100%; max-height:100%; } + #left-menu li,#left-menu img { vertical-align:middle; } @@ -64,15 +97,14 @@ background-color: #6A91C1; } - #main-pane { - width:100% + width:100%; + padding-top: 0.75em; + background-color:#516C8D; } #main-tabs { margin:0em; - margin-left:0em; - margin-right:0em; padding: 0em; } diff --git a/src/js/src/img/menu-toggle.png b/src/js/src/img/menu-toggle.png new file mode 100644 index 0000000..f0990d9 --- /dev/null +++ b/src/js/src/img/menu-toggle.png Binary files differ diff --git a/src/js/src/img/menu-toggle.svg b/src/js/src/img/menu-toggle.svg new file mode 100644 index 0000000..f5d6818 --- /dev/null +++ b/src/js/src/img/menu-toggle.svg @@ -0,0 +1,14 @@ + + + + + + + + + + diff --git a/src/js/src/index.html b/src/js/src/index.html index c27b570..86d9f7d 100644 --- a/src/js/src/index.html +++ b/src/js/src/index.html @@ -10,14 +10,15 @@
-
+
    -
  1. HOME
    2. -
  2. メニューアイテム2
    3. -
  3. メニューアイテム3
    4. + +
  4. HOME
    5. +
  5. メニューアイテム2
    6. +
  6. メニューアイテム3
@@ -46,6 +47,26 @@ }); }) + const leftMenu = query("#left-menu")[0]; + const menuToggle = query("#menu-toggle")[0] + menuToggle.addEventListener("click", function() { + leftMenu.classList.remove("initial") + toggleMenuItem(leftMenu); + query("#left-menu li span").forEach(function(val) { + toggleMenuItem(val); + }) + }) + + function toggleMenuItem(element) { + if(element.classList.contains("expanded")) { + element.classList.add("shrinked"); + element.classList.remove("expanded"); + } else { + element.classList.add("expanded"); + element.classList.remove("shrinked"); + } + } + function selectTab(index) { query("li.tab.selected").forEach(function(val) {