Add any questions or comments regarding the DotNetNuke Nav Menu tutorial from issue 47

Hi!

I have a question about using both horizontal and vertical menus in the same skin.
I want to create a menu system just as at dotnetnuke.com, where the vertical menus subpages are displayed indented in the vertical menu.

Do you have any ideas of attributes used here?
Is it Navmenu at dotnetnuke.com ?

/ Petri

Hello,

Yes I think that is the Nav menu, however it may be using features that are just available in the new version of the Nav menu in DNN 5.x.

To give you an idea of how they have coded this, here is the code below from the DotNetNuke.com skin.CSS file

a div tag with the id of SideNav surrounds their menu.


You may want to try this attribute in your menu:

<!--[if gte mso 9]> fficeDocumentSettings> fficeDocumentSettings> <!--[if gte mso 9]> Normal 0 unctuationKerning/> false false false oNotPromoteQF/> EN-GB X-NONE X-NONE ontGrowAutofit/> ontVertAlignCellWithSp/> ontBreakConstrainedForcedTables/> ontVertAlignInTxbx/> <!-- /* Font Definitions */ @font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:0; mso-generic-font-family:roman; mso-font-pitch:variable; mso-font-signature:-1610611985 1107304683 0 0 415 0;} @font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:-520092929 1073786111 9 0 415 0;} @font-face {font-family:Verdana; panose-1:2 11 6 4 3 5 4 4 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:-1593833729 1073750107 16 0 415 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:""; margin-top:0cm; margin-right:0cm; margin-bottom:10.0pt; margin-left:0cm; line-height:115%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:minor-fareast; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-ansi-language:EN-US; mso-fareast-language:EN-US;} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:minor-fareast; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-ansi-language:EN-US; mso-fareast-language:EN-US;} .MsoPapDefault {mso-style-type:export-only; margin-bottom:10.0pt; line-height:115%;} @page Section1 {size:612.0pt 792.0pt; margin:72.0pt 72.0pt 72.0pt 72.0pt; mso-header-margin:36.0pt; mso-footer-margin:36.0pt; mso-paper-source:0;} div.Section1 {page:Section1;} --> <!--[if gte mso 10]> ForceDownLevel = "True"




div.SideNav div
{
    padding-top: 6px;
        padding-bottom: 6px;
    border-bottom: solid 1px #d4dbe3;
}

div.SideNav div.Level1
{
    padding-left: 8px;
}

div.SideNav div.Level2
{
    padding-left: 20px;
}

div.SideNav div.Level3
{
    padding-left: 32px;
}

div.SideNav span,
div.SideNav a:link,
div.SideNav a:visited
{
    padding-left: 12px;
    background-image: url("images/site/bullet.gif");
    background-repeat: no-repeat;
    background-position: left center;
    font-family: Arial,Helvetica,Sans-Serif;
    font-size: 11px;
    color: #6f7e87;
    text-decoration: none;
}

div.SideNav a.ActiveItem:link,
div.SideNav a.ActiveItem:visited,
div.SideNav a.ActiveItem:hover,
div.SideNav a.ActiveItem:active
{
    color: #cc0000;
    text-decoration: underline;
    background-image: url("images/site/bullet-red.gif");
}


div.SideNav a:hover,
div.SideNav a:active
{
    color: #cc0000;
    text-decoration: underline;
}

I want a secondary menu in addition to the main menu similar in concept to the tutorial. I want the secondary menu to start with a tab-id. However, my configuration of the DNN portal uses the page title (or name) in place of the tab-id. This means I can't figure out which tab-id to start with. How can I determine the tab-id when it isn't explicitly displayed in the url?

hello,

Try going to the page settings for that page, and in the URL you should see the tab ID for that page

Hi Lee,

Firstly congratulations on an excellant article & choice of article. I have never touched skinning before & have almost nailed it, however

I seem to have a problem with the height of my menu (DNN 5.01.00 (773))

I have set the height to 25px & my background image is 25px high but it just wont accept it.

Ive had a crack (for the first time) with web developer toolbar & narrowed it down to skin.css which also relies on menu.css

the page in question is http://7even.capaust.org

I look forward to hearing from you.

Kind Regards

Todd

Hello,

Looking at your code, you just need to make one change:

.mainMenu
{
    cursor:pointer;
    font-size: 10px;
    width:970px;
height: 25px;
}

instead of placing the height in the
.mainMenu .root

When you have placed your background image, I would also recommend you specify a background color to use incase the image can not be displayed.

ie:
in your .menu_bg

background: blue url(images/menu_bg.png) top left;

Thanks soo much, Lee

