Menu and Sub-menus

Home Forums Receptar Menu and Sub-menus

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #20901

    Gabriel
    Participant

    Menu and Sub-menus

    Resolved

    Hey there! Have you noticed this support service is provided FREE of charge?
    If you like the speed and accuracy of resolutions, please consider supporting me with a small donation. Thank you

    Consider a donation →

    Hi I would like to ask a question about your theme.

    I wanted to make a sub-menu for my website and I wasn’t able to finde it or make it so I just wated to ask if there is such option in your theme.

    Example:
    Menu 1 you can click on it and it will open up and then there is a sub-menu like:
    Menu 2
    Menu 3
    And so on to make that the manu isn’t 2 kilometers long or you don’t need to scroll too far.

    I hope I will hear from you soon.
    Thank you for your respond in advance.

    Sincerely.
    Horyl

    #20902

    Gabriel
    Participant

    There is image of what I mean because I can’t explain it

    #20907

    Oliver Juhas
    Keymaster

    Hi Horyl,

    From what I can see on your website, the theme menu is displaying as intended. You can preview the same behavior on theme demo website at https://themedemos.webmandesign.eu/receptar/

    Please note that this is by design and the theme does not hide the submenus and reveal them on some button click. If you would like to introduce such functionality, I presume using some plugin could help. Or try to restructure your navigational menu.

    Best regards,

    Oliver Juhas
    WebMan Design

    #20979

    Gabriel
    Participant

    Sorry for this late replay but I had ton of work thanks for the answare. If I can bother you little bit more is there any good plug-in for this situacion or I have to redizine entire menu with some other plug-in because I really like your menu style.

    Best regarts
    Gabriel

    #20980

    Oliver Juhas
    Keymaster

    Hi Gabriel,

    I’m sorry for inconvenience, but unfortunately I have no plugin recommendation in this situation. I haven’t come across a situation where I would need such plugin or functionality. So, the only advice I can give is to try using some of the plugins to see which one fits you the most.

    Alternatively, I’ve put together a sample code taken and adapted from WordPress’ native Twenty Seventeen theme that should work. Please adapt to your needs. Put the code into your child theme‘s functions.php file:

    function child_theme_submenu_js() {
    	wp_add_inline_script(
    		'receptar-scripts-global',
    		"
    		(function( $ ) {
    			var masthead, menuToggle, siteNavContain, siteNavigation;
    
    			function initMainNavigation( container ) {
    
    				// Add dropdown toggle that displays child menu items.
    				var dropdownToggle = $( '<button />', { 'class': 'dropdown-toggle', 'aria-expanded': false })
    					.append( $( '<span />', { 'class': 'genericons-neue genericons-neue-plus' }) )
    					.append( $( '<span />', { 'class': 'screen-reader-text', text: 'Expand child menu' }) );
    
    				container.find( '.menu-item-has-children > a, .page_item_has_children > a' ).after( dropdownToggle );
    
    				// Set the active submenu dropdown toggle button initial state.
    				container.find( '.current-menu-ancestor > button' )
    					.addClass( 'toggled-on' )
    					.attr( 'aria-expanded', 'true' )
    					.find( '.screen-reader-text' )
    					.text( 'Collapse child menu' );
    				// Set the active submenu initial state.
    				container.find( '.current-menu-ancestor > .sub-menu' ).addClass( 'toggled-on' );
    
    				container.find( '.dropdown-toggle' ).click( function( e ) {
    					var _this = $( this ),
    						screenReaderSpan = _this.find( '.screen-reader-text' );
    
    					e.preventDefault();
    					_this.toggleClass( 'toggled-on' );
    					_this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
    
    					_this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
    
    					screenReaderSpan.text( screenReaderSpan.text() === 'Expand child menu' ? 'Collapse child menu' : 'Expand child menu' );
    				});
    			}
    
    			initMainNavigation( $( '.main-navigation' ) );
    
    			masthead       = $( '#masthead' );
    			menuToggle     = masthead.find( '.menu-toggle' );
    			siteNavContain = masthead.find( '.main-navigation' );
    			siteNavigation = masthead.find( '.main-navigation > div > ul' );
    
    			// Enable menuToggle.
    			(function() {
    
    				// Return early if menuToggle is missing.
    				if ( ! menuToggle.length ) {
    					return;
    				}
    
    				// Add an initial value for the attribute.
    				menuToggle.attr( 'aria-expanded', 'false' );
    
    				menuToggle.on( 'click', function() {
    					siteNavContain.toggleClass( 'toggled-on' );
    
    					$( this ).attr( 'aria-expanded', siteNavContain.hasClass( 'toggled-on' ) );
    				});
    			})();
    
    			// Fix sub-menus for touch devices and better focus for hidden submenu items for accessibility.
    			(function() {
    				if ( ! siteNavigation.length || ! siteNavigation.children().length ) {
    					return;
    				}
    
    				// Toggle <code>focus</code> class to allow submenu access on tablets.
    				function toggleFocusClassTouchScreen() {
    					if ( 'none' === $( '.menu-toggle' ).css( 'display' ) ) {
    
    						$( document.body ).on( 'touchstart', function( e ) {
    							if ( ! $( e.target ).closest( '.main-navigation li' ).length ) {
    								$( '.main-navigation li' ).removeClass( 'focus' );
    							}
    						});
    
    						siteNavigation.find( '.menu-item-has-children > a, .page_item_has_children > a' )
    							.on( 'touchstart', function( e ) {
    								var el = $( this ).parent( 'li' );
    
    								if ( ! el.hasClass( 'focus' ) ) {
    									e.preventDefault();
    									el.toggleClass( 'focus' );
    									el.siblings( '.focus' ).removeClass( 'focus' );
    								}
    							});
    
    					} else {
    						siteNavigation.find( '.menu-item-has-children > a, .page_item_has_children > a' ).unbind( 'touchstart' );
    					}
    				}
    
    				if ( 'ontouchstart' in window ) {
    					$( window ).on( 'resize', toggleFocusClassTouchScreen );
    					toggleFocusClassTouchScreen();
    				}
    
    				siteNavigation.find( 'a' ).on( 'focus blur', function() {
    					$( this ).parents( '.menu-item, .page_item' ).toggleClass( 'focus' );
    				});
    			})();
    		})( jQuery );
    		"
    	);
    
    	wp_add_inline_style(
    		'receptar',
    		"
    		.main-navigation li {
    			position: relative;
    		}
    
    		.main-navigation .dropdown-toggle {
    			position: absolute;
    			right: 0;
    			top: 0;
    			padding: .31em;
    			margin: .62em;
    			line-height: 1;
    		}
    
    		.main-navigation .sub-menu {
    			display: none;
    		}
    
    		.main-navigation .sub-menu.toggled-on {
    			display: block;
    		}
    		"
    	);
    }
    add_action( 'wp_enqueue_scripts', 'child_theme_submenu_js' );

    Best regards,

    Oliver Juhas
    WebMan Design

    • This reply was modified 2 months, 1 week ago by  Oliver Juhas. Reason: Adding more info
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.