Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Tabs > Multilevel Dynamic Menu
Mottie (SuperAdmin) 12/26/2011 8:43 PM EST : Multilevel Dynamic Menu
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Multilevel Dynamic Menu

GuildPortal admin site link to the original post

This mod named "Multilevel Dynamic Menu" will add a new multi-level menu in place of the current menu; but currently, it only works with the Dynamic Images type menu (Control Panel > Navigation Style > Dynamic Images)



In the mod Customization Code area there are three customizable sections, all of which need to remain inside of the customization code area:


CSS
.sf-menu li {
    width: auto;
    min-width: 100px; /* set the minimum width of your tabs here */
    padding: 2px;
}
/* background of the submenu dropdowns */
.sf-menu li ul {
    background-color: #000;
}
/* padding to vertically center the text in the main menu: top right bottom left */
.sf-menu li a {
    padding: 8px 0 12px 5px;
}
/* indicator arrow - change this to
    background-image: url(/Cargo/Mods/425/arrows-black.gif);
    if you have a light background */

.sf-sub-indicator {
    background-image: url(/Cargo/Mods/425/arrows-white.gif);
}
  • Adjust the minimum tab width. The default is 100px, but if you have a lot more text in your menu, you can expand this as needed.
  • The submenu background color can be modified in the second block of css by changing the background-color in blue.
  • If the text in the menu isn't centered vertically or needs more padding on the left, adjust the padding (in red) in the third block of css. The order of the padding is show in the comment above.
  • If your tabs have a light colored background, you can change the indicator arrows, showing that there is a submenu associated, by changing the file name from "arrows-white.gif" to "arrows-black.gif" in orange.

Script
var supersuboptions = {
    minWidth   : 12, // minimum width of sub-menus in em units
    maxWidth   : 27, // maximum width of sub-menus in em units
    extraWidth : 1   // extra width can ensure lines don't sometimes turn over due to slight rounding differences and font-family
};
  • Adjust these options to change the width of the submenu. Note that the numbers are the size in EM, which is a variable font width based on the size of the "M" character. So "12" is set to the minimum width of 12 M's, etc.
  • If you set the width too narrow (minWidth), the text will wrap to the next line.
  • The "maxWidth" setting prevents the submenu from getting too wide.
  • I'm not really sure what the "extraWidth" setting does, but I left the comment in there. That's basically all that is mentioned about it - ref.

HTML
  • This is the most complicated part of this mod. But I'll try to give lots of examples to make it as easy as possible.
  • First off, I'd recommend copying all of the customization code into your favorite text editor (non-rich text type, meaning the editor doesn't have options to change the font color) so you can get a better overall view of the HTML.
NO SUBMENUS - This is the HTML for a menu with no submenus, it'll basically look exactly like the current navigation menu
<ul class="sf-menu"> <!-- MAIN MENU -->

    <li> <!-- MAIN MENU ITEM #1 -->
        <a href="/Guild.aspx?GuildID=258012&TabID=2168223">Help Site</a>
    </li>  <!-- END MAIN MENU ITEM #1 -->

    <li> <!-- MAIN MENU ITEM #2 -->
        <a href="/Guild.aspx?GuildID=258012&TabID=2168223">Forums</a>
    </li>  <!-- END MAIN MENU ITEM #2 -->

    <li> <!-- MAIN MENU ITEM #3 -->
        <a href="/Guild.aspx?GuildID=258012&TabID=2168223">Guild</a>
    </li> <!-- END MAIN MENU ITEM #3 -->

    <li> <!-- MAIN MENU ITEM #4 -->
        <a href="/Guild.aspx?GuildID=258012&TabID=2168223">Mail</a>
    </li> <!-- END MAIN MENU ITEM #4 -->

</ul> <!-- END MAIN MENU -->
SUBMENUS ONE LEVEL - This is the HTML for a menu with a submenu that is only one level deep (the new part has a dark grey background).
<ul class="sf-menu"> <!-- MAIN MENU -->

    <li> <!-- MAIN MENU ITEM #1 -->
        <a href="/Guild.aspx?GuildID=258012&TabID=2168223">Help Site</a>

        <ul> <!-- SUB MENU -->

            <li> <!-- SUB MENU ITEM #1 -->
                <a href="/Guild.aspx?GuildID=258012&TabID=2168223">Test Site 2</a>
            </li>

            <li> <!-- SUB MENU ITEM #2 -->
                <a href="/Guild.aspx?GuildID=258012&TabID=2168223">Test Site 3</a>
            </li>

            <li> <!-- SUB MENU ITEM #3 -->
                <a href="/Guild.aspx?GuildID=258012&TabID=2168223">Test Site 4</a>
            </li>

        </ul> <!-- END SUB MENU -->

    </li>  <!-- END MAIN MENU ITEM #1 -->

    <li> <!-- MAIN MENU ITEM #2 -->
        <a href="/Guild.aspx?GuildID=258012&TabID=2168223">Forums</a>
    </li>  <!-- END MAIN MENU ITEM #2 -->

    <li> <!-- MAIN MENU ITEM #3 -->
        <a href="/Guild.aspx?GuildID=258012&TabID=2168223">Guild</a>
    </li> <!-- END MAIN MENU ITEM #3 -->

    <li> <!-- MAIN MENU ITEM #4 -->
        <a href="/Guild.aspx?GuildID=258012&TabID=2168223">Mail</a>
    </li> <!-- END MAIN MENU ITEM #4 -->