Hi Lee,
Thanks for the nice tutorial.

I was trying to figure out how to show a horizontal nav that does NOT show its children in dropdown menus. I'm doing a footer nav, and I don't want something to drop down (or up) when someone scrolls over, for exampel, Admin. I didn't see how to do that in your tutorial (though admittedly I didn't watch every one of them), but I seem to recall you did request feedback on that issue.

I was able to accomplish this with what would probably be best described as a hack, though a very easy one. I simply set the CSSContainerSub to a css class in which I set the property 'display:none'. Works like a charm.

ah yes - good idea! - Thanks for the feedback

Regarding the removal of the submenus...

I believe the official way to do this now is with the following properties:

StartTabId="-1" (for starting on the root -- but this could change to whatever level you wanted)
ExpandDepth="1"
PopulateNodesFromClient="False" (This is the key piece here, since by default it's True)

I found this on page 18 of the DotNetNuke Navigation WebControls document written by Jon Henning.

thanks for posting this info,

Hello,

I have now gone through the tutorials in issues 5&6 and 46.

I am now looking at the tutorials in issue 47 and am having problems styling the Nav menu.

I have added the code for the nav menu to the ascx file and the menu changes to the 'basic' format.

Then I add the code from video 3 to a new CSS file but this does not replicate to the local website.  Basically the neither the background image or color are visible.

Please can you advise where I am going wrong.

Many thanks.

Trev

Your skin.css file doesn't seem to define the styles called for in your ascx file.

I would also remove all of the unneeded/unused styles just to simplify the file.

I have done this with the following control:

Register the following Control:

Register TagPrefix="dnn" TagName="LINKS" Src="~/Admin/Skins/Links.ascx"

Instr the following control

dnn:LINKS runat="server" ID="dnnLINKS" Separator="  |  " Level="root"

I'm trying to build my own skin for my site this skin will be a right to left skin, but I face a problem with my [NAV] object which is for dnn menu, this problem needs an alter on the javascript file for the menu named "dnn.controls.dnnmenu.js" but it is a shared js for all skins, so can I specify special js file for my menu or not?

I've got an issue with the images that indicate child menus. I've specified a different image for IndicateChildImage and IndicateChildImageSub, but only the IndicateChildImageSub image displays, for both root and child menus. I even tried IndicateChildImageRoot, but that didn't change anything.

I've sorted the issue, sort of, and in an unsatisfying manner.

When I switch to a horizontal menu the IndicateChildImageRoot image displays fine. Apparently the authors of the control think they know better than we do. Since vertical menus generally use left arrows for submenus, and so do the submenus, they just grab the submenu image and use that, no matter what you really want. If your root menu is vertical and graphical, there's apparently no way to have nice graphical submenu indicators on it that are different from the ones on the submenus. That's just annoying!

There are alternative menus available.  One free menu, and one that gets lots of postive reviews, is from http://www.dnngarden.com/.  Mark Allan is very active and seems to provide good support.

This menu is touted as a "drop in" replacement for both SolPart and the DNNNav menus.

<!--[if gte mso 9]> Normal 0 21 unctuationKerning/> false false false oNotPromoteQF/> SV X-NONE X-NONE ontGrowAutofit/> ontVertAlignCellWithSp/> ontBreakConstrainedForcedTables/> ontVertAlignInTxbx/> MicrosoftInternetExplorer4 <!-- /* Font Definitions */ @font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:1; mso-generic-font-family:roman; mso-font-format:other; mso-font-pitch:variable; mso-font-signature:0 0 0 0 0 0;} @font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:-1610611985 1073750139 0 0 159 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:""; margin-top:0cm; margin-right:0cm; margin-bottom:10.0pt; margin-left:0cm; line-height:115%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-fareast-language:EN-US;} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-fareast-language:EN-US;} .MsoPapDefault {mso-style-type:export-only; margin-bottom:10.0pt; line-height:115%;} @page Section1 {size:595.3pt 841.9pt; margin:70.85pt 70.85pt 70.85pt 70.85pt; mso-header-margin:35.4pt; mso-footer-margin:35.4pt; mso-paper-source:0;} div.Section1 {page:Section1;} --> <!--[if gte mso 10]> Hi!

I am using two Nav menus horizontal in my skin. When I go from a page in the mainmenu to a page in the submenu the first item in that menu is getting a hover effect, even if I am not clicking that one. It just happens when switching from main to sub menu and the opposite way.

The css class that affects it is .subMenu .hov and .mainMenu .hov

As I can see, it is the same problem in the DNNC_Simple_Skin_NAVMenu2_i52_code. Anyone knows how to get around this problem?

Thanks!