Blogger Sub Menu setup

69 Views Asked by At

Blogger Main Drop Down Nav

<b:widget id='LinkList78' locked='false' title='Main Menu' type='LinkList' version='1'>
      <b:widget-settings>
      <b:widget-setting name='link-3'>#</b:widget-setting>
      <b:widget-setting name='sorting'>NONE</b:widget-setting>
      <b:widget-setting name='link-4'>#</b:widget-setting>
      <b:widget-setting name='text-1'>Contact</b:widget-setting>
      <b:widget-setting name='link-1'>#</b:widget-setting>
      <b:widget-setting name='text-0'>Home</b:widget-setting>
      <b:widget-setting name='link-2'>#</b:widget-setting>
      <b:widget-setting name='text-3'>-Item</b:widget-setting>
      <b:widget-setting name='link-0'>#bt-home</b:widget-setting>
      <b:widget-setting name='text-2'>Drop down menu</b:widget-setting>
      <b:widget-setting name='text-4'>--Item</b:widget-setting>
     </b:widget-settings>
   <b:includable id='main'>
   <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
   <div class='widget-content'>
   <ul>
   <b:loop values='data:links' var='link'>
   <li>
   <a expr:href='data:link.target' target='_blank'><data:link.name/></a>
   </li>
   </b:loop>
   </ul>
   <b:include name='quickedit'/>
   </div>
   </b:includable>
   </b:widget>
   </b:section>
   </nav>
   </div>
    <div class='align-self-center'><a data-target='#btemplates-search' data-toggle='modal'    href='#search' id='btemplates-search-icon'><i aria-hidden='true' class='fa fa-search fa-flip-horizontal'/></a></div>
   </div></div>

I am not sure how the sub-menu is to be handled or where to begin or look for any additionl coding that allows it. I added the target='_blank'> with a space in front of it because it wasn't allowing me to create a drop down menu in the beginning. Then I was able to go under linklist widget in Blogger and list each labeled Icon Example: -Fashion site:urlsearch/label, -Books site:urlsearch/label, etc.

My question is if I am putting in a submenu under one of the above icon labels such as -Fashion and then sub divide the into men, women, children, babies etc.. How is this accomplished?

Here is the submenu coding:

linkListUl = $j('.navbar .section ul').each(function(){ $j(this).addClass('navbar-nav') });
                $j('.navbar .section li').each(function(i){
                    var navItemText = $j(this).children('a').text();
                    $j(this).addClass('nav-item align-self-lg-center');
                    $j(this).children('a').addClass('nav-link');
                    var re = /^-([^-]+)/i;
                    var resub = /^--([^-]+)/i;
                    var retag = /^(tag:[^-]+)-?(\d+)?-?(true|false)?/i;
                    if (re.exec(navItemText) && ajaxSupport) {
                        var previousNavItem = $j(this).prev();
                        if(previousNavItem.length){
                            var navItemLink = $j(this).children('a').attr('href');
                            var navItemNewText = navItemText.replace(/^-/i, '');
                            var nextNavItem = $j(this).next();
                            var nextNavItemText = nextNavItem.text();
                            var previousNavItemLink = previousNavItem.children('a').attr('href');
                            var previousNavItemText = previousNavItem.children('a').text();
                            var newLink = subitems = '';
                            while( resub.exec($j(this).next().text()) ) {
                                subitems += '<a class="dropdown-item" href="' + $j(this).next().children('a').attr('href') + '">' +
                                 '' + $j(this).next().text().replace('--', '') + '</a>';
                                $j(this).next().remove();
                            }
                            $j(this).remove();

                            if( resub.exec(nextNavItemText) ) {
                                newLink = '<div class="dropdown-submenu">' +
                                 '<a id="sub-dropdown-'+i+'" role="button" class="dropdown-item dropdown-toggle" ' +
                                  'data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" ' +
                                   'href="'+navItemLink+'">'+navItemNewText+'</a>' +
                                    '<div class="dropdown-menu" aria-labelledby="sub-dropdown-'+i+'">' +
                                     subitems +
                                     '</div>' +
                                      '</div>';
                            } else {
                                newLink = '<a class="dropdown-item" href="' + navItemLink + '">' + navItemNewText + '</a>';
                            }
                            if (previousNavItem.hasClass('dropdown')) {
                                var dropdownList = previousNavItem.find('.dropdown-menu').first();
                                dropdownList.append(newLink);
                            } else {
                                previousNavItem.className += ' ' + 'dropdown';
                                previousNavItem.addClass('dropdown');
                                previousNavItem.html('<a class="nav-link dropdown-toggle" href="' + previousNavItemLink +
                                        '" role="button" data-toggle="dropdown" id="dropdown-' + i + '" aria-haspopup="true" aria-expanded="false">' +
                                        previousNavItemText +
                                        '</a>' +
                                        '<div class="dropdown-menu" aria-labelledby="dropdown-' + i + '">' +
                                        newLink +
                                        '</div>');
                            }
                        }
                    } else if (retag.exec(navItemText) && ajaxSupport) {
                        var dropdownSettings = navItemText.match(retag);
                        var postsType = dropdownSettings[1];
                        var postsToDisplay = parseInt(dropdownSettings[2]);
                        var postsThumbnailSize = dropdownSettings[3] === 'true' ? 200 : 0;
                        $j(this).addClass('dropdown');
                        $j(this).children('a').html(postsType.replace(/tag:|-\d/, ''));
                        btemplatesJqueryGetPosts($j(this), postsToDisplay, postsType, postsThumbnailSize, 'menulist');
                    }
                });
                $j('#topMenu').removeClass('d-none');

                $j(function() {
                    $j("div.dropdown-menu [data-toggle='dropdown']").on("click", function(event) {
                        event.preventDefault();
                        event.stopPropagation();
                        $j(this).closest('.dropdown-menu.show').find('.dropdown-menu').removeClass('show');

                        $j(this).siblings().toggleClass("show");


                        if (!$j(this).next().hasClass('show')) {
                            $j(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
                        }
                        $j(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
                            $j('.dropdown-submenu .show').removeClass("show");
                        });

                    });
                });

                var navSimple = document.querySelectorAll('.navbar-simple .section');
                Array.prototype.forEach.call(navSimple, function (el, i) {
                    if (el.querySelector('.widget-content') !== null)
                        el.innerHTML = el.querySelector('.widget-content').innerHTML;
                });
                var linkListSimpleNavbar = document.querySelectorAll('.navbar-simple .section li');
                var linkListUlSimpleNavbar = document.querySelectorAll('.navbar-simple .section ul');
                Array.prototype.forEach.call(linkListUlSimpleNavbar, function (el, i) {
                    el.className += ' ' + 'nav';
                });
                Array.prototype.forEach.call(linkListSimpleNavbar, function (el, i) {
                    var navItemText = el.children[0].textContent;
                    if (el.classList)
                        el.classList.add('nav-item');
                    else
                        el.className += ' ' + 'nav-item';
                    if (el.children[0].classList)
                        el.children[0].classList.add('nav-link');
                    else
                        el.children[0].className += ' ' + 'nav-link';
                });

                var btMenus = document.querySelectorAll('.btemplates-dropdown nav, .btemplates-dropdown .navbar-simple');
                Array.prototype.forEach.call(btMenus, function (el, i) {
                    el.classList.remove('d-none');
                });

0

There are 0 best solutions below