</ul> <!-- END MAIN MENU -->
SUBMENUS TWO LEVELS - This is the HTML for a menu with a submenu that is two levels deep (the new part has a dark blue background).
<ul class="sf-menu"> <!-- MAIN MENU -->

    <li> <!-- MAIN MENU ITEM #1 -->
        <a href="/Guild.aspx?GuildID=258012&TabID=2168223">Help Site</a>
    </li>  <!-- END MAIN MENU ITEM #1 -->

    <li> <!-- MAIN MENU ITEM #2 -->
        <a href="/Guild.aspx?GuildID=258012&TabID=2168223">Forums</a>
    </li>  <!-- END MAIN MENU ITEM #2 -->

    <li> <!-- MAIN MENU ITEM #3 -->
        <a href="/Guild.aspx?GuildID=258012&TabID=2168223">Guild</a>

        <ul> <!-- SUB MENU -->

            <li> <!-- SUB MENU ITEM #1 -->
                <a href="/Guild.aspx?GuildID=258012&TabID=2168223">Information</a>

                <ul> <!-- SUB SUB MENU -->
                    <li><a href="/Guild.aspx?GuildID=258012&TabID=2168223">Calendar</a></li>
                    <li><a href="/Guild.aspx?GuildID=258012&TabID=2168223">Progression</a></li>
                    <li><a href="/Guild.aspx?GuildID=258012&TabID=2168223">Roster</a></li>
                    <li><a href="/Guild.aspx?GuildID=258012&TabID=2168223">Voting</a></li>
                    <li><a href="/Guild.aspx?GuildID=258012&TabID=2168223">Bank</a></li>
                    <li><a href="/Guild.aspx?GuildID=258012&TabID=2168223">Chat</a></li>
                </ul> <!-- END SUB SUB MENU -->

            </li> <!-- END SUB MENU ITEM #1 -->

            <li> <!-- SUB MENU ITEM #2 -->
                <a href="/Guild.aspx?GuildID=258012&TabID=2168223">Media</a>

                <ul> <!-- SUB SUB MENU -->
                    <li><a href="/Guild.aspx?GuildID=258012&TabID=2168223">Gallery</a></li>
                    <li><a href="/Guild.aspx?GuildID=258012&TabID=2168223">Videos</a></li>
                </ul> <!-- END SUB SUB MENU -->

            </li> <!-- END SUB MENU ITEM #2 -->

        </ul> <!-- END SUB MENU -->

    </li> <!-- END MAIN MENU ITEM #3 -->

    <li> <!-- MAIN MENU ITEM #4 -->
        <a href="/Guild.aspx?GuildID=258012&TabID=2168223">Mail</a>
    </li> <!-- END MAIN MENU ITEM #4 -->

</ul> <!-- END MAIN MENU -->
  • Once you get the basic layout of the menu done, you'll need to update ALL of the web addresses. I've highlighted the GuildID and TabID in red in each link.
  • You are not limited to GuildPortal addresses, in fact you can use ANY url.

    <li><a href="http://google.com">Google</a></li>

  • If you have any trouble or questions, please don't hesitate to post in this thread or message me.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Tinkrbelle (Applicant) 9/5/2012 1:31 AM EST : RE: Multilevel Dynamic Menu

Tinkrbelle
Posts: 66

0
Like

0
Dislike

Hmm, having trouble making this work. I'm not sure where to put the HTML. (Sorry I'm such a noob!) Also, does it work if I have external tabs on my nav bar? My 'Apply', 'World of Logs', 'Youtube', and 'Twitch.tv' are all external tabs. Ultimately what I'm trying to do is two things. Make one 'Videos/Stream' tab with a drop down menu with 'Youtube' and 'Twitch.tv' options as well as eventually making a 'Guides' tab with the drop down menu listing all the classes in WoW. You've been so helpful to me so far! Thanks again!

http://methodguild.net/ 
TopBottom

Mottie (SuperAdmin) 9/5/2012 9:56 AM EST : RE: Multilevel Dynamic Menu
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hi Tinkrbelle!

Actually, you just leave that HTML within the Customization Code section of the mod.

The HTML for this menu is complete custom, so you will have to manually add the internal and external tabs. All of the instructions (hopefully) are in this post above, but please feel free to post here ot message me if you have any questions.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Tinkrbelle (Applicant) 9/5/2012 5:53 PM EST : RE: Multilevel Dynamic Menu

