Jump to content






Photo
* * * * * 10 votes

IP.Content 2.3 Dev Update: Navigation Bar

Posted by bfarber , in IP.Content 29 December 2011 · 11,803 views

We hope that everyone is enjoying reading about the upcoming changes you will see in IP.Content 2.3. As we outlined originally, our focus is on four primary goals: usability, consistency, SEO and strengthening our existing feature set. One common usability issue our clients have pointed out is that after they create a page, there is not an easy way to link to the page in the primary navigation bar. While you can certainly edit the skin to accomplish this (and indeed, this is what most clients ultimately do), we have decided to build into IP.Content 2.3 a more robust and easier to use solution.


Our new primary navigation menu manager

Beginning with IP.Content 2.3, there will be a new link under the IP.Content 'Settings' module labeled "Navigation Menu". In order to use this new feature, a hook (provided in the IP.Content download and installed automatically for you) must be enabled - if it is not, the page will show you an error message indicating that the hook must first be enabled before you can utilize the navigation menu manager. Otherwise, you will be presented with a list of the applications installed in their current positioned order (which determines the tab order on the front end).

You can edit these applications from here to perform the following functions:
  • Change the tab 'title' (the text that shows when you mouse over the tab)
  • Change the application's public title (be aware that third party language packs can override this)
  • Toggle whether the tab is hidden or not
  • Change the tab permissions (who has access to see the tab)
  • Add custom attributes to the anchor tag that is drawn. This is a feature unique to IP.Content, allowing you to add custom onclick handlers, rel attributes, and other similar attributes to your tabs if you have a need.
In addition to being able to manage your existing applications, you can add custom tabs to your navigation bar from this page. Your custom tabs can be normal tabs that link to a page, or a dropdown menu (and you can choose whether to activate the dropdown menu when clicked, or when moused over). If you choose to make the tab a dropdown menu, you will be presented with an area to provide the links to display in this dropdown menu. As with applications, you can define the text to display on the tab, the 'title' or mouseover text, which groups can see the tab, and custom attributes to append to the HTML anchor tag. Additionally, you will need to supply the URL as well.

You can reorder your tabs in any order you like, putting them before, after, or intermingled with your regular application tabs. A handy preview window at the top of the screen allows you to quickly and easily see what the end result will look like, without having to visit the community front end and refresh the page. This preview is shown inside an iframe and is updated automatically whenever you reorder your tabs.

Tabs will automatically highlight when you are viewing that page, and disable associated application tabs from highlighting, if appropriate. For instance, if you link to an IP.Content page, the 'Pages' tab will no longer highlight, since a more appropriate tab has been lit up. Database strings are ignored, so any category or record you view on that page will still cause the tab to light up. Additionally, if you view a page that is linked to within a submenu, the submenu tab will light up.

Here are a few screenshots to give you an idea of the interface

Here is the overview screen, showing the tab bar preview, list of applications, and list of custom tabs you may have added.

Posted Image

Editing an application allows you to manage tab and link related details

Posted Image

Adding a custom tab allows you to create a submenu if you wish to, with an unlimited number of links in it

Posted Image

New tab bar on the front end, complete with custom tabs and a dropdown menu

Posted Image


Wrapping up

And no, that's not a pun based on the fact that Christmas just passed. :wink: It's a natural action for a new client to add a page and proceed to want to place a tab link to that new page on the front end, only to find that this requires navigating to the template manager and jumping into the HTML code to accomplish. This new module in IP.Content should make it much easier for new users and advanced users alike to quickly add navigational tabs to their custom pages (or any link they want!) in IP.Content. We will be monitoring feedback on this new module to look for ways to improve it in future releases, so please share your thoughts in the IP.Content feedback forum. And we look forward to your comments on this new feature below!

  • tenaki, The Old Man, NickČ and 23 others like this



Looks nice, can't wait!

Wow, lots of comments to catch up on.Custom tabs - not at this time (although editing the skin in a creative fashion could accomplish this).Default application tabs - the language pack title is still supported (and a note on the application edit form is shown so users are aware of this). Yes, you can create unlimited tabs/submenus. It is identical styling to the user submenu at the top of the page...Posted Image Icons will not be supported in this release. We will gauge the feedback to determine ways to improve it moving forward in future releases. I'm afraid I'm really not clear on what you are asking. Hopefully the following clarifications answer your questions.

  • This is not a general use menu module. It is purposed SOLEY to manage the primary navigation bar as generated by your IP.Board skin_global -> globalTemplate wrapper
  • If you use the IP.Board wrapper for IP.Content, it will work on your external site as well.
  • Every application installed will be drawn, first party or third party (I do not have third party applications installed locally, so of course none are shown).
  • You could hide the 'Gallery' application tab, and add a custom Gallery tab with a submenu. This is entirely possible of course.
If I didn't answer your question, I apologize (I'm not sure what you were getting at exactly).


Sorry I wasn't clear. Based on your post, I guess I was confused and wondered if this navigation feature only worked for ipcontent portions. I think you answered that confusion for me. Here are my ongoing questions then, ....

1. If people don't purchase IP Content, will this navigation feature be available to use on the rest of the ipboard?

2. If people do purchase IP content and use it to run the main part of the website, will the navigation feature have the ability to essentially offer two separate navigation menus, one for ip content, and one for ipboard? Or is this navigation feature part and parcel of the ipwrapper? What I want is a separate primary navigation for our ip content and a separate primary navigation for our ipboard. Based on your answer, I am guessing no.

Thanks,

Brian
Really pleased with this submenu stuff and the tab re-ordering ability. Excellent & just what I need
will you be able to have 2 columns for sub menus?
    • carballoto likes this
Excellent thanks
YES! IT'S HERE. :)
Photo
Dreamlander
Dec 30 2011 09:13 AM
Finally we have a navigation bar menu fully customisable.

