Jump to content

Cre8asiteforums Internet Marketing
and Conversion Web Design


Photo

Navigation: Tabs As Secondary Menus (how To?)


  • Please log in to reply
13 replies to this topic

#1 Zylek

Zylek

    Whirl Wind Member

  • Members
  • 61 posts

Posted 29 April 2011 - 10:45 AM

I am currently building a website that requires a highly organized structure for ease of navigation. In the past I created a website that used one primary menu, though the menu became extremely bloated with too many internal links and resulted in a form of navigation that felt "crammed" within the one menu.

One of the fundamental components to the new site is the implementation of menus in a way that is a vast improvement from that previous approach. However, I'm having difficulty figuring out a potentially ideal new approach that would allow for easier navigation.

I'm using Drupal 7 and a "Bartik Plus" theme that is the Bartik theme with the Superfish drop-down menu. The site is offline and will remain offline until it has reached its first stage of completion (enough to function well online while still allowing for future updates and revisions), so I cannot post demo links. However, I can post some links to other website pages that I have come across that make great use of menus and navigation within sections and pages.

I would like to implement multiple secondary menus, each of which are only accessible from specific pages within the site. I really like the idea of using a "tabs" system within pages for sectional navigation.

Here are a couple examples of pages within another website with navigation via tabs that I like:

http://www.johnpenni...m/schedule.html

http://www.johnpenni.../performer.html

I would like to use tabbed menus like that.

Could anybody please help me with this?

Thank you very much!

Edited by Zylek, 29 April 2011 - 10:48 AM.


#2 Michael_Martinez

Michael_Martinez

    Time Traveler Member

  • 1000 Post Club
  • 1354 posts

Posted 29 April 2011 - 12:36 PM

I am currently building a website that requires a highly organized structure for ease of navigation. In the past I created a website that used one primary menu, though the menu became extremely bloated with too many internal links and resulted in a form of navigation that felt "crammed" within the one menu.


Don't try to find a more efficient way to cram all those links into one menu structure. Instead, spread throughout the site, creating menus that are relevant to each section/category.

#3 Zylek

Zylek

    Whirl Wind Member

  • Members
  • 61 posts

Posted 29 April 2011 - 01:30 PM

Thank you, that's exactly what I'd like to do. I'm hoping someone can help me with a means of how to do that. Thanks!

#4 cre8pc

cre8pc

    Dream Catcher Forums Founder

  • Admin - Top Level
  • 13639 posts

Posted 29 April 2011 - 01:56 PM

The only thing I can think of are AJAX, cgi and CSS3 as the how-to.

Navigation menus are getting more sophisticated, with a goal of being more intuitive. For usability, this is great. For SEO, it can present issues.

Drupal has forums...have you checked there?

I would like to implement multiple secondary menus, each of which are only accessible from specific pages within the site.


When doing this, be careful about keeping in signals for sense of place. Once a site alters its consistency, the user gets confused and frustrated, having to relearn the navigation. You can create a second level navigation scheme inside a hub (category, upper level) as long as there is an obvious path back up one level AND a fast escape route back "home".

Remember to add text only navigation as an alternative to anything dynamic, for accessibility and search engines. It can be a condensed version of the IA put on the left sidebar or placed in a footer.

Good luck. If you find any how-to information, please let us know.

#5 jonbey

jonbey

    Eyes Like Hawk Moderator

  • Moderators
  • 4433 posts

Posted 29 April 2011 - 03:30 PM

For my site I have added pages as "menus" rather than try to get everything flying out and up from one single nav. So the main nav links to section indexes. Still not actually completed the nav ... need to add more details still. Each section has 50-200 articles to even with a section page most are hidden away in the sitemaps.

It is a headache.

On a plus note, I have much fewer pages than I did about 3 weeks ago!

#6 A.N.Onym

A.N.Onym

    Honored One Who Served Moderator Alumni

  • Invited Users For Labs
  • 4003 posts

Posted 29 April 2011 - 10:45 PM

For having specific menus on specific pages or pages of a specific category/taxonomy:
- create a menu with links
- go to blocks, find the menu
- edit the menu block to be displayed on specific pages (if there are few of them and they don't change), select a content type or find/install a module that'd restrict the filter to taxonomies (I like this approach better, it allows for much more precise filtering)

As for the tabs, I haven't seen such a module, but you can try looking for it in the content display module section.

Also, this Menu Block module might be remotely useful for displaying/hiding menu links, depending on the navigation.

This module uses vertical tabs and only has a development version, yet.
This module does tabs in blocks, but not sure if it does it with menus.

Then again, I found the module that does what you want, but it doesn't have a 7.x version. Many more tabs modules don't have the 7.x version, too.

Edited by A.N.Onym, 29 April 2011 - 11:15 PM.


#7 DonnaFontenot

DonnaFontenot

    Peacekeeper Administrator

  • Site Administrators
  • 3828 posts

Posted 30 April 2011 - 07:07 AM

Maybe something like this? http://net.tutsplus....d-content-area/

#8 DCrx

DCrx

    Hall of Fame

  • 1000 Post Club
  • 1295 posts

Posted 30 April 2011 - 08:09 AM

I await the posts about "tertiary" menus.

Users are gonna love the heck out of 'em. I just feel it without needing to test that notion ...you know, with users.

#9 Zylek

Zylek

    Whirl Wind Member

  • Members
  • 61 posts

Posted 30 April 2011 - 10:11 AM

The only thing I can think of are AJAX, cgi and CSS3 as the how-to.

Navigation menus are getting more sophisticated, with a goal of being more intuitive. For usability, this is great. For SEO, it can present issues.

Drupal has forums...have you checked there?

It sounds like AJAX, cgi and CSS3 might require learning in a way not entirely unlike learning a new language, in which case they're beyond me. I'm doing my best with my limited knowledge on web design and through the use the basic wysiwyg-natured Drupal CMS.

Drupal does have forums but I absolutely abhor them. ;)

