Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Collapsible mobile submenu #662

Merged
5 commits merged into from
Oct 8, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 94 additions & 3 deletions assets/front/css/_parts/0_3_common_elements.css
Original file line number Diff line number Diff line change
Expand Up @@ -276,8 +276,7 @@ box-shadow: 0 0 2px rgba(255,255,255,0.4);
background: #000;
}
/* END ANOTHER BUTTON */


.hu-dropdown-toggle-wrapper { display: none }



Expand All @@ -293,6 +292,7 @@ box-shadow: 0 0 2px rgba(255,255,255,0.4);
.nav li > a:after { content: "\f0da"; float: right; opacity: 0.5; }
.nav > li > a:after {content: "\f0d7"; float: none; margin-left: 6px; font-size: 0.875em; line-height: 1.2em; }
.nav li > a:only-child:after {content: ""; margin: 0; }
#footer nav .nav { display: block !important; }
#footer .nav li > a:after { content: "\f0da"; }
#footer .nav > li > a:after { content: "\f0d8"; }
#footer .nav li > a:only-child:after { content: ""; }
Expand Down Expand Up @@ -321,6 +321,7 @@ box-shadow: 0 0 2px rgba(255,255,255,0.4);
}
@media only screen and (max-width: 719px) {
#header .nav-container .nav, #footer .nav-container .nav {display: none;}
#footer .nav-container .nav.expanded, #header .nav-container .nav.expanded {display: block;}
.nav { font-weight: 400; }
.nav-container { text-transform: none; }
.nav-toggle, .ham__navbar-toggler, .nav-text, .ham__navbar-toggler-two { display: block; }
Expand All @@ -338,17 +339,20 @@ box-shadow: 0 0 2px rgba(255,255,255,0.4);
.nav li a { line-height: 1.6em; display: block; padding: 8px 13px; }
/*.nav li li a { padding-left: 15px; padding-right: 15px; }*/
/* dropdown arrows */
/* no arrows
.nav li > a:after { content: '\f0d7'; opacity: 0; margin-left: 6px; font-size: 0.6rem; }
.nav > li > a:after { content: '\f0d7'; font-size: 0.6rem; }
.nav li > a:only-child:after { content: ''; }
*/

/* level 1 */
.nav > li { font-size: 0.9375em; }
.nav li > a:hover,
.nav li.current_page_item > a,
.nav li.current-menu-item > a,
.nav li.current-post-parent > a { color: #fff; }
/* level 2 & 3 */
.nav ul { display: block!important;}
.nav ul { display: block }

/*.nav a { padding-left:25px;}*/
.nav ul a { padding-left:37px;}
Expand All @@ -361,4 +365,91 @@ box-shadow: 0 0 2px rgba(255,255,255,0.4);

.nav ul li { font-size: 0.85rem; font-weight: 300; }
.nav ul li a { padding-top: 6px; padding-bottom: 6px; }

/*
* Mobile dropdown on click
* colors are defined in 0_4_header.css and 9_0_footer.css
*/
.submenu-click-expand.nav-wrap,
.submenu-click-expand.nav-wrap li,
.submenu-click-expand ul { background: inherit; }

.submenu-click-expand .sub-menu,
.submenu-click-expand .nav li {
position: relative;
}

.submenu-click-expand .page_item_has_children > a,
.submenu-click-expand .menu-item-has-children > a {
padding-right: 44px;
}
.submenu-click-expand .nav li a {
min-height: 37px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.submenu-click-expand .nav > li > a {
min-height: 43px;
}

.hu-dropdown-toggle-wrapper {
position: absolute;
top: 1px;
right: 0;
text-align: center;
line-height: 1;
bottom: 1px;
}

.submenu-click-expand .hu-dropdown-toggle-wrapper {
display: block;
}

.hu-dropdown-toggle {
background: none;
-webkit-appearance: none;
outline: none;
border: none;
padding: 0;
cursor: pointer;
display: block;
height: 45px;
width: 44px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
}

li li .hu-dropdown-toggle {
height: 39px;
}

.hu-dropdown-toggle i {
display: block;
-webkit-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
width: 100%;
font-size: 13px;
}

.submenu-click-expand .nav ul { display: none }
.submenu-click-expand .nav ul.expanded { display: block; }
li.expanded > .hu-dropdown-toggle-wrapper .fa-angle-down {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
transform: rotate(-180deg);
}
/* \test */
}
11 changes: 8 additions & 3 deletions assets/front/css/_parts/0_4_header.css
Original file line number Diff line number Diff line change
Expand Up @@ -238,8 +238,7 @@ box-shadow: -1px 0 0 rgba(255,255,255,0.1); }
}

