Side bar navigation menu – ::after selector

[Sankar]

Hi Okler Support Team/Rodrigo,

We are using sidebar navigation toggle menu. In the left navigation menu, we have menu items. Each menu item is <a> tag and it has ::after element as Angle down Font Awesome character (<i class="fas fa-angle-down"></i>).

Currently If we click on the <a> tag anywhere, it expands the sub menu and it displays the result in right side window panel. So here I am trying to achieve a task that if we click on this Angle down character, the menu ONLY SHOULD EXPAND THE SUB MENU and it should not refresh the results in the right side window panel. Since the ::after element is part of <a> tag, I am having challenges to extract the ::after selector and apply the event of expanding the menu.

Please direct me the suggestions to achieve this task. You can let me know if you need any additional details.

<ul>
<strong>The below is our CSHTML code:</strong></ul>



 `<div class="inner-wrapper">
            <!-- start: sidebar -->
            <aside id="sidebar-left" class="sidebar-left">
                <div class="sidebar-header">
                    <div class="sidebar-title">
                        Categories
                    </div>
                    <div class="sidebar-toggle hidden-xs hidden-sm" data-toggle-class="sidebar-left-collapsed" data-target="html" data-fire-event="sidebar-left-toggle">
                        <i class="fa fa-bars fa-" aria-label="Toggle sidebar"></i>
                    </div>
                </div>
                <div class="nano">
                    <div class="nano-content">
                        <nav id="menu" class="nav-main" role="navigation">
                            <category-list categories-data="@ViewBag.categoriesList"></category-list> @*This builds the menu items*@
                        </nav>
                    </div>
                    
                </div>
            </aside>
            <!-- end: sidebar -->`


<ul>
<strong>Associated CSS:</strong></ul>



	`.tab-navigation nav > ul > li a.dropdown-toggle:after {
		content: "\f107";
		display: inline-block;
		font-family: FontAwesome;
		float: right;
		border: none;
		margin-right: .755rem;
	}`

I have sent the screen shots to Rodrigo Teixeira . Please have a look and provide me your recommendations to achieve this task. Thanks.

---

• This topic was modified 2 weeks, 2 days ago by  Support2.
• This topic was modified 2 weeks, 2 days ago by  Support2.

[Support2]

Hello Sankar,

For it change the navigation code in js/theme.js around line 9 to this new:

// Navigation
(function($) {

	'use strict';

	var $items = $( '.nav-main li.nav-parent' );

	function expand( $li ) {
		$li.children( 'ul.nav-children' ).slideDown( 'fast', function() {
			$li.addClass( 'nav-expanded' );
			$(this).css( 'display', '' );
			ensureVisible( $li );
		});
	}

	function collapse( $li ) {
		$li.children('ul.nav-children' ).slideUp( 'fast', function() {
			$(this).css( 'display', '' );
			$li.removeClass( 'nav-expanded' );
		});
	}

	function ensureVisible( $li ) {
		var scroller = $li.offsetParent();
		if ( !scroller.get(0) ) {
			return false;
		}

		var top = $li.position().top;
		if ( top < 0 ) {
			scroller.animate({
				scrollTop: scroller.scrollTop() + top
			}, 'fast');
		}
	}

	$items.find('> a').on('click', function( ev ) {

		var $anchor = $( this ),
			$prev = $anchor.closest('ul.nav').find('> li.nav-expanded' ),
			$next = $anchor.closest('li');

		ev.preventDefault();

		var arrowWidth = parseInt(window.getComputedStyle($anchor.get(0), ':after').width, 10) || 0;
		if (ev.offsetX > $anchor.get(0).offsetWidth - arrowWidth) {
			console.log('arrow clicked!');

			if ( $prev.get( 0 ) !== $next.get( 0 ) ) {
				collapse( $prev );
				expand( $next );
			} else {
				collapse( $prev );
			}
		}

	});


}).apply(this, [jQuery]);

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

[Support2]

Hello Sankar,

