HomeMottie's Help SiteResourcesSupport Tickets
Sign Up! • Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Voodoo Tech and Scripter's Den of Scriptniquity > Multilevel Dynamic Menu
Mottie (MVP) 12/26/2011 8:42 PM EST : Multilevel Dynamic Menu link
GuildPortal MVP
Mottie
Posts: 3873
Zomgawsh Poster
Multilevel Dynamic Menu

This mod named "Multilevel Dynamic Menu" (not yet approved) 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 Customization Code there are three customizable sections:

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.
>>help-site<<
Top • Bottom

Valdaglerion (Guild Admin) 12/27/2011 3:13 AM EST : RE: Multilevel Dynamic Menu link
Valdaglerion
Posts: 2473
Zomgawsh Poster
I'm looking for something similar to this, except instead of drop down menus, I'd like drop down descriptions exactly like the menu on the main GuildPortal page.



In that image, the "create a new guild website" is what I'm referring to.

Top • Bottom

Mottie (MVP) 12/27/2011 10:32 AM EST : RE: Multilevel Dynamic Menu link
GuildPortal MVP
Mottie
Posts: 3873
Zomgawsh Poster
Hey Val!

The menu system on the GP home page is just way too complicated to use, so I think the easiest solution would be to just add tooltips to the existing dynamic images menu. Check out this post.
>>help-site<<
Top • Bottom

Gekko (New Admin) 12/30/2011 1:44 PM EST : RE: Multilevel Dynamic Menu link
Gekko
Posts: 841
Zomgawsh Poster
Hi I really like the way this looks but please forgive me for the Noobie questions.  I'm not sure how to make this change on my site.

I selected the Mod from the install list on the Control Panel and it shows "installed".  I also see a the "code".  I'm not sure what I do with that.  I "think" it was already installed when I selected the mod to install.  

I'm not sure exactly how to change my site Nav now.  I looked in the settings for Navigation but I don't see a new option. Any (simple) explainations would be helpful.

What I want to do:
On my site I have 3 special pages: LOTRO/SWTOR/ATITD.  If I could collapse those into one drop down list that would be excellent.

Something like:

top nav button:      Games
                                   LOTRO
                                   SWTOR
                                   ATITD
        

Gekko/Sabriel
leliondormant.net


Update 1:  OH the site changed to the new drop downs (must have been delayed) but now I need to rename things.... not sure where to go for that.  yikes!

Update 2:  I think I've tanked my site... everything now points to Motties site - OUCH.  I can't find the URLs for my own pages.  I don't know where to click on the page names in the CP.  (panic setting in now)

Update 3: I got it! WOOTS!  For other noobs here's what I did. 

1. Disable the Mod if you installed it and it has "hijacked your site to Motties"<G>  Then go to your site (which should be as it was) and get the URLs for each page on your nav bar by clicking the tab and copying the URL for the page that appears.  There will be your Guild ID + a code for the page.  I had 13 pages on my default nav bar - so 13 URLs.

2.  Reenable the mod and copy all the stuff in the "code" section to something like Notepad.  Now disable the mod again.  [this is so you dont break your site while working on it.]

3. Modify the URL section in the code you copy to match your current site layout.  He has 3 types of "sections".  You want the the section that starts with : <ul class="sf-menu"> <!-- MAIN MENU -->

In that section there are 3 sample of menus.  1 layer (no drop down) , 2 layer drop down and 3 layer drop down.   Move stuff around so that it matches the way you want your nav bar to look.   I only needed a lot of 1 layers and only one 2-layer drop down.

Plug in your guild ID number and page number in the urls replacing Motties site codes with yours.

4.  Reenable the mod and copy your changes replacing Motties samples with yours between the sections

<ul class="sf-menu"> <!-- MAIN MENU -->

        (your stuff)

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

5. Save the changes (button on the botton of the mod page)

Check your results.  You can adjust the width of the top tabs and width of the drop down tabs with the code at the top of the script.

        min-width: 100px; /* set the minimum width of your tabs here */
        minWidth   : 12, // minimum width of sub-menus in em units

Looks FANTASTIC when done.  THANK YOU MOTTIE!!










     

     
Top • Bottom

Mottie (MVP) 12/30/2011 3:44 PM EST : RE: Multilevel Dynamic Menu link
GuildPortal MVP
Mottie
Posts: 3873
Zomgawsh Poster
YAY!

I'm glad you got it working, sorry for the lack of specific instructions, I'll try to add those soon. Thanks for spelling out what you did step-by-step!
>>help-site<<
Top • Bottom

BlackrockTekki (New Admin) 1/21/2012 5:59 PM EST : RE: Multilevel Dynamic Menu link

BlackrockTekki
Posts: 576
Zomgawsh Poster
Hi Mottie, I recently started using the Multiple Dynamic Menu mod and it does what I want it to do, however it has caused all sorts of formatting issues with my site when it is opened up in Mozilla Firefox, when it is opened up in Google Chrome for example, everything is perfectly centered :/




EDIT:  Fixed the above problem by editing the Style code to:

<style>
 
.sf-menu{
    text-align:center;
    position: absolute;
    background-color:#1B1B1B;
}
.sf-menu li {
    display:inline-block;
    margin:0 -2px;
}
 
.sf-menu li {
    min-width: 165px; /* 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: 5px 0 8px 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);
}
</style>


The Red text fixed the problem, I think it was the position: absolute
Top • Bottom

Vagenda2 (New Admin) 11/28/2012 3:28 AM EST : RE: Multilevel Dynamic Menu link
Vagenda2
Posts: 29
Becoming Adept!
Is there any way to modify the existing navbar to add mouseover and mouse left-click event sounds?
Top • Bottom

Mottie (MVP) 11/29/2012 9:14 AM EST : RE: Multilevel Dynamic Menu link
GuildPortal MVP
Mottie
Posts: 3873
Zomgawsh Poster
Hi Vagenda2!

You can using HTML5 audio, which will only work in modern browsers. But I wouldn't recommend doing it unless you give your users a mute button and/or volume control; because if these things weren't available, people can get very aggravated, and some of them out there might know where you live.
>>help-site<<
Top • Bottom

AoN Webmaster (New Admin) 4/2/2013 11:16 AM EST : RE: Multilevel Dynamic Menu link
AoN Webmaster
Posts: 101
Posts With Wolves
Well, I've got it to work - however, if I click to a different page (since I've got quite a few)... it shows me the non-pretty nav bar. What's it doing???

allianceofnations.torportal.com/
Top • Bottom

Mottie (MVP) 4/3/2013 10:47 AM EST : RE: Multilevel Dynamic Menu link
GuildPortal MVP
Mottie
Posts: 3873
Zomgawsh Poster
Hi AoN Webmaster!

It looks like it's working to me. Is there a specific page that you're having trouble with?
>>help-site<<
Top • Bottom

Admins Online
There are   members online.
GuildPortal Home • Frequently Asked Questions • Videos • Recent Updates • Support • Terms of Use • Privacy Policy
GuildPortal™ Axiom Shift, LLC.  All Rights Reserved. All game-related trademarks are properties of their respective owners. Several adorable monkeys were harmed during the creation of this site, and for that, we are wholly unapologetic.
So-and-so has logged on!
%title%
%message%