Thank you!
(Regarding the menu styling - I am happy to revisit it to see what we can do. What you are seeing are VERY early screenshots. While the functionality is finished, Rikki has not reviewed any of the styling, etc.)

Sorry I wasn't clear. Based on your post, I guess I was confused and wondered if this navigation feature only worked for ipcontent portions. I think you answered that confusion for me. Here are my ongoing questions then, ....

1. If people don't purchase IP Content, will this navigation feature be available to use on the rest of the ipboard?

2. If people do purchase IP content and use it to run the main part of the website, will the navigation feature have the ability to essentially offer two separate navigation menus, one for ip content, and one for ipboard? Or is this navigation feature part and parcel of the ipwrapper? What I want is a separate primary navigation for our ip content and a separate primary navigation for our ipboard. Based on your answer, I am guessing no.

Thanks,

Brian


1) This is a feature in IP.Content, not IP.Board. If you do not own IP.Content, you would not have this feature, no.

2) If I understand what you are asking correctly, then you are correct in that the answer would be 'no'. Behind the scenes, IP.Content is providing a hook that overwrites the skin_global -> globalTemplate primary navigation area (using some regular expressions and such - but those details aren't too important). Thus, this ONLY applies to the global wrapper. If you use a separate wrapper for IP.Content pages, the hook would never execute and take over. Then again, if you are using a separate wrapper for your IP.Content pages, you already have complete control of the page layout and styling and HTML, so I don't see any specific need for a menu module like this. Surely you would simply include the specific tabs that you want in that case when you code the HTML navigation bar.

will you be able to have 2 columns for sub menus?


Submenus list in a single column at present, though this is changeable by editing the CSS alone (you'd just mimick the styles applied to the user dropdown submenu I copied in my previous screenshot, which is what the submenu tab styling is already based on).
    • mynsc likes this

Behind the scenes, IP.Content is providing a hook that overwrites the skin_global -> globalTemplate primary navigation area (using some regular expressions and such - but those details aren't too important).


This has me concerned. How exactly are you looking for the start and end of the HTML code to determine what you have to replace? I really hope you're not looking for specific HTML tags, because third party skins may design this section using different HTML elements than the stock IP.Board skin. I've encountered this problem with the hooks system trying to replace specific content on the page, there is no definitive point you can look at in the generated HTML to determine the end of the hook point.
    • Robert Simons and Marcher Technologies like this
Photo
The Old Man
Jan 02 2012 07:07 AM
Well done for finally adding a menu creator to IP.Content and allowing us to link to Pages and add custom menu links!
I could kiss you!
Fantastic news!

Tab ordering, sortable items, multiple tabs, live preview window, love it all. Styling can be improved but for a development preview this looks great. This should address a major concern for new IPC users in getting the most out of IPC.

Curious to see how sub-menu items are organized and viewed in the ACP. The "submenu test" example (with the links to Google, Bing, etc) only shows the parent menu item in ACP screenshot. Would be nice to be able to expand/collapse sub-menus in the ACP, without having to click on the Parent item and click Edit pencil icon (and thus open in a new page).
Erm, it's really good. But not available in IP.Board without IP.Content is bad news.
Great!
2.3 is shaping up to be an amazing release!

This has me concerned. How exactly are you looking for the start and end of the HTML code to determine what you have to replace? I really hope you're not looking for specific HTML tags, because third party skins may design this section using different HTML elements than the stock IP.Board skin. I've encountered this problem with the hooks system trying to replace specific content on the page, there is no definitive point you can look at in the generated HTML to determine the end of the hook point.


It looks for the hook points - so long as the custom skins do not delete the hooks points (which they generally shouldn't, since other hooks may rely on the same hook points) there should be no problem. The tab HTML itself can be defined in each skin individually (it's a separate skin template) to allow skinners to still control the end output that is produced.

Curious to see how sub-menu items are organized and viewed in the ACP. The "submenu test" example (with the links to Google, Bing, etc) only shows the parent menu item in ACP screenshot. Would be nice to be able to expand/collapse sub-menus in the ACP, without having to click on the Parent item and click Edit pencil icon (and thus open in a new page).


Submenus are edited by clicking edit on the parent menu item - they are then listed in a grid at the bottom of the form. This is possible because we only allow one level of submenus at this time (so we don't have to worry about recursiveness).
Any expected release date?
I was planning rearranging the menus on my site but now I better wait...

Any expected release date?I was planning rearranging the menus on my site but now I better wait...


http://community.inv...what-to-expect/

We are targeting spring of 2012 for a release

Not being able to change the navigation bar without code edits has been THE most frustrating part of using IPB for me. Can't wait for 2.3! :D

Not being able to change the navigation bar without code edits has been THE most frustrating part of using IPB for me. Can't wait for 2.3! :D

a g r e e d !
Thanks IPS!
Wow, thank you! Its about time you guys did something like this. I cant wait for 2.3. :D

July 2014

S M T W T F S
  12345
6789101112
13141516171819
202122 23 242526
2728293031  

Recent Entries

Latest Visitors

  • Photo
    Velvet Elvis
    22 minutes ago
  • Photo
    Azi
    45 minutes ago
  • Photo
    miguslaw
    52 minutes ago
  • Photo
    Ibai
    Today, 11:21 AM
  • Photo
    slushpuppy
    Today, 11:15 AM
  • Photo
    DrinkSmokeGolf
    Today, 11:07 AM
  • Photo
    raincat
    Today, 10:56 AM
  • Photo
    scott wood
    Today, 10:55 AM
  • Photo
    Keviee
    Today, 10:46 AM
  • Photo
    tom staggard
    Today, 10:22 AM

Recent Comments

Search My Blog