[TH] Navigation Manager [Deleted]

also, a quick question -- can you have a drop-down menu in one of the child links, or does this work only with the top-level parent?
 
mike -- is there a work-around for this issue --

when you make the page narrower and the JS hides some of the sub-menu listings, it removes the ones from the far-left and keeps the ones further right visible (this doesn't makes sense from a UI perspective, since the most important links are to the left; It also doesn't happen with the tabs -- when they get hidden, it is from right-to-left as you'd expect. )

So full width:

Screenshot from 2016-06-03 11-28-39.webp

after page is narrowed (notice "New Posts" and "Search Forums" disappeared...)

Screenshot from 2016-06-03 11-29-44.webp

thanks!
 
mike -- is there a work-around for this issue --

when you make the page narrower and the JS hides some of the sub-menu listings, it removes the ones from the far-left and keeps the ones further right visible (this doesn't makes sense from a UI perspective, since the most important links are to the left; It also doesn't happen with the tabs -- when they get hidden, it is from right-to-left as you'd expect. )

So full width:

View attachment 135405

after page is narrowed (notice "New Posts" and "Search Forums" disappeared...)

View attachment 135406

thanks!

I'll answer my own question, in case anyone comes looking. Here is the solution, it re-implements a JS function in XF:

https://xenforo.com/community/threads/reverse-navlinks-in-xenforo-js.98597
 
Here's a screenshot of what it would look like if all I did was check the 'Mega Menu' option on the forums navigation tab. Obviously to take full advantage of the mega menu you'll need to do some customizations, by itsself it's not all that useful, but you can do a lot with it

Screen Shot 2016-07-11 at 1.11.15 PM.webp
 
Is there an example of this add-on with a megamenu running anywhere? would love to see it for inspiration...

i agree, without an example to work off of, i've had no luck creating a mega menu at all :(

so i was able to come up with a very basic mega menu with some horizontal links, which is better than the huge list of vertical links i had before. it's not much, but here's a website i thought was pretty useful:

https://code.tutsplus.com/tutorials/how-to-build-a-kick-butt-css3-mega-drop-down-menu--net-15129

and my html in this addon:

HTML:
<ul id="menu">
        <div class="dropdown_5columns">
            <div class="col_1">
            <a href="alternative-housing/?prefix_id=13">Alternative Housing</a>

            <a href="art-music/?prefix_id=13"><p>Art & Music</p></a>

            <a href="bike-touring/?prefix_id=13"><p>Bike Touring</p></a>

            <a href="boat-punk-sailing/?prefix_id=13"><p>Boat Punk / Sailing</p></a>

            <a href="search/2277756/?q=%2A%2A%2A%2A&t=post&o=date&c[node]=84&c[prefix]=7+35"><p>Crust Surfing</p></a>
            </div>
       </div>
        <div class="dropdown_5columns">
            <div class="col_1">
            <a href="search/2097885/?q=%2A%2A%2A%2A&t=post&o=date&c[node]=32+200+196+190+198+199+191+192+193+194+195&c[prefix]=13"><p>Destinations</p></a>

            <a href="search/2214555/?q=%2A%2A%2A%2A&t=post&o=date&c[node]=217+216+56+51+57+53+54+58+59+55&c[prefix]=13"><p>Equipment & Gear</p></a>

            <a href="events-gatherings-festivals/"><p>Events & Festivals</p></a>

            <a href="furry-nomads/?prefix_id=13"><p>Furry Nomads</p></a>

            <a href="hitchhiking/?prefix_id=13"><p>Hitchhiking</p></a>
            </div>
       </div>
        <div class="dropdown_5columns">
            <div class="col_1">

            <a href="hobo-kitchen/?prefix_id=13"><p>Hobo Kitchen, The</p></a>

            <a href="making-living/?prefix_id=13"><p>Making a Living</p></a>

            <a href="other-travel/?prefix_id=13"><p>Other Forms of Travel</p></a>

            <a href="politics-anarchism/?prefix_id=13"><p>Politics & Anarchism</p></a>

            <a href="sex-relationships/?prefix_id=13"><p>Sex & Relationships</p></a>

            </div>
       </div>
        <div class="dropdown_5columns">
            <div class="col_1">
            <a href="squatting/?prefix_id=13"><p>Squatting</p></a>

            <a href="staying-healthy/?prefix_id=13"><p>Staying Healthy</p></a>

            <a href="train-hopping/?prefix_id=13" rel=”nofollow”><p>Train Hopping</p></a>

            <a href="urban-exploration/?prefix_id=13"><p>Urban Exploration</p></a>

            <a href="van-dwelling/?prefix_id=13"><p>Van Dwelling</p></a>
            </div>
       </div>
        <div class="dropdown_5columns">
            <div class="col_1">
            <a href="wilderness-survival/?prefix_id=13"><p>Wilderness Survival</p></a>
            </div>
       </div>
</ul>

and my css in extra.css (a lot isn't being used, but it's there if you want to expand using the instructions linked above):

HTML:
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 1100px;}

.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
    display:inline;
    float: left;
    position: relative;
}

.blockLinksList a, .blockLinksList label {
    color: rgb(189, 189, 189);
    padding: 3px 12px;
    display: block;
    outline: 0 none;
    font-weight: 600;
}

.col_1 {width:200px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}