I would like to implement multiple secondary menus, each of which are only accessible from specific pages within the site.

When doing this, be careful about keeping in signals for sense of place. Once a site alters its consistency, the user gets confused and frustrated, having to relearn the navigation. You can create a second level navigation scheme inside a hub (category, upper level) as long as there is an obvious path back up one level AND a fast escape route back "home".

At the moment, I have a main menu (at the top of the page) with the main internal links and, so far, one of the links includes a drop-down that displays a few categories related to that link.

After viewing a category, the page content has a new vertically-oriented menu (on the left side of the page) displaying the internal links related to that category. Although there is only the one side-menu, it has subsection pages linked within it (they are indented).

I'd like to have that menu horizontally-oriented and placed below the main menu that is at the top of the page, though I don't know how the indentations would work at that point.

Within the subsection pages of that side-menu there is need for another sub (or I guess sub-sub) section. This is where I'm getting a little concerned about ease of navigation: How do I implement those "sub-sub-pages," which are already contained within a category (or, really subcategory) of the site?

Here is a basic example of only a few of the menu items that I'm currently working on:

Main menu at the top
Main menu item - Musician (with drop-down)
Main menu drop-down item - Educator
Educator page contains side-menu
Side-menu item - Curriculum (with a list of indented items below it)
Side menu 1st-level-indented item - Program
Side menu 2nd-level-indented item - Phase 1
Side menu 3rd-level-indented item - Level 1

And here is where I'm concerned about ease of navigation versus bloated menus:

Side-menu item - Curriculum (with a list of indented items below it)
Side menu 1st-level-indented item - Courses
Side menu 2nd-level-indented item - Academics (there is a non-academic item, so this is required) (quick edit- this is an entire section)
Side menu 3rd-level-indented item - {specific subclassification of courses} (edit - this is necessary)
Side menu 4th-level-indented item - {specific course with summary} (quick edit- there are a lot of courses)
Side menu 5th-level-indented item - Syllabus
Side menu 5th-level-indented item - Schedule (too detailed to include in syllabus page)

...now, that's a lot of indentations. By that point, the Syllabus and Schedule pages are, let's see if I'm counting this right... main/musician, educator, curriculum, 1st, 2nd, 3rd, 4th, 5th level indentations... eight levels of menu items.

Organization is key.

So is ease of navigation.

Bloatedness is the curse that must be avoided.

The trick is: How?

A.N.Onym - thank you for those links! As usual, you are the excellent resident Drupal Guru of Cre8asite. :D

For having specific menus on specific pages or pages of a specific category/taxonomy:
- create a menu with links
- go to blocks, find the menu
- edit the menu block to be displayed on specific pages (if there are few of them and they don't change), select a content type or find/install a module that'd restrict the filter to taxonomies (I like this approach better, it allows for much more precise filtering)

Perfect. :) I now have the current secondary menu set-up and only displaying on certain pages.

Then again, I found the module that does what you want, but it doesn't have a 7.x version. Many more tabs modules don't have the 7.x version, too.

It seems there isn't much for Drupal 7 add-on features. I'm guessing v7 was only recently released. (?)

Maybe something like this? http://net.tutsplus....d-content-area/

CSS and scripting in general... all of that's beyond me. ;)

Edited by Zylek, 30 April 2011 - 11:12 AM.


#10 Zylek

Zylek

    Whirl Wind Member

  • Members
  • 61 posts

Posted 02 May 2011 - 03:42 PM

I've come up with a temporary solution. Not using extra tabs at present, simply using text-based vertically-listed secondary menu on the side of the page for different sections.

I'm trying to remove the page title "Home" from the home page (Drupal 7). Does anybody know how I can do that? I've googled it and tried what people explained on other sites but it didn't work. The closest I got was removing the "Home" page title after clicking on "Read More...", though it's still present on the initial display of the home page.

#11 A.N.Onym

A.N.Onym

    Honored One Who Served Moderator Alumni

  • Invited Users For Labs
  • 4003 posts

Posted 02 May 2011 - 09:00 PM

Zylek, without seeing the site, it's hard to suggest how you can improve your navigation, but can you have
1. Musician
2. Educator
3. Program (Curriculum + phases+ levels)?

Can you put Academics as a separate menu (ie, in the top level of the navigation)?

