Resource icon

Modern off canvas menu system 1

No permission to download

ibaker

Enthusiast
Joined
Feb 7, 2015
Messages
191
ibaker submitted a new resource:

Modern off canvas menu system - This is a modern off canvas menu system that is more practical for users and very mobile friendly

This completely new, different, modern and very much mobile friendly menu and navigation system has been running on my own site for nearly a year now and the 10,000+ users absolutely love it.

I am releasing it here in the interest that others may like to enhance it and post there enhancement here for the benefit of everyone however, any part of it, it's concept or its code can not be used in a commercial product without first obtaining my approval...I own the code and its concept.
  • ...

Read more about this resource...
 

OUTL4W

<style>OUTL4W GFX</style> :p
Joined
Jul 22, 2012
Messages
531
very nice....testing it on a skin not publicly available. But would be great if this was an option to just show ONLY on mobile and normal layout on desktop..
 

diadi

Enthusiast
Joined
Oct 17, 2014
Messages
134
Nice menu system/resource. It is much appreciated.

I managed to get everything working except the navigation_admin/navigation_user (I tried naming the template both of those without any luck). Had quite a bit of trouble with my color layout and the side bar though....might work better if the menu icon at the top worked on the same color scheme as the sidebar below it.) Nothing showing up for admin privileges.

Perhaps if I used a different conditional statement for the user group I'd have some luck? Maybe:
Code:
<xen:if is="!{xen:helper ismemberof, $visitor, x, y}">
instead of
Code:
<xen:if is="{$visitor.is_admin}">
? :suspect:
 

ibaker

Enthusiast
Joined
Feb 7, 2015
Messages
191
Nice menu system/resource. It is much appreciated.

I managed to get everything working except the navigation_admin/navigation_user (I tried naming the template both of those without any luck). Had quite a bit of trouble with my color layout and the side bar though....might work better if the menu icon at the top worked on the same color scheme as the sidebar below it.) Nothing showing up for admin privileges.

Perhaps if I used a different conditional statement for the user group I'd have some luck? Maybe:
Code:
<xen:if is="!{xen:helper ismemberof, $visitor, x, y}">
instead of
Code:
<xen:if is="{$visitor.is_admin}">
? :suspect:
I found that if the new template navigation_admin template is created after the navigation_visitor_tab template is changed the admin menu item doesn't show. Try opening the navigation_visitor_tab template and just saving it again so the template registers the new navigation_admin template which is called at the bottom of it.

The only other thing I can think of is something to do with the way your admin and moderator is set up.

Hope this helps
 

ibaker

Enthusiast
Joined
Feb 7, 2015
Messages
191
If anyone does implement this menu system, please let me know a link to your site so I can see how it looks...it would be very much appreciated...I would like to see it get used especially any comments your users may make about it...thanks
 

diadi

Enthusiast
Joined
Oct 17, 2014
Messages
134
I found that if the new template navigation_admin template is created after the navigation_visitor_tab template is changed the admin menu item doesn't show. Try opening the navigation_visitor_tab template and just saving it again so the template registers the new navigation_admin template which is called at the bottom of it.

The only other thing I can think of is something to do with the way your admin and moderator is set up.

Hope this helps
I found where I screwed up.

I named the new template navigation_menu:
d) navigation_admin
NOTE: This is a new template that you will need to create...note the name of the template must be navigation_menu

Had to revert the navigation_visitor_tab, delete the incorrect navigation_menu and then add the changes and template again as simply renaming the template wasn't doing it.

I've made this an available theme on my forum so you can take a look. It needs a few modification before I tell the users about it though.

The "Competitions" text (and its sub menu links) is wrapping and I would like the "New" link in the Forum sub-menu to have some type of alert showing the number of new posts/change color when there is new content or just not show up when there is no new content.
 

diadi

Enthusiast
Joined
Oct 17, 2014
Messages
134
Looks good Diadi, like the icon choice in the main menu

Added an unread post count to the "New" link (and changed the link to a FA icon). I have no idea how this is done in the normal XF templates. Couldn't figure out how they did it from looking at the navigation templates so I just mixed-matched the code from the unread_post_count template and this resources code and added it to the navigation_visitor_tab just above the FOOTER LINKS comment towards the bottom:

Code:
   <li class="navTab alerts Popup PopupControl PopupClosed">
     <xen:if is="{$visitor.user_id}">
       <a href="{xen:link find-new/posts}" class="Tooltip" data-offsetY="-6" data-offsetX="0" title="What's New"><span class="whats_new"></span><i class="fa fa-comment"></i></a>
         <xen:set var="$unread">
         <xen:callback class="UnreadPostCount_Callback" method="getUnreadCount" /></xen:set> 
           <strong class="itemCount {xen:if {$unread}, '', 'Zero'}"
           id="AlertsMenu_Counter" data-text="{xen:phrase you_have_x_new_alerts}">
             <span class="Total">{xen:number $unread}</span>
      </strong>
       </xen:if>
   </li>

This looks pretty good on a PC but looks like a bag of *ss on mobile screens (the number of messages shows up below FA icon). I believe I'll have to give the alert it's own CSS styling in the navigation.css template.

Screenshot (402).png
 
Last edited:

Ummagumma

Adherent
Joined
Feb 27, 2015
Messages
488
This looks fantastic! 95% of my users are on mobile and I am struggling to find a way to help them.
This will help a peach, I will test it and try it and let you know of course.
What findings I have I will PM you if that's okay?
Wow, thank you for the share and idea. Will get going shortly, thank you! Much appreciated and love it when I tested it on your site. Very sleek, very classy.
 

Sim

Fan
Joined
Aug 17, 2014
Messages
705
It says I don't have permission to view the screen shots for some reason.=(
 

Ummagumma

Adherent
Joined
Feb 27, 2015
Messages
488
Slowly getting there, only issue so far is the header image (logo) is stuck at the bottom of the page. Am sure will sort that though. :)
 

Ummagumma

Adherent
Joined
Feb 27, 2015
Messages
488
Sorry to trouble you ibaker this menu is amazing, I really am grateful for you sharing this.
I use something called extended moderation, which is an addon that adds a custom link within the floating navbar. It offers seriously enhanced moderator tools.
Obviously I am thinking I can use a conditional for the link, or, can I add it into the admin tab? If so should it go into the moderator block which is also used for moderation? Only thing that I am a tad unsure of now.

Again sorry to trouble you about this.
Many thanks and will PM you my site shortly. :)
 
Top