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!

I am having a similar issue. When you hover over any menu item, you get the hover effect over both the menu item you are hovering over as well as on the menu item of the page you are on currently. Does anybody know a way to prevent this, or is this just how the DNN Nav Menu works?

No, the DNN Nav Menu should not be working that way.  Switch your site to the Minimal Extropy skin and see if it continues.  If not, it is a problem with your skin's CSS.

Is there a URL where I can see this?

Hi I wanna ask you about dnn NAV menu. My menu is first menu item and other menu items are different image bg. So I use the menu_member .first {} for that first menu item. But that one is general of all menu items So affected to the first item of sub menu is appearing that image. I don't wanna it. so how to fix that one.I can't find solution other places.
if i make like
.main_dnnmenu_roo em .first {} it is not working .As that one is mention to the root menu item.
So i did .main_dnnmenu_bar .first { } .it is working but it affected to the submenu. Thanks.

Be sure to see this set of tutorials:  DotNetNuke Nav Menu.  You'll see how to style the various items in the menu.

I've been watching the tutorials and trying to design skins to display in a Mozilla FireFox browser as well as the IE 8 browser. Thanks for these - they have explained alot, however, it doesn't appear to work in Mozilla/Firefox. I've downloaded the code for the one-pane skin from the following tutorial page: http://www.dnncreative.com/Tutorial...fault.aspx I install this skin on my localhost version 544 website. It displays fine in IE but the menu does not display in Mozilla firefox. I have found that IF I go to your one_pane.ascx file and remove the ProviderName="DNNMenuNavigationProvider" and save the file, then the menu displays fine in Mozilla Firefox and IE - however when the setting is there it only displays in IE. Why is this setting preventing the menu from displaying in Mozilla but not IE? Does my firefox browser need a setting changed for this to work? I can't tell what browser the tutorial is using, but shouldn't this work in both browsers? Appreciate any help or direction you can provide. Thanks

I downloaded and installed the skin on a test site. I don't see any problems, either in IE for FF.

Removing the ProviderName may get you the default. I believe, but am not sure that the default is the SolPartNavigationProvider. That might indicate a problem in your installation with the DNNMenuNavigationProvider.

Without looking at your site, it's hard to say what is going on. But, I've never seen anything like that before. It would be interesting to upgrade to 5.6.2 and see if the problem persists.

thanks for your response. I don't know what was wrong (maybe cache?) but I started from scratch again this morning and when I applied the skin this time is was correct in both IE and mozilla. Chalk it up to growing pains. Thanks again.

It is possible that something went wrong with the installation the first time.

Hi...I've went through the tutorials and am having a problem with my background graphic displaying over a root menu item that has child indicator/sub menus. The graphic displays fine over the other root menu items. Please see URL: https://psfebus.allenpress.com/ebusasmmtst/Home.aspx The dark green graphic displays fine over the options that do not indicate that they have a submenu. However, if you hover over the ones that do indicate a child menu (Memberships and Donations) the BLACK background color displays. Can you advise me what I'm overlooking? Thanks.

Sure. Look at the menu classes that have "hover" in their names. In particular, there is a background color #000 attached to many of them. So ... the background color will be black (#000) when you hover over them.

You will also want to convert your skin to render in XHTML Transitional mode via a DOCTYPE. See the skinning tutorials for information about this. Doing so will help the skins be more cross browser compatible. You'll suffer less in builiding the skin and making the site look good in all browsers.

Thanks Joe. I've added the doctype document to the skin. I have the Nav attribute of: CSSNodeHoverRoot="main_dnnmenu_rootitem_hover" and the CSSNodeHoverSub="main_dnnmenu_itemhover" in my .ascx file. The hover class I placed in both is: background: #000 url(green.jpg); which from what I understood in the tutorial will put a image in the background and IF the image isn't available it will put the black color. The image will display for all the menu root items except when the menu item has sub menu items. Is there another NAV attribute that I have to set? Or one that I'm supposed to put a td after (like this class example: .main_dnnmenu_submenu td)? I just don't know why I'm not having the same results as the tutorial. If I could just get over this one hurdle...... I would be happy to send you the skin if you think it would help any - just let me know how to do that. Thanks for your help.