Just try to categorize the menus so that they'd require the least amount of clicks. Maybe some categories aren't really needed.

From what I understood, Drupal 7.0 has been released in the past several months. Ubercart, the main and the best ecommerce module, hasn't been ported yet and I'm sure it has lots of maintainers (as well as that it's probably one of the largest modules out there). As far as I can see, the modules that *are* required by the community (check how many installations a module has) will be ported, unless they were deprecated by the Drupal 7 (i.e., put in the core, as some part of CCK and others were). That's why the "sort by most installs" filter in the module section is pretty handy: it points out not only better, but most likely updated and well maintained modules.

#12 Zylek

Zylek

    Whirl Wind Member

  • Members
  • 61 posts

Posted 03 May 2011 - 12:45 AM

D7=nice... lots of changes, though, but that's okay. I was never a pro at the CMS anyway. haha It's nice to see improvements in the software in any case. It just takes getting used to. I'll be sure to check out the most downloaded modules over on that site.

Here are details for how I've currently (possibly temporarily) set up my menus...

Main menu:

	* Musician
		  o Educator
		  o Performer
		  o Composer
	* Recordings
	* Collaborations
	* Press Kit
	* Contact

Educator page (within "Musician") has "Philosophy & Curriculum" menu:

	* Philosophy
	* Curriculum
		  o Objectives
		  o Auditions
		  o Program
				+ Phase 1
					  # Level 1
					  # Level 2
				+ Phase 2
					  # Level 3
					  # Level 4
		  o Courses
				+ Lessons
				+ Studio
				+ P. E.
				+ Large Ensemble
				+ N. M. E.
				+ W. P. E.
				+ Steel Band
				+ Combo
				+ Literature
				+ Composition
				+ Commissions
				+ History
		  o Materials
		  o Practice
		  o Logistics

Performer page (within "Musician") has "Performances" menu:

	* Premieres
	* Selected Performances

Composer page (within "Musician") has "Selected Works" menu:

	* Compositions
	* Arrangements

Recordings (aka "Selected Recordings") (from the Main menu) has "Excerpts of Recordings" menu:

	* Solos
	* Accompanied Solos
	* Duets & Trios
	* Quartets
	* Chamber Ensembles
	* Jazz-Rock Combos
	* Marching Ensembles

Collaborations (from the Main menu) will soon have a Collaborations menu:

	* Composers
	* Performers

Press Kit (from the Main menu) will soon have a Press Kit menu:

   * Biography (with subsections for different versions (still part of same menu))
   * Resume
   * Curriculum Vitae
   * Gallery
   * Multimedia
   * PDFs

Contact (from the Main menu) is simply a contact page.

Edited by Zylek, 03 May 2011 - 12:46 AM.


#13 A.N.Onym

A.N.Onym

    Honored One Who Served Moderator Alumni

  • Invited Users For Labs
  • 4003 posts

Posted 04 May 2011 - 01:38 AM

Do you have a lot of educators or only one?

You can try putting Educator, Premiers and Compositions in the main menu, doing away with submenus in the last two points. If curriculum is used a lot, it could earn a place too, perhaps, though I'm not entirely sure if it's right from the pov of information architecture point.

Edited by A.N.Onym, 04 May 2011 - 01:39 AM.


#14 Zylek

Zylek

    Whirl Wind Member

  • Members
  • 61 posts

Posted 05 May 2011 - 02:55 PM

Do you have a lot of educators or only one?

You can try putting Educator, Premiers and Compositions in the main menu, doing away with submenus in the last two points. If curriculum is used a lot, it could earn a place too, perhaps, though I'm not entirely sure if it's right from the pov of information architecture point.

Only the 1 educator. The musician menu/category pertains to 1 person who is an educator, performer, and composer.

Premieres consist of premiere performances, so they fit within the performer section.

Although compositions each receive a premiere (in many cases, at least), that music will remain in the composer/compositions section, simply to avoid redundancies of listing music titles. There are already redundancies for the Recordings section, though that is kind of a unique thing, hence it getting an entire category in the main menu.

I've considered maybe doing the following with the main menu:

(Home) - not a menu item but the default home page that shows intro info (currently "Musician" page).

* Performer
-- Premieres (maybe merge recordings of premieres within this)
-- Selected Performances (maybe merge recordings of selected performances within this)

* Educator
-- philosophy
-- curriculum (with all of the subsections within that)

* Composer
-- Compositions
-- Arrangements
-- (Commissions (to be added at some point later))

* Collaborator
-- Composers (collaborations with other composers)
-- Performers (collaborations with other performers)

* Press Kit (etc.)

* Contact

The only thing about that approach is it puts a bunch of stuff in the main menu, and it potentially removes "Recordings" from the main menu, and that's kind of a unique thing that I'd like to give quick access to. It makes sense to combine subcategories of "Musician" (as performer, educator, and composer) within a Musician menu item. The "Collaborations" menu is a separate thing because it is kind of unique in that it's a way of hinting that more collaborations can be set-up with prospective other-people in the future, and putting it in the main menu makes it easy-access and pretty clear.

{shrug} I don't know. It's all up in the air at the moment.



RSS Feed

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users