Forum:Is it Possible?

So I was woundering is it possible to have a menu inside a menu like when it drops down it says whatever you usally have and there is another arrow in that drops down in the same menu if you get what I mean   OA   Speak    Contribs    VD    13:35,3/18/2012


 * Do you mean something like what Aion Wiki uses for their top navigation? If you go to Locations -> Instances within the navigation bar there, you will see that they have added arrows to open more links beside the normal drop down menu when you hover your cursor over "Group" or "Solo". --Gardimuer { ʈalk } 16:01, March 18, 2012 (UTC)


 * Exactually what i mean   OA   Speak    Contribs    VD    18:53,3/18/2012


 * Take a look at w:c:aion:MediaWiki:Wiki-navigation. If you can't figure out how they did it, post back here and I'll explain it. -- Fandyllic (talk &middot; contr) 19 Mar 2012 1:39 PM Pacific
 * You also need to install CSS and Javascript for it to work. The code was fairly simple until the 24 January 2012 technical update where Wikia Staff ruined everything unexpectedly and broke the level 4 menus customization. There is apparently a far harder way to do it even with the 24 January 2012 technical update, but it is so complicated that even I can't figure it out. I know I'm not the person who started this topic, but I would also like to know the answer so it would be appreciated if you explained. EpicWikipedian 21:50, March 19, 2012 (UTC)


 * Oops, you're right. I haven't messed with the new menus much. I'll post a generalized version of their JS in a bit. -- Fandyllic (talk &middot; contr) 19 Mar 2012 2:04 PM Pacific


 * Generalized version of the Aion wiki JS from MediaWiki:Wikia.js (example for 4th menu Locations &gt; 1st submenu Instances &gt; 1st subsubmenu Group):

<pre style="margin-left:48px;"> // Restores tier 4 menus $(function { //SubSubMenu4  $('.WikiHeaderRestyle nav').find('a[href="/wiki/Menu4Sub1SubMenu1Page"] + .subnav-3').html('<li><a href="#" class="subnav-3a">Menu4Sub1SubMenu1Name<img height="0" width="0" class="chevron-right" src="data:image/gif;base64,R0lGODlhAQABAIABAAAAAP///yH5BAEAAAEALAAAAAABAAEAQAICTAEAOw%3D%3D"></a><ul><li><a href="/wiki/Menu4Sub1SubMenu1Item1Page">Menu4Sub1SubMenu1Item1Name</a></li><li><a href="/wiki/Menu4Sub1SubMenu1Item2Page">Menu4Sub1SubMenu1Item2Name</a></li><li><a href="/wiki/Menu4Sub1SubMenu1Item3Page">Menu4Sub1SubMenu1Item3Name</a></li></ul>'); });
 * You basically have to match the target page for the sub-menu item you want to turn into a sub-sub-menu and this code will turn it into a sub-sub-menu and add the menu items.
 * CSS from MediaWiki:Wikia.css</tt> :

<pre style="margin-left:48px;"> /* Wiki-navigation subnavs - new style */ .WikiHeaderRestyle > nav { color: black !important; left: 200px; width: 800px; top: 13px; }

.WikiaMainContent { padding-top: 10px; } .WikiHeaderRestyle > nav li.marked { padding-bottom: 4px; }

.WikiHeaderRestyle > nav li a { border-left: 1px solid #9C9C9C; color: black; }

.WikiHeaderRestyle > nav li { line-height: 31px; font-size: 14px; border-bottom: none; }

.WikiHeaderRestyle > nav .subnav-3 { top: 28px !important; -khtml-border-radius: 0 5px 5px 5px; -moz-border-radius: 0 5px 5px 5px; -webkit-border-radius: 0 5px 5px 5px; -o-border-radius: 0 5px 5px 5px; border-radius: 0 5px 5px 5px; }

.subnav-3 { width: 175px !important; } .subnav-3 li:hover ul, .subnav-3 li:hover ul li { display: block; }

.WikiHeaderRestyle > nav .subnav-3 li a { padding: 2px 9px; }

.subnav-3 li ul { display: none; background: white; border: 1px solid #2094DD; left: 165px; margin: 4px; min-width: 125px; padding: 5px 1px; position: absolute; top: -5px; -moz-box-shadow:1px 2px 15px 0px black; -webkit-box-shadow:1px 2px 15px 0px black; box-shadow:1px 2px 15px 0px black; -khtml-border-radius: 0 5px 5px 5px; -moz-border-radius: 0 5px 5px 5px; -webkit-border-radius: 0 5px 5px 5px; -o-border-radius: 0 5px 5px 5px; border-radius: 0 5px 5px 5px; }

.chevron-right { border-color: transparent transparent transparent black; border-style: solid; border-width: 4px; position: absolute; right: 7px; top: 9px; }

.subnav-3 li ul { padding: 1px; z-index: 91; }

.subnav-3 li:first-of-type ul { top: -5px ! important; } .subnav-3 li:nth-child(2) ul { top: 25px ! important; } .subnav-3 li:nth-child(3) ul { top: 55px ! important; } .subnav-3 li:nth-child(4) ul { top: 85px ! important; } .subnav-3 li:nth-child(5) ul { top: 115px ! important; } .subnav-3 li:nth-child(6) ul { top: 145px ! important; }
 * You'll have to figure out which CSS is important as probably not all of it is, but the CSS above is what might affect stuff added by the JS code. -- <span style="border-bottom:1px dotted; cursor:help;" title="Who?">Fandyllic (talk &middot; contr) 19 Mar 2012 4:20 PM Pacific