OK. I totally misunderstood your original question. The dark green background is so dark that I couldn't distinguish it from black on my lcd screen, so I totally misunderstood what you were asking.

The doctype thing is good!

I now see your problem and I possible see the answer.

It looks like the "down arrow" that indicates children for those main menu items that have them is done with a background image being applied, /ebusasmmtst/images/menu_down.gif. That probably overrides your background image -- that is, you can't have two background images!

Since your green background image is just a solid color, probably the best thing to do here is set the hover background colors to #053738, which is the color you are using. You can also remove the background image, since it's redundant.

Hopefully that is closer to what you want.

I've been watching DNNC tutorials (ascx skinning, developers tools and Nav menus) all morning and just found the /ebusasmmtst/images/menu_down.gif that is being applied. And yes, I know that the graphic appears to be almost the same color as the graphic, however, the graphic is basically just a place holder to apply and is not the original graphic that I want to use. The only reason I applied the background color of black is so that I could see that the style was actually being used and that style did indeed work on the site. And by doing this I found that the style WAS being applied, just not the graphic. So it was done that way just to troubleshoot. So I do need to apply a different graphic instead of just a background color. Anyway, I JUST found out it's that silly Nav attribute called Indicate children with was set to TRUE so that I had those little arrows indicating that there was a sub menu. I changed that attribute to false and now it works on my local host site. Now I guess my question would be...if I can't use the "indicate children" attribute = TRUE because it steps on my graphic, what do I use? I'm just relieved I found out why it was being stepped on. I can't tell you HOW long this has been an issue for my skins!

Yes, I should have mentioned the indicate children attribute.

Are you using the DNN Nav menu? If you are, you might want to switch it for the DDR Menu from DNNGarden.com. At one level it is a direct replacement for the DNN Nav menu, but it is much more amenable to customization (not to mention that it will be the default menu for DotNetNuke 6).

I haven't thought too much about indicating children while applying your own background image. But, you could create background images with the indicator shown (I think that there is an attribute that lets you figure out if an item has children or not). You'll have to position it to the right, and also make sure that it only fills the area for the menu item. These sorts of things are all "doable."

There could well be a better approach, too.

Joe,

Yes, I am using the NAV menu. The DNN-blue had a solepart menu in it, but I amended it to use the NAV menu. I have not downloaded the DDR menu from DNNGarden.com. I'll go see if I can find the link to download that skin. I was going to try to use one of the DNNC tutorials menu's as a basis for skin customization, but I'm still very new at this and am not sure I understand the div tag and the classes associated with it that place it on the page. I played with one of the downloaded skins from Lee's tutorials and tried to amend it to our company's specifications, but like Lee said in his tutorials, I'm much more familiar with the html framework than just using div tags. Would you happen to know if there are any tutorials that talk about building the .ascx file (not just about the NAV token)? I watched one this AM and while it did discuss some about the framework, it really didn't go into the various id's and styles and their attributes? For instance, sometimes when changing an attribute for a token, it will prompt you when the value for the attribute is true or false (like the indicate children), but others do not. Like the tutorial that advised that the search token had a "show site" and show web" attribute/property. I would have just deleted the token from the skin instead of changing this attribute. Is there any documentation or tutorial that provides more information regarding what values are available for the token attributes?

If you'll look at the DotNetNuke Wiki on the dotnetnuke.com site, you will find a document that defines all of the skin objects and their attributes.

I usually find it easier to start with an existing skin and modify it to my needs. In the past I have used the Minimal Extropy skin. Recently I did one with the Architect skin found on CodePlex.com.

My approach is to remove/modify the background colors and images first.

Your question is quite open ended, so I'm not quite sure how to answer. Basically, though, the structure of the skin is based on the divs. You can place the various skin objects that you will use where you want them. Mostly, the skin should have NO styling and all of that is done in the skin.css file.

If you are interested in learning about skins, the best way to learn is to look at other skins. There are a number of free ones -- start with the skins from last year's skin contest at DotNetNuke. Entries for this year's contest just finished so there will be more. One section of the contest required that the entrant take a skin and modify ONLY the skin.css file! That should be an interesting one to watch.

