Forums: Index → General Discussion → Is it Possible?
Fandom's forums are a place for the community to help other members.
To contact staff directly or to report bugs, please use Special:Contact.
To contact staff directly or to report bugs, please use Special:Contact.
Note: This topic has been unedited for 4413 days. It is considered archived - the discussion is over. Information in this thread may be out of date. Do not add to unless it really needs a response.
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)
- 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 · 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)
- 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 · contr) 19 Mar 2012 1:39 PM Pacific
- Generalized version of the Aion wiki JS from MediaWiki:Wikia.js (example for 4th menu Locations > 1st submenu Instances > 1st subsubmenu Group):
// 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 :
/* 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; }