diff options
author | Dimitri van Heesch <doxygen@gmail.com> | 2021-05-30 09:42:06 (GMT) |
---|---|---|
committer | Dimitri van Heesch <doxygen@gmail.com> | 2021-05-30 09:42:06 (GMT) |
commit | 74b8e42b85cda8927e14511fba8b83f85b6ff2c9 (patch) | |
tree | 7ff89e17a28b279a82d7a4e489f5d2fd740a71b1 /jquery | |
parent | da0a6b42c349bc06b2804a4b0e8f55c7690f5cf9 (diff) | |
download | Doxygen-74b8e42b85cda8927e14511fba8b83f85b6ff2c9.zip Doxygen-74b8e42b85cda8927e14511fba8b83f85b6ff2c9.tar.gz Doxygen-74b8e42b85cda8927e14511fba8b83f85b6ff2c9.tar.bz2 |
Improved responsive design of dynamic menus
When DISABLE_INDEX=NO and HTML_DYNAMIC_MENUS=YES (both defaults) then
on screens with a width smaller than 768 pixels, the menu will collapse into a
bar with just a hamburger button and the search field.
Also the search result window now stays within the limited of the
screen.
Diffstat (limited to 'jquery')
-rw-r--r-- | jquery/Makefile | 2 | ||||
-rw-r--r-- | jquery/sass/_sm-dox.scss | 4 | ||||
-rw-r--r-- | jquery/sm-core-css.css | 78 |
3 files changed, 83 insertions, 1 deletions
diff --git a/jquery/Makefile b/jquery/Makefile index 4da7f94..51d7f38 100644 --- a/jquery/Makefile +++ b/jquery/Makefile @@ -5,7 +5,7 @@ POWERTIP_VERSION = 1.3.1 TOUCHPUNCH_VERSION = 0.2.3 SMARTMENUS_VERSION = 1.1.0 -MINIFIER ?= /usr/local/bin/yuicompressor-2.4.7 +MINIFIER ?= /usr/local/bin/yuicompressor-2.4.8 SCRIPTS = jquery-$(JQUERY_VERSION).min.js \ jquery.ui-$(JQUERY_UI_VERSION).min.js \ jquery.scrollTo-$(SCROLL_VERSION).min.js \ diff --git a/jquery/sass/_sm-dox.scss b/jquery/sass/_sm-dox.scss index 81a4e74..e1db779 100644 --- a/jquery/sass/_sm-dox.scss +++ b/jquery/sass/_sm-dox.scss @@ -217,6 +217,10 @@ $sm-dox__toggle-spacing: floor($sm-dox__main-row-height * 0.1); background: $sm-dox__collapsible-toggle-bg; @include border-radius($sm-dox__border-radius); } + & span.sub-arrow:before { + display: block; + content: '+'; + } // Change + to - on sub menu expand &.highlighted span.sub-arrow:before { display: block; diff --git a/jquery/sm-core-css.css b/jquery/sm-core-css.css index c586599..42f8c15 100644 --- a/jquery/sm-core-css.css +++ b/jquery/sm-core-css.css @@ -8,3 +8,81 @@ .sm a.disabled{cursor:not-allowed;} .sm:after{content:"\00a0";display:block;height:0;font:0px/0 serif;clear:both;visibility:hidden;overflow:hidden;} .sm,.sm *,.sm *:before,.sm *:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;} + +.main-menu-btn { + position: relative; + display: inline-block; + width: 36px; + height: 36px; + text-indent: 36px; + margin-left: 8px; + white-space: nowrap; + overflow: hidden; + cursor: pointer; + -webkit-tap-highlight-color: rgba(0,0,0,0); +} +/* hamburger icon */ +.main-menu-btn-icon, .main-menu-btn-icon:before, .main-menu-btn-icon:after { + position: absolute; + top: 50%; + left: 2px; + height: 2px; + width: 24px; + background: #666; + -webkit-transition: all 0.25s; + transition: all 0.25s; +} +.main-menu-btn-icon:before { + content: ''; + top: -7px; + left: 0; +} +.main-menu-btn-icon:after { + content: ''; + top: 7px; + left: 0; +} +/* x icon */ +#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon { + height: 0; + /*background: transparent;*/ +} +#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:before { + top: 0; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); +} +#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:after { + top: 0; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); +} +/* hide menu state checkbox (keep it visible to screen readers) */ +#main-menu-state { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + border: 0; + padding: 0; + overflow: hidden; + clip: rect(1px,1px,1px,1px); +} +/* hide the menu in mobile view */ +#main-menu-state:not(:checked) ~ #main-menu { + display: none; +} +#main-menu-state:checked ~ #main-menu { + display: block; +} +@media (min-width: 768px) { + /* hide the button in desktop view */ + .main-menu-btn { + position: absolute; + top: -99999px; + } + /* always show the menu in desktop view */ + #main-menu-state:not(:checked) ~ #main-menu { + display: block; + } +} |