From ebf80e50f3a81bcbfc05fcb53759d78d73fe9530 Mon Sep 17 00:00:00 2001 From: Long Nguyen Date: Thu, 7 May 2015 19:28:37 +0700 Subject: [PATCH 1/2] Dropdown for navbar horizontal display. --- css/navbar.icons.css | 50 +++++++++++++++++++++++++++++++++----------- css/navbar.menu.css | 50 +++++++++++++++++++++++++++++++++++++++++++- css/navbar.module.css | 3 +++ icons/5181c6/push-left.png | Bin 0 -> 297 bytes icons/5181c6/push-left.svg | 10 +++++++++ icons/5181c6/push-right.png | Bin 0 -> 293 bytes icons/5181c6/push-right.svg | 10 +++++++++ 7 files changed, 110 insertions(+), 13 deletions(-) create mode 100644 icons/5181c6/push-left.png create mode 100644 icons/5181c6/push-left.svg create mode 100644 icons/5181c6/push-right.png create mode 100644 icons/5181c6/push-right.svg diff --git a/css/navbar.icons.css b/css/navbar.icons.css index 823ecc6..79dbb46 100644 --- a/css/navbar.icons.css +++ b/css/navbar.icons.css @@ -78,7 +78,7 @@ .no-svg .navbar-bar .navbar-icon-help.navbar-active:before { background-image: url("../icons/ffffff/questionmark-disc.png"); } -#navbar-administration .navbar-bar .navbar-icon.element-hidden { +.navbar-bar .navbar-icon.element-hidden { display: none; } @@ -247,7 +247,30 @@ .no-svg .navbar-icon-help.navbar-active:before { background-image: url("../icons/000000/questionmark-disc.png"); } - +.np-svg #navbar-administration .navbar-menu .navbar-icon.navbar-handle::before { + background-image: url("../icons/787878/push-right.png"); + background-size: 75%; +} +#navbar-administration .navbar-tray-horizontal .navbar-menu .navbar-icon.navbar-handle::before { + background-image: url("../icons/787878/push-right.svg"); + background-size: 75%; +} +.np-svg #navbar-administration .navbar-tray-horizontal .navbar-menu .navbar-menu .navbar-icon.navbar-handle.open:before { + background-image: url("../icons/5181c6/push-right.png"); + background-size: 75%; +} +#navbar-administration .navbar-tray-horizontal .navbar-menu .navbar-menu .navbar-icon.navbar-handle.open:before { + background-image: url("../icons/5181c6/push-right.svg"); + background-size: 75%; +} +#navbar-administration .navbar-menu .navbar-level-1 > .navbar-box .navbar-icon.navbar-handle::before { + background-image: url("../icons/787878/chevron-disc-down.svg"); + background-size: 75%; +} +#navbar-administration .navbar-menu .navbar-level-1 > .navbar-box .navbar-icon.navbar-handle.open::before { + background-image: url("../icons/5181c6/chevron-disc-down.svg"); + background-size: 75%; +} @media only screen and (min-width: 16.5em) { #navbar-administration .navbar-bar .navbar-icon { margin-left: 0; @@ -331,30 +354,26 @@ left: 1.6667em; /* LTR */ } #navbar-administration .navbar-icon.navbar-handle:before { - background-image: url("../icons/5181c6/chevron-disc-down.svg"); + background-image: url("../icons/787878/chevron-disc-down.svg"); } .no-svg #navbar-administration .navbar-icon.navbar-handle:before { - background-image: url("../icons/5181c6/chevron-disc-down.png"); + background-image: url("../icons/787878/chevron-disc-down.png"); } #navbar-administration .navbar-icon.navbar-handle.open:before { - background-image: url("../icons/787878/chevron-disc-up.svg"); + background-image: url("../icons/5181c6/chevron-disc-up.svg"); } .no-svg #navbar-administration .navbar-icon.navbar-handle.open:before { - background-image: url("../icons/787878/chevron-disc-up.png"); -} -#navbar-administration .navbar-menu .navbar-menu .navbar-icon.navbar-handle:before { - background-image: url("../icons/5181c6/twistie-down.svg"); - background-size: 75%; + background-image: url("../icons/5181c6/chevron-disc-up.png"); } .no-svg #navbar-administration .navbar-menu .navbar-menu .navbar-icon.navbar-handle:before { background-image: url("../icons/5181c6/twistie-down.png"); background-size: auto auto; } -#navbar-administration .navbar-menu .navbar-menu .navbar-icon.navbar-handle.open:before { +#navbar-administration .navbar-menu .navbar-menu > .nav-box .navbar-icon.navbar-handle.open:before { background-image: url("../icons/787878/twistie-up.svg"); background-size: 75%; } -.no-svg #navbar-administration .navbar-menu .navbar-menu .navbar-icon.navbar-handle.open:before { +.no-svg #navbar-administration .navbar-menu .navbar-menu > .nav-box .navbar-icon.navbar-handle.open:before { background-image: url("../icons/787878/twistie-up.png"); background-size: auto auto; } @@ -407,3 +426,10 @@ background-image: url("../icons/787878/push-up.png"); } +/** + * Horizontal dock override + */ +#navbar-administration .navbar-tray-horizontal .navbar-icon.navbar-handle:focus { + background: none!important; +} + diff --git a/css/navbar.menu.css b/css/navbar.menu.css index 3151636..3db2812 100644 --- a/css/navbar.menu.css +++ b/css/navbar.menu.css @@ -12,11 +12,11 @@ position: relative; width: auto; } -#navbar-administration .navbar-tray-horizontal .navbar-menu .navbar-handle, #navbar-administration .navbar-tray-horizontal .navbar-menu .navbar-menu, #navbar-administration .navbar-tray-vertical .navbar-menu > .navbar-twisty > .navbar-menu { display: none; } +#navbar-administration .navbar-tray-horizontal .navbar-twisty.open > .navbar-menu, #navbar-administration .navbar-tray-vertical .navbar-twisty.open > .navbar-menu { display: block; /* Show the sub-menus */ } @@ -31,43 +31,91 @@ font-weight: bold; } +#navbar-administration .navbar-tray-horizontal li { + position: relative; +} + +#navbar-administration .navbar-tray-horizontal li .navbar-box { + width: 100%; + top: 0; + left: 0; +} + +#navbar-administration .navbar-tray-horizontal li .navbar-menu { + position: absolute; + border: 1px solid #cacaca; + left: -1px; + width: auto; +} + +#navbar-administration .navbar-tray-horizontal li.navbar-level-2 .navbar-menu { + left: 100%; + top: 0; + width: 100%; +} + /** * Items. */ +#navbar-administration .navbar-level-2, +#navbar-administration .navbar-level-3, +#navbar-administration .navbar-level-4, +#navbar-administration .navbar-level-5, +#navbar-administration .navbar-level-6, +#navbar-administration .navbar-level-7, +#navbar-administration .navbar-level-8 { + width: 100%; +} + #navbar-administration .navbar-level-2 > ul { background-color: #fafafa; border-bottom-color: #cccccc; border-top-color: #e5e5e5; + z-index: 2; } #navbar-administration .navbar-level-3 > ul { background-color: #f5f5f5; border-bottom-color: #c5c5c5; border-top-color: #dddddd; + z-index: 3; } #navbar-administration .navbar-level-4 > ul { background-color: #eeeeee; border-bottom-color: #bbbbbb; border-top-color: #d5d5d5; + z-index: 4; } #navbar-administration .navbar-level-5 > ul { background-color: #e5e5e5; border-bottom-color: #b5b5b5; border-top-color: #cccccc; + z-index: 5; } #navbar-administration .navbar-level-6 > ul { background-color: #eeeeee; border-bottom-color: #aaaaaa; border-top-color: #c5c5c5; + z-index: 6; } #navbar-administration .navbar-level-7 > ul { background-color: #fafafa; border-bottom-color: #b5b5b5; border-top-color: #cccccc; + z-index: 7; } #navbar-administration .navbar-level-8 > ul { background-color: #dddddd; border-bottom-color: #cccccc; border-top-color: #dddddd; + z-index: 8; +} + +/*#navbar-administration .navbar-tray-horizontal li.navbar-twisty.navbar-level-1 .navbar-box .navbar-menu-item { + margin-right: 1.5em; +}*/ + +#navbar-administration .navbar-tray-horizontal li.navbar-twisty > .navbar-box > a { + margin-right: 1.5em; } /** diff --git a/css/navbar.module.css b/css/navbar.module.css index 04586fb..839c1c3 100644 --- a/css/navbar.module.css +++ b/css/navbar.module.css @@ -251,6 +251,9 @@ body.navbar-tray-open.navbar-fixed.navbar-vertical #navbar-administration.navbar display: none; z-index: 501; } +#navbar-administration .navbar-tray > .navbar-lining { + position: relative; +} #navbar-administration.navbar-oriented .navbar-tray-vertical { left: -100%; /* LTR */ position: absolute; diff --git a/icons/5181c6/push-left.png b/icons/5181c6/push-left.png new file mode 100644 index 0000000000000000000000000000000000000000..8b661fdf8a5be9d3d2dfe31ee887bf2cb2f8ecd7 GIT binary patch literal 297 zcmV+^0oMMBP)Px#<4Ht8R45f=3~V^|mw}OiiQzxPyY&rL!VDw=Cb)V=1|c|`1O~zYJevF)k7eVM zCTIZAixogcQ(Ve-^J6oF1)CsD45S$tKJ6erFBjL_fX1VLU~<4Pd%K~*S{kPT0S!kA zV45MC7?~Lv7?|M(FfvGi*m%6a$OBi5hk?@opz~V({r}g2OYi^x44*)9I1Kw)GG^7p2MyHVt v_=qk^44>u4+YekIh1*|zLBugJI-zO+8wx~6lX>I700000NkvXXu0mjf#$<95 literal 0 HcmV?d00001 diff --git a/icons/5181c6/push-left.svg b/icons/5181c6/push-left.svg new file mode 100644 index 0000000..d8e02b4 --- /dev/null +++ b/icons/5181c6/push-left.svg @@ -0,0 +1,10 @@ + + + + Shape + Created with Sketch. + + + + + \ No newline at end of file diff --git a/icons/5181c6/push-right.png b/icons/5181c6/push-right.png new file mode 100644 index 0000000000000000000000000000000000000000..3dc5502200c707536a7324dc0f72d8506a03aae6 GIT binary patch literal 293 zcmV+=0owkFP)Px#-$_J4R45f=WFQd)HXM7)z{nuiJeCbpfRDz|>{7m) zA1F8_pz%m0K8+wbmVkz%Pk~MmhACtOihv&}k+{Mn)+{21a%m z25Mu5DFPYb-*}`D#z&_yoQ + + + Shape + Created with Sketch. + + + + + \ No newline at end of file -- 2.3.2 (Apple Git-55) From b794199735aa8214ad63b7a264e5a74d9dc2b2cc Mon Sep 17 00:00:00 2001 From: Long Nguyen Date: Thu, 7 May 2015 19:35:40 +0700 Subject: [PATCH 2/2] Fix bug active-menu-item opened by default in horizontal. --- js/navbar.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/js/navbar.js b/js/navbar.js index 5a749c7..0027273 100644 --- a/js/navbar.js +++ b/js/navbar.js @@ -545,6 +545,8 @@ Drupal.navbar = { $trays.filter('.navbar-tray-vertical.navbar-active').attr('data-offset-' + edge, ''); // If an active horizontal tray exists, mark it as an offset element. $trays.filter('.navbar-tray-horizontal.navbar-active').attr('data-offset-top', ''); + // Remove .open from li in horizontal mode + $trays.find('li.navbar-active-trail').toggleClass('open', !(orientation === 'horizontal')); }, /** -- 2.3.2 (Apple Git-55)