Quantcast
Channel: SharePoint 2013 - Development and Programming forum
Viewing all articles
Browse latest Browse all 7589

JavaScript Global Navigation - How to make the Arrow icon clickable?

$
0
0

Hi there

Screenshot is of our Global Navation. JavaScript being used is attached below.
Is it possible for someone to tweak attached custom JavaScript so the Arrow icon becomes clickable as well please?

Thanks.

JavaScript being used:

$(document).ready(function () {

	//Searching for Top Navigation HOME Button and add custom css class, so that it can be positioned
	var my = $('a[href="/HelpAndSupport/SitePages/Home.aspx"]');
	var myTxt = $(".top-navigation").find('a[href="/HelpAndSupport/SitePages/Home.aspx"], a[href="/HelpAndSupport/SitePages/Default.aspx"], a[href="/HelpAndSupport/Pages/Home.aspx"],a[href="/HelpAndSupport/Pages/chip.aspx"]').addClass('HelpTxt');
	$(myTxt).parent().parent().parent().parent().append(myTxt.parent());
	$(".top-navigation").find('.HelpTxt').parent().addClass('staticHelpTxt');

	//Clone element for click event starts here. Reformating default HTML structure to structure required to achieve the visuals.
	$("<li class='dynamic' />").prependTo(".top-navigation li.dynamic-children > ul.dynamic");
	$(".top-navigation li.dynamic-children > a.dynamic-children").filter(function(index) {
		$(this).closest("li.dynamic-children").children("ul.dynamic").children().first().append($(this).clone());
		$(this).attr("href", "javascript:void(0);");
	})
	//Clone element for click event ends here

	var $mainNavigation, $msCoreListMenuRoot, $firstNavigationItem, $secondNavigationItem, $lastNavigationItem, TAC, breakPoint, listMenuLI
	$mainNavigation = $(".main-navigation");
	$msCoreListMenuRoot = $mainNavigation.find(".ms-core-listMenu-root");

	//Create and add three div elements for separating top Navigation to $msCoreListMenuRoot
	$firstNavigationItem = $("<div class='menuItem first'>");
	$secondNavigationItem = $("<div class='menuItem second'>");
	$lastNavigationItem = $("<div class='menuItem last'>");

	$msCoreListMenuRoot.before($firstNavigationItem);
	$msCoreListMenuRoot.before($secondNavigationItem);
	$msCoreListMenuRoot.after($lastNavigationItem);

	//Remove "HELP AND SUPPORT from ul and add it in new div created"
	$lastNavigationItem.append($msCoreListMenuRoot.find(".staticHelpTxt").html());
	$msCoreListMenuRoot.find(".staticHelpTxt").remove();

	//Remove Department and Sites from ul and add it in new div created
	$firstNavigationItem.append($(" > li > a", $msCoreListMenuRoot));

	//Add remaining ul in third div ($secondNavigationItem)
	$secondNavigationItem.append($($msCoreListMenuRoot));
	$secondNavigationItem.prepend($(" > li > ul > li:first-child > a", $msCoreListMenuRoot));
	$(" > li > ul > li:first-child", $msCoreListMenuRoot).remove();

	//Clone DEPARTMENTS AND SITES for click event starts here
	$(".second > a.ms-core-listMenu-item")
	$("<li class='static' />").prependTo(".masthead .ms-core-listMenu-root > li.static > ul").append($(".second > a.ms-core-listMenu-item").clone());
	$(".second > a.ms-core-listMenu-item").attr("href", "javascript:void(0);");
	//Clone DEPARTMENTS AND SITES for click event ends here

	//Login for getting 8 block from total UL Starts Here
	var TAC = $(" > li > ul > li", $msCoreListMenuRoot).length;
	var breakPoint = TAC/3;
	var listMenuLI = $(".masthead .ms-core-listMenu-root > li");
	//Add new UL's in $msCoreListMenuRoot
	$(listMenuLI).prepend('<ul class="links col colLinks2"></ul>').prepend('<ul class="links col colLinks1"></ul>');
	$(" > ul.static", listMenuLI).addClass('links col colLinks3');

	while(TAC > 0) {
		var colLink1HTML = [], colLink2HTML = [];

		 $(".ms-core-listMenu-root > li > ul > li").each(function(index, val) {
			if(TAC > (breakPoint*2)){
				colLink1HTML.push($(this));
			};
			if(TAC > (breakPoint) && TAC <= (breakPoint*2) ){
				colLink2HTML.push($(this));
			};
			--TAC;
		});
	}
	$(".colLinks1").append(colLink1HTML);
	$(".colLinks2").append(colLink2HTML);
	//Login for getting 8 block from totla UL Ends Here

	//Actions for the button
	$(".masthead .top-navigation").show();
	fnOpt1();

	/*Remove default Bootstrape TOP Navigation Behaviour Starts*/
	/***********************************************************************************************************/
	function fnOpt1() {
		//Search for all css classes starting with ms-core and replace it with custom
		var temp = $('.top-navigation a, .top-navigation span, .top-navigation ul, .top-navigation li, .top-navigation div, .top-navigation p').filter(function () {
			return this.className.match(/\ms-core/)
		})

		temp.each(function(){
			$(this).attr("class",this.className.replace(/ms-core/gi,'custom'));
		});

		$(".menuItem a.dynamic").addClass("custom-dynamic").removeClass("dynamic");
		$(".menuItem a.dynamic-children").addClass("custom-dynamic-children").removeClass("dynamic-children");
		$(".menuItem ul.dynamic").addClass("custom-dynamic").removeClass("dynamic");
		$(".menuItem li.dynamic").addClass("custom-dynamic").removeClass("dynamic");
		$(".menuItem li.dynamic-children").addClass("custom-dynamic-children").removeClass("dynamic-children");
		$("html").on("click", function(evt) {
			$(".top-navigation").find(".selected").removeClass("selected");
		});
		$(".second > .custom-listMenu-item").on("click", function(evt) {
			if($(this).parent().hasClass("selected")) {
				$(this).parent().removeClass("selected");
			}
			else {
				$(this).parent().addClass("selected");
			}

			//$(this).next().toggle();
			$(this).parent().find(".selected").removeClass("selected");
			evt.stopPropagation();
		});
		$(".links > li.custom-dynamic-children > .custom-listMenu-item").on("click", function(evt) {

			if($(this).parent().hasClass("selected")) {
				$(".links").find(".selected").removeClass("selected");
				$(this).parent().removeClass("selected");
			}
			else {
				$(".links").find(".selected").removeClass("selected");
				$(this).parent().addClass("selected");
			}
			evt.stopPropagation();
		});

		$(".second > ul.custom-listMenu-root > li.static > ul.links > li.static > ul.custom-dynamic > li.custom-dynamic-children > .custom-listMenu-item").on("click", function(evt) {

			if($(this).parent().hasClass("selected")) {
				$(".second > ul.custom-listMenu-root > li.static > ul.links > li.static > ul.custom-dynamic > li.custom-dynamic-children").removeClass("selected");
				$(this).parent().removeClass("selected");
			}
			else {
				$(".second > ul.custom-listMenu-root > li.static > ul.links > li.static > ul.custom-dynamic > li.custom-dynamic-children").removeClass("selected");
				$(this).parent().addClass("selected");
			}
			evt.stopPropagation();
		});
	}
	/***********************************************************************************************************/
	/*Remove default Bootstrape TOP Navigation Behaviour Ends*/

	/*Apply selector color to Top Navigation main buttons start*/
	$(".menuItem > .custom-listMenu-item").on("click", function(evt) {
		$(".custom-listMenu-horizontalBox").find(".custom-listMenu-item").removeClass("custom-listMenu-selected");
		$(this).addClass("custom-listMenu-selected");
		//alert($(this));
	});
	/*Apply selector color to Top Navigation main buttons end*/
})

In Chrome > F12 > Inspect - the code around arrow is:

<ul class="links col colLinks1"><li class="static"><li class="static custom-dynamic-children"><a class="static menu-item custom-listMenu-item ms-displayInline ms-navedit-linkNode custom-dynamic-children" tabindex="0" href="javascript:void(0);"><span aria-haspopup="true" class="additional-background ms-navedit-flyoutArrow dynamic-children"></a><ul class="custom-dynamic"></li>
/* More li tags*/

Thanks so much.



Viewing all articles
Browse latest Browse all 7589

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>