.mobile-menu .mobile-search {
width: calc(100% - 28px);
padding: 6px 14px 15px;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 6px 14px 15px;
}
.mobile-menu .mobile-search input.search {
width: 100%
Expand Down Expand Up @@ -377,12 +376,18 @@ box-shadow: -1px 0 0 rgba(255,255,255,0.1); }
=> Applies to mobile menu if set to topnav, main or mobile
*/
@media only screen and (max-width: 719px) {
#header .nav-container .nav li a { color: #fff; color: rgba(255,255,255,0.9); border-top: 1px solid rgba(255,255,255,0.06); }
#header .nav-container .nav li a { color: #fff; color: rgba(255,255,255,0.9); border-top: 1px solid rgba(255,255,255,0.06); }
#header .hu-dropdown-toggle { color: #fff; color: rgba(255,255,255,0.9); }
/* level 1 */
#header .nav-container .nav li > a:hover { background: rgba(0,0,0,0.15); color: #fff; }
#header .nav-container .nav li.current_page_item > a,
#header .nav-container .nav li.current-menu-item > a,
#header .nav-container .nav li.current-post-parent > a { text-decoration: underline; background: rgba(0,0,0,0.15); color: #fff; }

#header .hu-dropdown-toggle:hover
#header .nav-container .nav li.current_page_item > .hu-dropdown-toggle,
#header .nav-container .nav li.current-menu-item > .hu-dropdown-toggle,
#header .nav-container .nav li.current-post-parent > .hu-dropdown-toggle { color: #fff }
}


Expand Down
8 changes: 7 additions & 1 deletion assets/front/css/_parts/9_0_footer.css
Original file line number Diff line number Diff line change
Expand Up @@ -122,9 +122,15 @@ box-shadow: inset 0 1px 0 rgba(0,0,0,0.05); }

/* common */
#nav-footer .nav li a { color: #999; color: rgba(0,0,0,0.8); border-top: 1px solid #f2f2f2; }
#nav-footer .hu-dropdown-toggle { color: #999; color: rgba(0,0,0,0.8); }
/* level 1 */
#nav-footer .nav li > a:hover { background: #f2f2f2; color: #444; }
#nav-footer .nav li > a:hover,
#nav-footer .nav li.current_page_item > a,
#nav-footer .nav li.current-menu-item > a,
#nav-footer .nav li.current-post-parent > a { background: #f2f2f2; color: #444; }

#nav-footer .hu-dropdown-toggle:hover,
#nav-footer .nav li.current_page_item > .hu-dropdown-toggle,
#nav-footer .nav li.current-menu-item > .hu-dropdown-toggle,
#nav-footer .nav li.current-post-parent > .hu-dropdown-toggle { color: #444; }
}
19 changes: 18 additions & 1 deletion functions/class-utils-settings-map.php
Original file line number Diff line number Diff line change
Expand Up @@ -454,7 +454,7 @@ function hu_mobiles_sec() {
'section' => 'mobiles_sec',
'type' => 'checkbox',
'notice' => __( "This option is good if you want to display a perfect font-size for your headings on any mobile devices. Note : it might override the css rules previously set in your custom stylesheet." , 'hueman' )
)
),
);
}