I'm in the process of creating a DotNetNuke site which uses the Nav menu. It works fine on computers that support the "hover" state: as desired, the dropdown menu appears when one mouses over the root menu item on the nav bar. However, on the iPad, the DNN menus don't work properly: when one touches the main nav, it goes to the touched link without displaying the dropdown. I need to come up with a way to navigate the site using an iPad. To my surprise, I am able to use drop down menus on the iPad in a non-DNN site that I created: this non-DNN site uses the "onmouseover" event in the tag. What happens is that touching the nav bar displays the dropdown, then touching a second time navigates to my desired page. Is there a way to use "onmouseover" in DotNetNuke menus so that DNN sites can be navigated on an iPad? If not, what suggestions do you have for making a DNN site's navigation iPad-friendly? Thanks.

DotNetNuke is in transition from the DNN Nav Menu to the DDR Menu (from DNNGarden.com).

This might be a good opportunity for you to switch, too. Converting a skin from using DNN Nav to DDR is quite easy.

I just checked the DNN Garden website using an iPad, and the menu versions he is using seem to be quite iPad friendly. So, it may be a matter of just switching menu providers in your skin and that's that. If not, just a few adjustments and I can help you work through that.

Thanks, Joe, I installed the DNN Garden menu, but now my page no longer works, I get "An error has occurred...Object reference not set to an instance of an object".

As the website instructed, I replaced


I wonder if I also need to replace the following statement to point to a new ascx file at ~/DesktopModules/DDRMenu/ :
<%@ Register TagPrefix="dnn" TagName="NAV" Src="~/Admin/Skins/Nav.ascx" %>
Perhaps I need to register a new object, but the web page at http://www.dnngarden.com/Upgrading-....T116.aspx doesn't mention this.

oh well, the forum editor software deleted part of my post, but it was simply a cut and paste of the instructions at http://www.dnngarden.com/Upgrading-...T116.aspx, to change the providername.

If you've installed the module and your skin used the dnn:nav tag, all that you should have needed to do is replace the named provider in that tag.

If you were using a SolPart menu, there is a second set of instructions.

Your skin may have been doing something different, so you may want to check the "Adding to a skin" page.

If you'd like to post a copy of your skin here, use the Attachments function

Joe, thank you for offering to look at the skin. The good news is that the DDR menu magically started working with no further changes on my part (it's now the next day and perhaps the application automatically restarted, pulling in the new copy of web.config?), the bad news is that I don't see an Attachments function on this blog window -- I see buttons for Bold, Italic, Underline, Quote, Code, and Submit. Even though the DDR menu now works, I'll try the Code button to see if I can paste in the ascx file which I had whittled down to just a few lines:

Oops, I should have told you to clear the cache and restart the application from the Host Settings page. Waiting overnight essentially did that for you!

I'm glad that the DDR Menu is working. What do you need now?

The Attachments tool is not part of the edit window, but is below the submit button, just below "Subscribe:".

The DDR menu works well, but for pages that are in the dropdown, I currently have to touch the window 3 times:
Step 1 of 3: touch the nav bar to display the dropdown menu.
Step 2 of 3: touch anywhere in the dropdown menu to activate it.
Step 3 of 3: touch the desired link in the dropdown to navigate to that page.
Ideally, I'd only have to touch the screen twice: once to show the dropdown, and once to choose the page from the dropdown.
Ah yes, I see the attachment feature now -- I had been using the Quick Reply window, which has no such feature, but when I click the Add Reply button, that has more features including attachments.

Is there any charges for watching this video

because when i opened the page i am not able to watch

Yes, the videos are available only to subscribers. (There are a few free videos available so that you can assess their quality.)

I would recommend switching to the DDR menu, and it probably would make the most sense to get the latest version from the Codeplex site. That one is compatible with DotNetNuke 6, so you won't have any upgrade issues. Additionally, there's some good documentation (more extensive than what is at DNNGarden.com) in the DotNetNuke Wiki.