So this one's the "Once and for all" thread for DNN Nav Menu skinobject.

One of the biggest questions that comes up time and time and time again is "Menu this," "Menu that".  I have a few gripes about menus myself.  Hopefully this thread can become the place for all queries NavMenu. Let's get the ball rolling.  Let's make this a hot link.  Lets get it pinned to the top of the forum.

Here's what I know and what I can contribute:

1. Getting the NavMenu to display Vertically (using .ascx skinning method)
   1. Some CSS for this display
2. Getting the NaveMenu to display Horizontally (using .ascx skinning method)
   1. Some CSS for this display

So here goes (as above):

1. Getting the NavMenu to display vertically (using .ascx skinning method)

Contain the menu in a <div> (or <td> if you're old school) that has its own styling - width, etc.  Then place the following into that div:

<dnn:NAV runat="server" id="dnnNAV" providername="DNNMenuNavigationProvider" indicatechildren="false" controlorientation="Vertical" cssnoderoot="dnavmenu_rootitem" cssnodehoverroot="dnavmenu_rootitem_hover" cssnodeselectedroot="dnavmenu_rootitem_selected" cssbreadcrumbroot="dnavmenu_rootitem_selected" csscontainersub="dnavmenu_submenu" cssnodehoversub="dnavmenu_itemhover" cssnodeselectedsub="dnavmenu_itemselected" csscontainerroot="main_dnnmenu_container" csscontrol="dnavmenu_bar" cssnode="dnavmenu_bar" cssbreak="dnavmenu_break" cssicon="dnavmenu_icon" />

The biggest indicator here is "controlorientation="Vertical." Next, you'll want to style this bad boy.  If you look at the code above, you'll see "cssnoderoot=", etc.  This is a way of saying to the menu, "Hey, use these styles, will you..?!"  You can download the corresponding CSS for this at this link.

2. Getting the NavMenu to display horizontally (using the .ascx skinning method)

Again, contain the menu in a <div> (or <td> if you're old school) that has its own styling - width, etc.  Then place the following into that div:

<dnn:NAV runat="server" id="dnnNAV" providername="DNNMenuNavigationProvider" indicatechildren="False" controlorientation="Horizontal" cssnoderoot="dnavmenuhorz_rootitem" cssnodehoverroot="dnavmenuhorz_rootitem_hover" cssnodeselectedroot="dnavmenuhorz_rootitem_selected" cssbreadcrumbroot="dnavmenuhorz_rootitem_selected" csscontainersub="dnavmenuhorz_submenu" cssnodehoversub="dnavmenuhorz_itemhover" cssnodeselectedsub="dnavmenuhorz_itemselected" csscontainerroot="dnavmenuhorz_container" csscontrol="dnavmenuhorz_bar" cssbreak="dnavmenuhorz_break" cssicon="dnavmenuhorz_icon" />

Once again, you'll want some CSS for this - found at the same link as above, this one.

I'm certainly not the authority on this, but this has seen me through some hair-pulling moments.  If you have corrections to the above or better / more CSS styles available for users to download and learn from, please post them here.  If you have any questions about the DNN Nav Menu, post them here.  If you have something of genuine value about this skin object, post it here.

Later
Jon

Shebang Websites - A product of Mogridge Design
Hey, we're partnered with UntangleMyWeb.com

I need separators. I cant get them to work, ever. Just simple white pipe style separators that I can size to match my menu height. Probably too much to ask for.

Beth V.

DotcomDominion.com

Hi,

i want to use 2 dnn nav's. One on the top  en one on the leftside.
I don't know how to link them. If i select item 1 at the topmenu i want the submenuitems of item1 appear in de leftside menu.

Any ideas?

Thanks.
Stephany