Tinkrbelle
Posts: 66

0
Like

0
Dislike

Mottie said:
Hi Tinkrbelle!

Actually, you just leave that HTML within the Customization Code section of the mod.

The HTML for this menu is complete custom, so you will have to manually add the internal and external tabs. All of the instructions (hopefully) are in this post above, but please feel free to post here ot message me if you have any questions.


Ok thanks. I did manually add the tabs, I must have done something wrong though. Which tab am I using under the Custom CSS? Additions to Standard? Also I have something in there already, will that affect this new stuff I want to put in there? This is what I came up with. I'm not sure if it's correct. Since I've done this though I've once again changed the tabs on the site haha.

 <li> <!-- MAIN MENU ITEM #1 -->
        <a href="/Guild.aspx?GuildID=298755&TabID=2504278">Home</a>
    </li>  <!-- END MAIN MENU ITEM #1 -->

    <li> <!-- MAIN MENU ITEM #2 -->
        <a href="/Guild.aspx?GuildID=298755&TabID=2504278">Join/Apply</a>
     </li> <!-- END MAIN MENU ITEM #2 -->

     <li> <!-- MAIN MENU ITEM #3 -->
        <a href="/Guild.aspx?GuildID=298755&TabID=2504278">Forums</a>
     </li> <!-- END MAIN MENU ITEM #3 --> 

     <li> <!-- MAIN MENU ITEM #4 -->
        <a href="/Guild.aspx?GuildID=298755&TabID=2504278">Video/Stream</a>

        <ul> <!-- SUB MENU -->

            <li> <!-- SUB MENU ITEM #1 -->
                <a hrefhttp://www.youtube.com/channel/UCMeMgxo7Nhw_16eFNXm9R1A">Youtube</a>
            </li>

            <li> <!-- SUB MENU ITEM #2 -->
                <a hrefhttp://www.twitch.tv/Tinkrbelle">Twitch.tv</a>
            </li>

    </li>  <!-- END MAIN MENU ITEM #4 -->


Not sure what I'm doing wrong. I'll keep messing around with it. Thanks a bunch!

TopBottom

Mottie (SuperAdmin) 9/6/2012 11:07 AM EST : RE: Multilevel Dynamic Menu
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Everything within the mod customization code can stay inside that window. There is no need to copy anything to the custom css area or put HTML any where else. Just remember, if you ever update a mod, everything in the customization code window will get replaced, so save a copy of it somewhere.

If you do have more css to add to the custom css area, most likely it is always added to the additions to standard tab, you can just add it to the end without messing up the stuff that is already in there.

It's usually a good idea to create a test site so you can play around and mess with things and not effect your guild users. If you look at the home page of this site, you'll see that I have a few test sites that I've set up for messing around. You can also add a testing tab on your current site for testing mods, just set it's access level to super admin and it won't bother any one else.

So far the tabs you have set up look okay, but you'd have to actually put it into use to make sure
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Tinkrbelle (Applicant) 9/7/2012 7:50 PM EST : RE: Multilevel Dynamic Menu

Tinkrbelle
Posts: 66

0
Like

0
Dislike

Thanks a bunch! I do have a tab only admins can see haha. My friend and I got it to work for the most part. So we made a Video tab and the drop down options are Youtube and Twitch.tv. My first question is how do we make youtube and twitch.tv open in new window or tab rather and the other problem is for some reason youtube won't open. Any suggestions?
TopBottom

Mottie (SuperAdmin) 9/7/2012 8:49 PM EST : RE: Multilevel Dynamic Menu
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

The YouTube and Twitch.tv links are messed up... I see this above:

<a hrefhttp://www.twitch.tv/Tinkrbelle">Twitch.tv</a> 

it should look like this, and I included a target="_blank" to make the link open a new tab/window

<a target="_blank" href="http://www.twitch.tv/Tinkrbelle">Twitch.tv</a> 
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Tinkrbelle (Applicant) 9/7/2012 9:23 PM EST : RE: Multilevel Dynamic Menu

Tinkrbelle
Posts: 66

0
Like

0
Dislike

As always sir you are amazing. Thank you.
TopBottom

shadith4 (Applicant) 10/17/2012 4:58 PM EST : RE: Multilevel Dynamic Menu

shadith4
Posts: 197

0
Like

0
Dislike

It looks like my Dynamic bar is trying to go underneath my drop shadows and I cant figure out how to force it to the front.

http://www.1shotordc.guildportal.com
TopBottom

Mottie (SuperAdmin) 10/18/2012 3:17 AM EST : RE: Multilevel Dynamic Menu
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

Hi shadith4!

Try adding this css (Control Panel > Custom HTML & Script > Custom CSS > CSS Additions to Standard)
.floatingNav { background: #000; }
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%