Hi Lee or anyone who can give me direction,

I am using the HouseMenu Skin object and HouseMenu module to structure the entire navigation system of our new school website.  I have a couple of questions related to the menu and css.

1) Is the HouseMenu limited in anyway?  What I mean is can the menu and all its associated attributes do whatever the underlying css file tells it to do?  Say you have strong css skills and want to apply those skills to the menu object.  What kind of limitations will you encounter with the skin object/module other than browser compatibility issues?

2) My navigation is set up like this:

-Horizontal menu with no submenus where each menu item represents a main page within the site.

-Each main page has a housemenu module on it (I may change this to the skin object depending on what I find out here) with links  that represents child pages of the main page.

-Each child page has a housemenu module on it with links that represents the child pages of the selected parent page.

I want to be able to give the end user navigational clues, using link color, as to where they're at on the site.  So if they click a main parent page it would turn red and stay red as long as they're on that page.  From that page, if they selected one of the child links in the housemenu module that link along with the parent link page would remain red as long as they remain on that page. I think this has something to do with a css selector/selected attribute but I'm not sure if the menu can accommodate this.  If it will, can you help me get started or maybe point me to an example?

Thanks,

Packrat

Hello,

The HouseMenu does not have any limitations, basically it creates an unordered list, so you style the menu exactly as you would with any other CSS based site using unordered lists.

The horizontal menu video tutorial that I created in issue 12 will help you out with a lot of these elements. - You can watch the intro video - check example 3, this is probably what you will need to setup.

It highlights the parent page, but it doesn't highlight the child page, I think this should be possible however to set up.

I would recommend using the skin object rather than the module, as the Skin Object will be much easier to administer with the maintenance of your site.

Issue no 12

(7 videos – 65mins)

Watch the introduction video (3.8MB)

Hope this helps, thanks,

Hi Lee,

Thanks for the response.  I went back through the Issue 12 videos and was able to get a sub navigation menu built and assigned to each main page. You're videos are very well done and thorough.   Still have a couple ?'s in regards to moving forward.

1) I can get the main page to stay selected (HouseMenuNavCurrentLink) but when I click on a sub menu item the main page item is deselected. How can I change this behavior so that the main menu item stays selected along with the sub menu item? Here's a DNN example site:

http://www.littletonpublicschools.n...fault.aspx

Not sure if it's using the solpart or housemenu.  I've used the firefox developer toolbar to examine the CSS, but I can't figure it out.  I've also tried to make contact with the site developer, but have not heard back from anyone yet.

2) I want to add sub menu to the sub menu items.  Do I follow the same method used thus far to accomplish this? How do I create the effect of when choosing a sub menu item, the sub sub items expand and collapse as you move through clicking on sub menu items?

Any help would be appreciated.

Thanks,

Packrat

Hello,

1) Yes I see what you mean, I missed this. Make sure you use the code from example 3 in the horizontal menus as this is the best way for highlighting currently selected pages.

From looking at the class IDs using the web developer toolbar (Go to Information / Display ID & Class Details), it doesn't add a special css class for the originating root menu item. But, you will see that each menu item has its own unique id. - So for instance the Announcments root menu page has an id of: #HouseMenuNavLink347

So you could create a sub menu skin for the announcments sub-menu items which styles the ID above using CSS, just as we outlined for styling the other CSS classes in the tutorial.

You may want to study some of the code structure of www.skinningtoolkit.com as i implemented the same ideas as presented in the tutorial, but in a slightly different way.  - The menu appears as one menu, but it is actually made of several HouseMenus.

For instance go to this page you will see the main menu item is higlighted in green while the sub menu is highlighted in blue. - The bottom section is one menu that consists of a root menu item and a sub menu item. - Therefore i am able to specify styling for the #HouseMenuNav2ParentItem - ie. the root menu item.

The problem with the horizontal menu method is that the menus are separated so you do not have the opportunity of specifying a ParentItem.

This is the pros and cons of working with either a horizontal / vertical menus. - Each of them has their own compromises. - The workaround for the horizontal menu is to specify specific styling for a menu item by its ID.


2) To add a sub sub menu, you just folllow exactly the same process as outlined in the tutorial for adding a sub menu. - So you add a third HouseMenu to the page.

Does this help?

Hi Lee,

Are you able, by using the developer's toolbar, to determine or guestimate what menu this site is using?  I wanted to use the housemenu because I thought this was a necessary component in order to continue toward the goal of a pure css site. But, if the solpart menu does a more efficient/intuitive job of creating this kind of site navigation, I may have to abandon my goal, unless I am mistaken and the solpart menu can be used in pursuit of a pure css site.   I have used the code from example 3, but we are miscommunicating on a certain point.  I don't want the back-ground color of the item container to be what determines selection.  I want the actual link text to remain colored and return to its previous color when another parent menu item is selected.

Here's my code:

/* =====================================
    CSS STYLES FOR HouseMenu SkinObject
   =====================================
*/