Expand Down Expand Up @@ -796,6 +796,17 @@ function hu_header_menus_sec() {
'priority' => '110'
)
),
'mobile-submenu-click' => array(
'default' => hu_user_started_before_version( '3.3.28', '1.0.29' ) ? false : true,
'control' => 'HU_controls',
'label' => sprintf( '%1$s : %2$s', __('Mobile devices', 'hueman' ) , __( 'Expand submenus on click', 'hueman') ),
'section' => 'header_menus_sec',
'type' => 'checkbox',
'ubq_section' => array(
'section' => 'footer_design_sec',
'priority' => '18'
)
),
'mobile-search' => array(
'default' => 1,
'control' => 'HU_controls',
Expand Down Expand Up @@ -1303,6 +1314,7 @@ function hu_footer_design_sec() {
'label' => __("Use a default page menu if no menu has been assigned.", 'hueman'),
'section' => 'footer_design_sec',
'type' => 'checkbox',
'priority' => 15,
'notice' => $nav_section_desc
),
'footer-widgets' => array(
Expand All @@ -1312,6 +1324,7 @@ function hu_footer_design_sec() {
'section' => 'footer_design_sec',
'type' => 'czr_layouts',
'choices' => $this -> hu_get_footer_layout_choices(),
'priority' => 20,
'notice' => __('Recommended number of columns : 3' , 'hueman')
),
'footer-logo' => array(
Expand All @@ -1327,6 +1340,7 @@ function hu_footer_design_sec() {
//to keep the selected cropped size
'dst_width' => false,
'dst_height' => false,
'priority' => 25,
'notice' => __('Upload your custom logo image. Supported formats : .jpg, .png, .gif, svg, svgz' , 'hueman')
),
'color-footer' => array(
Expand All @@ -1337,6 +1351,7 @@ function hu_footer_design_sec() {
'type' => 'color' ,
'sanitize_callback' => 'maybe_hash_hex_color',
'sanitize_js_callback' => 'maybe_hash_hex_color',
'priority' => 30,
'transport' => 'postMessage'
),
'copyright' => array(
Expand All @@ -1346,6 +1361,7 @@ function hu_footer_design_sec() {
'type' => 'text',
'section' => 'footer_design_sec',
'sanitize_callback' => array( $this, 'hu_sanitize_html_text_input' ),
'priority' => 35,
'notice' => __( 'Note : Html is allowed.', 'hueman')
),
'credit' => array(
Expand All @@ -1354,6 +1370,7 @@ function hu_footer_design_sec() {
'label' => __( 'Footer credit text', 'hueman'),
'type' => 'checkbox',
'section' => 'footer_design_sec',
'priority' => 40,
'transport' => 'postMessage'
),
);
Expand Down
8 changes: 7 additions & 1 deletion functions/init-front.php
Original file line number Diff line number Diff line change
Expand Up @@ -1099,6 +1099,8 @@ function hu_scripts() {
'desktop' => hu_normalize_stick_menu_opt( hu_get_option( 'header-desktop-sticky' ) ),
'mobile' => hu_normalize_stick_menu_opt( hu_get_option( 'header-mobile-sticky' ) )
),
'mobileSubmenuExpandOnClick' => esc_attr( hu_get_option( 'mobile-submenu-click' ) ),
'submenuTogglerIcon' => '<i class="fas fa-angle-down"></i>',
'isDevMode' => ( defined('WP_DEBUG') && true === WP_DEBUG ) || ( defined('CZR_DEV') && true === CZR_DEV ),
//AJAX
'ajaxUrl' => add_query_arg(
Expand All @@ -1113,7 +1115,11 @@ function hu_scripts() {
'on' => is_object( $started_on ) ? (array)$started_on : $started_on
),
'isWelcomeNoteOn' => $is_welcome_note_on,
'welcomeContent' => $welcome_note_content
'welcomeContent' => $welcome_note_content,
'i18n' => array(
'collapsibleExpand' => __( 'Expand', 'hueman' ),
'collapsibleCollapse' => __( 'Collapse', 'hueman' )
),
)
)//end of filter
);//wp_localize_script()
Expand Down