We received your reply trough email.

Please try with this code into your category-pointer click event:

$(document).on("click", ".category-pointer", function (e) { 
	var $anchor = $( this ).find('> a');

    var arrowWidth = parseInt(window.getComputedStyle($anchor.get(0), ':after').width, 10) || 0;
	
	// Stop the js execution if click on arrow
	if (e.offsetX > $anchor.get(0).offsetWidth - arrowWidth) {
		console.log('arrow clicked!');

		return false;
	}

    if (IsException) {
        ReturnAfterError(e.target.innerText);
    } else {
        var txtChgLocation = $("#txtChgLocation").val();

        SearchByCategory(e.target.innerText, txtChgLocation);
    }

});

This will check when clicks on arrow and stop the JS execution.

We hope this helps.

Kind Regards,

Rodrigo.

---

[Sankar]

Thank you very much for your quick response on my request. I will apply this changes and run through the tests in Desktop and Mobile devices. I will update you that how it is going. Thank you.

---

[Sankar]

Hello Okler Themes Support Team,

The code which you sent to me worked well as per our requirement. Thank you so much for that. Its working well in Desktop environment. But when I was testing this in Mobile devices, I got an another problem that if i click on any menu items in the side bar menu, the side bar navigation menu was not collapsing and the user is not able to see the generated results in the rendering area. Its like the mobile screen is completely occupied by side bar navigation menu. Ideally the side bar navigation menu should be collapsed after the user made the choice on clicking on any one of the menu items. So I am forcibly clicking the toggle bar through JavaScript to collapse the menu. The below is the code to fix that.

Do you think this is correct approach or you have any other better suggestion?. Thanks again for your amazing support on Okler Themes related questions/clarifications.

$(document).on("click", ".category-pointer", function (e) {

	/*
	 Existing other JS code as I shown in my previous posts

	*/

	/* Added following script for navigation pane to collapse when we select a category on mobile devices.
        Added width 425 to make consistency throughout the site to identify mobile device */
        if (window.outerWidth < 425) {
            $(".toggle-sidebar-left").trigger('click');

        }
}

---

[Support2]

Hello Sankar,

This JS code will works but maybe the code below it’s a better approach since uses less javascript:

$(document).on("click", ".category-pointer", function (e) {
	
	....
	......
	....

    if (window.outerWidth < 425) {
        $('html').removeClass('sidebar-left-opened');
    }
});

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

[Sankar]

Rodrigo,

Thank you so much for your quick response. The solution which you provided is working great. I have verified them in Desktop and Mobile. The toggle side bar navigation menu is working as per our requirement. Thanks again for your great support and keep doing the great work.

---

[Sankar]

Hi Okler Support Team,

The below piece of the code is not working in IE and it works in all other browsers/Mobile. I am researching on this and it looks for me that this specific line window.getComputedStyle($anchor.get(0), ':after').width, 10) is not returning the expected result.

` var $anchor = $( this ).find(‘> a’);
var arrowWidth = parseInt(window.getComputedStyle($anchor.get(0), ‘:after’).width, 10) || 0;

// Stop the js execution if click on arrow
if (e.offsetX > $anchor.get(0).offsetWidth – arrowWidth) {
console.log(‘arrow clicked!’);

return false;
}`

If you have any suggestions or directions, please let me know. Thanks.

---

[Support2]

Hello Sankar,

We did a few tests here and discover the problem is that on Internet Explorer the getComputedStyle( selector, ':after' ).width always returns auto. So we need “tell” to the browser the width of :after. For it please add this code below in (theme-custom.css):

ul.nav-main li.nav-parent > a:after {
    width: 59px;
}

This should solve your issue.

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

[Sankar]

Thank you Rodrigo. I applied your solution and its working as expected. Thanks again for your quick resolution.

---

[Support2]

Hello Sankar,

Great!

If you need further assistance feel free to contact us.

Kind Regards,

Rodrigo.

---

[Author]

Posts