/* Horizontal Menu */
#HouseMenuNav
{
    /*menu wrapper div */
    margin-left: -39px;
    font-size: 14px;
    font-weight: bold;
}
#HouseMenuNav ul
{
    border: 0;
    margin: 0;
    list-style: none;
    float: left;
}
#HouseMenuNav li
{
    list-style: none;
    float: left;
    padding: 2px 2px 0 0;
}
#HouseMenuNav li a:link, #HouseMenuNav li a:visited
{
    display: block;
    color: #FFF;
    text-decoration: none;
    padding: 4px 1em;
  
}

#HouseMenuNav li a:hover
{
   
    color: #b30401;
}


 #HouseMenuNavCurrentLink
{
  
    color: #b30401;
    cursor: default;
}


This #HouseMenuNavCurrentLink will only make a color change to the item if I use background-color, but this changes the color of the item container, not the link text.  By pure dumb luck, I was playing around with this #HouseMenuNavCurrentLink and got the text to accept the color and stay selected. But with the combination of the phone ringing and my victory dance, I hit the backspace key and firefox went to a previous page and I lost the changes:-) I've spent the last few hours trying to figure out what I did but no success so far.

#HouseMenuNavCurrentLink  li a#current?  did not work
#HouseMenuNav a#current?  did not work
#HouseMenuNavCurrentItem? did not work


I did get the sub sub menus to work.  Once again, the tutorials are excellent.

Packrat

Ok, try this:

#HouseMenuNav a:link, #HouseMenuNav a:visited
{
    display: block;
    color: #FFF;
    text-decoration: none;
    padding: 4px 1em;
    border-right: 1px solid #711515;
}
#HouseMenuNavCurrentItem a:link, #HouseMenuNavCurrentItem a:visited
{
 color: red;
}


So, remove the li from this section of your code as it overrides the CurrentItem code that I set above, and then add in the #HouseMenuNavCurrentItem a:link, #HouseMenuNavCurrentItem a:visited
section of code with the color that you need

#HouseMenuNav li a:link, #HouseMenuNav li a:visited
{
    display: block;
    color: #FFF;
    text-decoration: none;
    padding: 4px 1em;
 
}

Thanks,

That was it...Thanks for the help Lee.

One more question Lee...just to clarify something you mentioned earlier. The site I referenced in my earlier post has a nav system that allows you to basically leave breadcrumbs via color or image changes to links. This trail is persistent even when the user is 3 levels down in the nav system. I read into your earlier post that this may not be possible with the housemenu because it does not allow for a parent item to be set? Is this a correct interpretation of what you said? Once again, thanks for all the help. Packrat

The HouseMenu does allow a parent item to be set, I used this method for creating the skinning toolkit menu.

If you look at the skinning toolkit using the web developer toolbar you will be able to see the class ids and you will see a parent class is available for styling.

But if I recall correctly I don't think the configuration for the horizontal menu will work with the parent element.

Take the second menu (which is the sub-menu), it just displays list items of the sub menu pages, which is just a bulleted list, it doesn't have a parent item within the second menu.

If however you set the second menu to display for instance a Root Menu item and the sub-menu items for that Root Menu Item in the second menu, then you can style the parent item of the sub-menu items.

- This is how it is configured in the skinning toolkit menu.

Does this make sense?

Yes, it makes sense but it leads me back to my original question - Does the HouseMenu Skin Object have any limitations related to running the entire navigation of a site? It seems to me that if I am trying to accomplish this "breadcrumb" idea via the use of persistent link colors, and I see this implemented on other DNN sites, like the one I referenced, and the housemenu horizontal configuration doesn't allow for a parent id to be set, then I can't accomplish what I'm after using this menu. I can have a verticle menu with a sub menu that does it, but not in conjunction with a horizontal menu whose items(links) act as the parent pages to all subsequent navigation within the site. If the solpart menu allows for this, it seems to me that this translates into a limitation for the housemenu, barring all the other pros/cons issues (SEO-Validation-Compliance)associated with comparing the 2 menus. I guess what I'm after is for someone to help me decide whether to move forward with this menu. If you tell me there's no way to accomplish what I referenced earlier, it will help in making a final decision. Any input on the SEO CSSMenu? Does it have this same limitation? Sorry to be so long winded about this, but I consider the planning phase of site development to be critical and the navigation system to be a huge part of that. Thanks, Packrat

You are right to question the navigation, it is the most important element.

Well, there is probably a way to configure it in the HouseMenu for a horizontal menu, but I guess what you need to consider as well is the administration time that it will take. - Compare it to the Solpart menu, you just add a page and its setup ready and working. - Add a page to the HouseMenu for this type of configuration and you may have to add additional CSS for the styling.

I have had a look at the page source and css for the site you have linked to and it is not styled using Solpart. - I don't know what they have used. - It maybe something simple such as the links token. - (I don't know about styling the parent elements etc. for the links token). Or another CSS menu.

I haven't used the SEO CSS Menu so I can't offer any advice on that.

There is also the DNN Menu that is available in 4.3 - but again I haven't used it yet.

The new version of solpart that comes with DNN 4.3 is actually now compatible when setting your site to run in XHTML transitional mode, which means you can create a CSS layout site and incorporate the Solpart menu with it.

- Downsides are the Solpart creates quite a bit of code, upsides will probably be a lot quicker for administering in the long run.

I would suggest reading the www.skinningtoolkit.com and looking at the configuration options for styling the Solpart menu.

Thanks,