finally, you can see an example on my website (it's the 'resources' menu).
 
so i was able to come up with a very basic mega menu with some horizontal links, which is better than the huge list of vertical links i had before. it's not much, but here's a website i thought was pretty useful:

https://code.tutsplus.com/tutorials/how-to-build-a-kick-butt-css3-mega-drop-down-menu--net-15129

and my html in this addon:

HTML:
<ul id="menu">
        <div class="dropdown_5columns">
            <div class="col_1">
            <a href="alternative-housing/?prefix_id=13">Alternative Housing</a>

            <a href="art-music/?prefix_id=13"><p>Art & Music</p></a>

            <a href="bike-touring/?prefix_id=13"><p>Bike Touring</p></a>

            <a href="boat-punk-sailing/?prefix_id=13"><p>Boat Punk / Sailing</p></a>

            <a href="search/2277756/?q=%2A%2A%2A%2A&t=post&o=date&c[node]=84&c[prefix]=7+35"><p>Crust Surfing</p></a>
            </div>
       </div>
        <div class="dropdown_5columns">
            <div class="col_1">
            <a href="search/2097885/?q=%2A%2A%2A%2A&t=post&o=date&c[node]=32+200+196+190+198+199+191+192+193+194+195&c[prefix]=13"><p>Destinations</p></a>

            <a href="search/2214555/?q=%2A%2A%2A%2A&t=post&o=date&c[node]=217+216+56+51+57+53+54+58+59+55&c[prefix]=13"><p>Equipment & Gear</p></a>

            <a href="events-gatherings-festivals/"><p>Events & Festivals</p></a>

            <a href="furry-nomads/?prefix_id=13"><p>Furry Nomads</p></a>

            <a href="hitchhiking/?prefix_id=13"><p>Hitchhiking</p></a>
            </div>
       </div>
        <div class="dropdown_5columns">
            <div class="col_1">

            <a href="hobo-kitchen/?prefix_id=13"><p>Hobo Kitchen, The</p></a>

            <a href="making-living/?prefix_id=13"><p>Making a Living</p></a>

            <a href="other-travel/?prefix_id=13"><p>Other Forms of Travel</p></a>

            <a href="politics-anarchism/?prefix_id=13"><p>Politics & Anarchism</p></a>

            <a href="sex-relationships/?prefix_id=13"><p>Sex & Relationships</p></a>

            </div>
       </div>
        <div class="dropdown_5columns">
            <div class="col_1">
            <a href="squatting/?prefix_id=13"><p>Squatting</p></a>

            <a href="staying-healthy/?prefix_id=13"><p>Staying Healthy</p></a>

            <a href="train-hopping/?prefix_id=13" rel=”nofollow”><p>Train Hopping</p></a>

            <a href="urban-exploration/?prefix_id=13"><p>Urban Exploration</p></a>

            <a href="van-dwelling/?prefix_id=13"><p>Van Dwelling</p></a>
            </div>
       </div>
        <div class="dropdown_5columns">
            <div class="col_1">
            <a href="wilderness-survival/?prefix_id=13"><p>Wilderness Survival</p></a>
            </div>
       </div>
</ul>

and my css in extra.css (a lot isn't being used, but it's there if you want to expand using the instructions linked above):

HTML:
.dropdown_1column {width: 140px;}
.dropdown_2columns {width: 280px;}
.dropdown_3columns {width: 420px;}
.dropdown_4columns {width: 560px;}
.dropdown_5columns {width: 1100px;}

.col_1,
.col_2,
.col_3,
.col_4,
.col_5 {
    display:inline;
    float: left;
    position: relative;
}

.blockLinksList a, .blockLinksList label {
    color: rgb(189, 189, 189);
    padding: 3px 12px;
    display: block;
    outline: 0 none;
    font-weight: 600;
}

.col_1 {width:200px;}
.col_2 {width:270px;}
.col_3 {width:410px;}
.col_4 {width:550px;}
.col_5 {width:690px;}

finally, you can see an example on my website (it's the 'resources' menu).

Very cool menu on your site (resources)
Do you use any add-on for this? or do you have the instructions to apply this to my site?
Thanks
 
Strongly considering this as it seems this is the only add-on out there that supports Mega Menus via direct HTML..
 
I have added some links but they are not highlighted when the page is selected, how to fix this?
For what you want, you should use nodes as tabs https://xenforo.com/community/resources/nodes-as-tabs.9/
Just purchased this and found out it doesn't highlight/show as selected.. would you consider adding this feature?

It's a showstopper if the navtabs won't highlight/show as selected (via li.navTab.forums.selected CSS classes) especiallly if we want to remove the XF stock Forums/Member tabs and replace them with our own.

I don't know how @Jake Bunce achieved it in his Nodes as Tabs add-on, but if you could achieve similar that would really nail this add-on IMO.

Even if it's just a dirtyURL XF conditional (I'm sure there's probably a much cleaner way)
Code:
<xen:if is="{$requestPaths.requestUri} == '/community/'">Link name</xen:if>
 
I think this is the best addon for navigation menu's but some of the features are not good enough at the moment.

Few suggestions (Hopefully easy to implement for ui.x):
Title should allow html, or at least allow title to be blank. Some areas like right side of userbar can use icon due to one of your theme, Corp, using icons. And probably a separate option to remove the drop down arrow. Some portions like below, can use a title sometimes without the dropdown arrow.
upload_2017-5-31_18-56-42.webp


Also on the left side of userbar, when in mobile dimensions, the navigation menu disappears.
upload_2017-5-31_18-58-24.webp

Would be nice if it would go under the gear icon, like it does for the rest:
upload_2017-5-31_18-58-49.webp


Plugin is still great for normal navigation menu area though at the top.

Nvm, it seems like template placers don't work either. Any chance this can get supported? The reason I bought this was due to the html functionality, and I thought the {} would work too.
Code:
<li><a href="{xen:link find-new/posts, '', 'recent=1'}" rel="nofollow">{xen:phrase recent_posts}</a></li>
 
Last edited:
Top Bottom