FANDOM


  • I created some simple personal JS to add 3 links to favorite wikis, but I couldn't figure out how to add a submenu.

    I also noticed that the profile menu seems to have a fixed height, likely from some upstream CSS that I didn't want to mess with.

    Here's my simple (non submenu) JS:

    /* Add three favorite wikis links to profile menu in modernized UI */
    $(function () {
    	$('div.wds-global-navigation__user-menu > div.wds-global-navigation__dropdown-content > ul.wds-list > li:nth-child(3)').not('#MyFavWikis').before('<li id="MyFavWikis" style="padding-top:0.8em;"><span style="color:gray; padding:0 0 0.8em 0.6em;">My Favorite Wikis</span><div class="wds-is-not-scrollable" style="font-size:80%; line-height:120%; padding:0.5em 0 0.5em 2.6em;"><a href="http://downtonabbey.wikia.com/" class="wds-global-navigation__dropdown-link" data-tracking-label="myfavwikis.1">Downton Abbey Wiki</a><br/><a href="http://expanse.wikia.com/" class="wds-global-navigation__dropdown-link" data-tracking-label="myfavwikis.2">Expanse Abbey Wiki</a><br/><a href="http://wow.wikia.com/" class="wds-global-navigation__dropdown-link" data-tracking-label="myfavwikis.3">WoWWiki</a></div></li>');
    });
    
      Loading editor
    • Could you please increase readability and uncompress your code for us?

      If I try out your code, it works without any problems.

        Loading editor
    • I guess it wasn't clear enough. My code doesn't add a submenu, it just adds some indented links. So, my code really isn't important.

      I don't know how to add a submenu in place of the indented list of links.

        Loading editor
    • Ah, okay. I can try it out, but nonetheless compressed code is not nice to find misstakes and bugs in it ;-)

        Loading editor
    • can u add element with custom class, then show submenu on hover, through css?

        Loading editor
    • Probably, but I'm not sure how to do it. It would be nice it it could be done in a self-contained JS, but maybe not.

        Loading editor
    • with js u'll have to control hover events, which... kinda tricky, cuz it fires multiple times and easy to lost. something like that: u got hover event on main menu, then show submenu and moves mouse to it, then got mouse out event on main menu and loses submenu.

        Loading editor
    • Yeah, that's way beyond my ability.

        Loading editor
    • Here is a really crude dropdown to get you on the right tracks. I don't suggest using style attributes and that you move them to a different style sheet instead, but this should do the job for now. I would also suggest to add target="_blank" to the fav wiki links, but that's my personal preference.

      var fav_wikis = {
      	downtonabbey: 'Downton Abbey Wiki',
      	expanse: 'Expanse Abbey Wiki',
      	wow: 'WoWWiki'
      };
      $('.wds-global-navigation__user-menu li')
      	.eq(-3).not('#MyFavWikis')
      	.before($('<li>', {
      		id: 'MyFavWikis',
      		style: 'margin: 0; padding: 0 9px;',
      		append: [$('<div>', {
      			style: 'color: gray; padding: 9px;',
      			text: 'My Favorite Wikis'
      		}),
      		$('<div>', {
      			id: 'FavWikisList',
      			class: 'wds-is-not-scrollable',
      			css: {
      				fontSize: '80%',
      				lineHeight: '120%',
      				padding: '1em',
      				display: 'none',
      				left: '190px',
      				backgroundColor: 'white',
      				border: '1px solid #ccc',
      				marginTop: '-30px',
      				position: 'absolute'
      			}
      		})],
      		mouseenter: function() {
      			$(this).find('#FavWikisList').show();
              },
      		mouseleave: function() {
      			$(this).find('#FavWikisList').hide();
              }
      	}))
      	.parent()
      		.css('overflow-y', 'visible');
      $.each(fav_wikis, function(key, name) {
      	$('#FavWikisList').append($('<a>', {
      		href: 'http://' + key + '.wikia.com/',
      		class: 'wds-global-navigation__dropdown-link',
      		title: name,
      		text: name,
      		'data-tracking-label': 'myfavwikis.' + (Object.keys(fav_wikis).indexOf(key) + 1),
      		style: 'display: block; padding: 4px;'
      	}));
      });
        Loading editor
    • That's pretty much perfect. I just add a ► after the submenu name and it works well. Moving the CSS to a stylesheet would be more elegant, but unnecessary.

        Loading editor
    • It works but it should behave like the navigation menu in the Community header.

        Loading editor
    • HM100 wrote: It works but it should behave like the navigation menu in the Community header.

      Yeah, that would be nice, but not critical.

        Loading editor
    • And one more, it does not work with wikis having - and . in character url name.

        Loading editor
    • now you just need to copy the :hover-style from the list items to the sublist items ;)

        Loading editor
    • HM100 wrote: And one more, it does not work with wikis having - and . in character url name.

      It does.

      var fav_wikis = {
          'nl.runescape': 'RuneScape in Dutch',
          'steven-universe': 'Steven Universe Wiki'
      };
        Loading editor
    • I'll test it soon

        Loading editor
    • Okay here's some code to add the highlighting when you mouseover the submenu and its items... There is probably a better way with pure CSS, but this is what I got working.

      Add near top somewhere:

      var submenuhovercolor = "#ddd"; // light gray
      var submenuitemhovercolor = "#ffd"; // light yellow
      

      And code below somewhere:

      $('.wds-global-navigation__user-menu li').hover(function(){
          $(this).css("background-color", submenuhovercolor);
          }, function(){
          $(this).css("background-color", "inherit");
      });
      $('#FavWikisList > .wds-global-navigation__dropdown-link').hover(function(){
          $(this).css("background-color", submenuitemhovercolor);
          }, function(){
          $(this).css("background-color", "inherit");
      });
      
        Loading editor
    • A nice thing about WDS styles is that they're fairly versatile - a class used in one place can work in others without much fuss. Here's another script version, relying on the local navigation dropdown menu styles:

      var fav_wikis = {
          downtonabbey: 'Downton Abbey Wiki',
          expanse: 'Expanse Abbey Wiki',
          wow: 'WoWWiki'
      };
       
      $(function () {
          'use strict';
       
          if (!window.fav_wikis || $('#MyFavWikis').length) {
              return;
          }
       
          var $favWikiList = $('<ul>').addClass('wds-list wds-is-linked');
          var $favWikis = $('<li>')
              .attr('id', 'MyFavWikis')
              .addClass('wds-dropdown-level-2')
              .append(
                  $('<a>')
                      .attr('href', '#')
                      .addClass('wds-dropdown-level-2__toggle')
                      .append(
                          $('<span>').text('My Favorite Wikis'),
                          $('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="12" height="12" class="wds-icon wds-icon-tiny wds-dropdown-chevron"><path d="M6.003 10.002a.997.997 0 0 1-.707-.293L.293 4.706a1 1 0 1 1 1.414-1.414l4.296 4.295 4.293-4.293A1 1 0 1 1 11.71 4.71l-5 5a.997.997 0 0 1-.707.293" fill-rule="evenodd"></path></svg>')
                      ),
                  $('<div>')
                      .addClass('wds-dropdown-level-2__content wds-is-not-scrollable')
                      .append($favWikiList)
              );
       
          Object.keys(window.fav_wikis).forEach(function (key) {
              $favWikiList.append(
                  $('<li>').append(
                      $('<a>')
                          .attr('href', '//' + key + '.wikia.com/')
                          .text(window.fav_wikis[key])
                  )
              );
          });
       
          $('.wds-global-navigation__user-menu > .wds-dropdown__content').addClass('wds-is-not-scrollable');
          $('.wds-global-navigation__user-menu li').has('a[data-tracking-label="account.profile"]')
              .after($favWikis);
      });
        Loading editor
    • Excellent.

      I wanted the My Favorite Wikis to show up above My Preferences so I changed:

          $('.wds-global-navigation__user-menu li').has('a[data-tracking-label="account.profile"]')
              .after($favWikis);

      To:

          $('.wds-global-navigation__user-menu li').has('a[data-tracking-label="account.preferences"]')
              .before($favWikis);
        Loading editor
    • Neatly done, OneTwoThreeFall. Try add the class wds-is-sticked-to-parent to the #MyFavWikis container so that the dropdown appears next to the "Favourite Wikis" label:

      From
      .addClass('wds-dropdown-level-2')
      To
      .addClass('wds-dropdown-level-2 wds-is-sticked-to-parent')
        Loading editor
    • Thanks! The downside of using the sticked class is that it'll cause the menu to go past the top of the viewport if there are more than 3-4 items, so that's why I left it out.

        Loading editor
    • Why is the list menu going up instead of down?

        Loading editor
    • Okay I moved the class (to the div) and instead changed:

      .addClass('wds-dropdown-level-2__content wds-is-not-scrollable')

      To:

      .addClass('wds-dropdown-level-2__content wds-is-not-scrollable wds-is-sticked-to-parent')

      This makes the wiki menu list popup in a better place.

        Loading editor
    • It works as the wiki navigation menus do, meaning the top of the submenu is positioned even with the top of its parent menu. Is this what you refer to? If you use the change Speedit mentions, the bottom of the submenu is positioned even with the bottom of the parent menu item, and the list will appear upwards from there.

      I don't think adding the sticked class to .wds-dropdown-level-2__content will have any effect though - it'll work like default.

        Loading editor
    • Before I made the change above, my popup menu list for wikis was going up above the top of the profile menu (after SpeedIt's recommended change). That's all I know. I guess I wanted the default, then.

        Loading editor
    • Oh yes, that change would have been the cause (like I mentioned in #21).

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message
Community content is available under CC-BY-SA unless otherwise noted.

Fandom may earn an affiliate commission on sales made from links on this page.

Stream the best stories.

Fandom may earn an affiliate commission on sales made from links on this page.

Get Disney+