Nav Menu v2 for DotNetNuke v5 - Issue 52
Last Post 03/15/2011 6:43 PM by Joseph Craig. 24 Replies.
Author Messages
Lee Sykes
DNN Creative Staff
Nuke Master VI
Nuke Master VI
Posts:4945


--
01/06/2010 2:49 AM
    Add any comments or questions regarding the Nav Menu v2 for DotNetNuke v5 tutorial from Issue 52
    Lee Sykes
    Site Administrator
    Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts

    Twitter: www.twitter.com/DNNCreative

    Lee Sykes's Facebook Profile
    Kyle
    Nuker
    Nuker
    Posts:12


    --
    03/15/2010 11:50 PM
    What are the advantages of setting the RenderMode to UnorderedList for the Nav Menu? How can this be done?
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    03/16/2010 3:39 PM
    Here is a nice little blog entry on the subject.

    (Basically, though, this gives you a nice and clean way to start styling the menu ... perhaps at the expense of some complexity and a learning curve.)

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Lee Sykes
    DNN Creative Staff
    Nuke Master VI
    Nuke Master VI
    Posts:4945


    --
    03/17/2010 7:00 AM
    To be honest if you wish to use an unordered list menu I would look at snapsis.com menu, I much prefer their CSS menu to using the NAV menu in unordered list mode - I find the code in snapsis is cleaner.
    Lee Sykes
    Site Administrator
    Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts

    Twitter: www.twitter.com/DNNCreative

    Lee Sykes's Facebook Profile
    Tailo
    Nuke Newbie
    Nuke Newbie
    Posts:4


    --
    04/01/2010 9:31 PM
    First of all I like the tutorials and the way the are presented, especially for someone who never used cms or dnn.
    My question is, I usedd the image nav tutorial,
    it works on local install but once i trensferred the files to godaddy hosting the menu looks weird (its the same dnn install on both local and remote dnn 05.02.02). basically you cant see any other images except the home and admin and host use the 2nd menu image after home, i also uploaded your files
    to test on both servers and same thing, any idea what it could be causing it, maybe some dnn option


    remote host mode
    http://img87.imageshack.us/img87/1361/ex1w.jpg

    local host mode
    http://img101.imageshack.us/img101/2847/ex2k.jpg
    Tailo
    Nuke Newbie
    Nuke Newbie
    Posts:4


    --
    04/01/2010 10:33 PM
    Never mind my previous question, i didnt create pages in the remote install. oops
    Chris
    Nuke Active Member
    Nuke Active Member
    Posts:32


    --
    06/03/2010 1:01 AM
    Hi guys,

    Does anyone know of a way to configure the Nav Menu so that an item(s) at the Root level are section headers/labels (i.e. they aren't links to a page). When rolled over, these simply expose the sub menu beneath them?

    You see this fairly commonly. As an example http://www.bunac.org/usa. The white tabs across the top do not link to a page, but are just section headers for the sub menu beneath. The exception is the first tab (USA Home) that links back to the home page. This is the type of arrangement I'm trying to replicate.

    Is this possible with the Nav menu? If not, is there a different navigation control that anyone knows of that might work better.

    Thanks,
    ~Chris

    Joseph Craig
    DNN MVP
    Posts:11667


    --
    06/04/2010 7:26 AM
    For those items you want to use as "section headers" create the pages but mark them as disabled in the advanced section of page settings.  They will appear in the menu with their descendants, but they won't do anything else.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Chris
    Nuke Active Member
    Nuke Active Member
    Posts:32


    --
    06/07/2010 2:54 AM
    Hi Joe,

    Thanks!  That works great.  

    Do you happen to know if that would affect SEO at all?  I'm just wondering if those "section headers" pages are disabled if Google or other search engines will be able to index the content in the sub menus?

    Thanks again,
    ~Chris
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    06/07/2010 6:26 AM
    That won't have any effect on indexing your site.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Chris
    Nuke Active Member
    Nuke Active Member
    Posts:32


    --
    06/08/2010 12:20 AM
    Great. Thanks again, Joe.
    ~Chris
    leto
    Nuke Newbie
    Nuke Newbie
    Posts:2


    --
    06/17/2010 1:00 AM
    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
    !
    Jernej
    Nuke Newbie
    Nuke Newbie
    Posts:8


    --
    09/05/2010 5:28 AM
    I can't make menu centerd on page, can somebody help me?
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    09/05/2010 8:29 AM
    You can do something like this:

    < div class="myMenu">
           < div class="myMenu1">
                  < dnn:SOLPARTMENU runat="server" id="dnnSOLPARTMENU1" />
           < /div>
    < /div>

    Then, style myMenu1 to be less in width than myMenu, and also set it to margin:auto.  That will center myMenu1 in myMenu.  You may need to play with padding to get the left side of the menu exactly where you want it.  Remember that adding menu items will require changing the style.  You may also find that setting the display mode to inline may make some styling easier.

    Hopefully, someone has a better suggestion.

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Martin Petersen
    Nuke Newbie
    Nuke Newbie
    Posts:4


    --
    01/23/2011 9:53 AM

    I have just worked my way through the tut's regarding the Nav Menu Provider - excellent tut's

    Now, I have implemented ALL that's been shown in the tuts, but the 2 things that WASN'T covvered, seems to be the 2 thing's I am having problems with...

    Root menu Items works like a charm - no problems there.

    Sub menu items also works excellent...

    My problem is .first and .last - Oh, and those WERE covered - the uncovered items I'll get back to later....

    When setting a background image to those 2 items, I get a second cell for those menu-items, which also shows the background image, and that messes up the menu-design - I expect it to be ShowChildren cell for the submenues, since the cells appear to the right of the menu item itself.

    So Question : How do I hide those cells for those 2 menu-items?

    Next, the things, that wasn't covered :

    BREAK and ICN.

    I cannot seem to get a menu-break into my menu... I've set the .break class to show a background image, but it wont show...it doesn't even show the 1px solid red - border, that i've set (as per recommendation in the tut's)
    The break-class is set on the .m class and the .mi class (like this : .m .break and .mi.break td)

    Secondly, I really want the ICN class hidden - througout the Menu - and also the Indicate-children cell (which I suspect is causing the problem mentioned in regards with .first and .last classes)

    So, I really need some guidance.... or just spin me around and point me in the correct direction

    Kinde regards,

    Martin Moesby

    Martin Petersen
    Nuke Newbie
    Nuke Newbie
    Posts:4


    --
    01/24/2011 5:51 AM
    A tiny update on this question: I've managed to get the menu look as designed, by NOT padding the ".menu .m" class, instead the I've padded the ".menu .m .txt" class and setting the background image for the ".menu .mi td" class... But I still have an issue with the ".break" class.. When setting a background on the ".menu .m" class, the seperator defined in the ".menu tr.mi" class shows up...., but if the backgound images is defined in the ".menu .mi" class, the seperator is not visible - I guess it's being overridden by the ".menu .mi td" class... So, if anyone's gor some kind og direction I should turn, I'd be really appreciative
    Martin Petersen
    Nuke Newbie
    Nuke Newbie
    Posts:4


    --
    01/24/2011 10:00 AM
    Problem solved.!
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    01/24/2011 12:45 PM
    Great!  What was the secret?

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Martin Petersen
    Nuke Newbie
    Nuke Newbie
    Posts:4


    --
    01/24/2011 6:19 PM
    Hehe, yeah, that's a little complicated, but I will try to answer the best i can.

    First, I have to explain, what caused the issue in the first place:

    Every .mi item consists of 3 td cells : 1 for the icon, 1 for the menu text and 1 for the child indicator.

    the 1st cell is hidden using menu .m .icn { display:none; } - so that wasn't difficult
    2nd cell - well, that's gotta be there
    3rd cell is hidden  using the "IndicateChildren=False" on the Nav SkinObject.

    BUT - and this caused me many hours of grief - when padding the .menu .mi class, the 3rd cell becomes visible again - with the same width that .menu .mi is padded with (i.e. padding:15px caused the 3rd cell to be 15px wide) ... and if the .menu .mi  class also has a background-image definition, that definition applies to all 3 cells in the .mi class - and thus the image will also be shown in cell 3, and that can sometimes mess up the menu-design..

    Everybody with me so far??

    So, I solved this my NOT padding the .menu .mi class - which of course made the menu text appear directly along the left side og my menu - not nice.

    Instead I padded the .menu .m .txt class....
    Problem solved

    Now, about the seperator...., well I just added the seprator graphics to the bottom image and fixed the other seperator images by using the .menu tr.mi class...
    Another problem solved....

    I hope everyone understands this, since it's the best explanation I can come up with.

    But I have to mention that:

    1) I am used to style the SolpartMenu, and have never used the Provider system
    2) The namespace/class styling of the NavigationProvider is a hell of a lot easier than the "Old School" styling, and I would never have figured it out, if it hadn't been for issue 52

    You can se the preliminary design at dev.hifi4all.dk - issues with Browsers other than IE - the top Menu item doesn't show correctly (even though it did on one of my develpment PC's)...

    That design calls for a First and Last menu item that's styled differently than the middle menu items...


    I'll post my entire Menu stylesheet, if anyone want's to see it....

    Regards,

    Martin Moesby
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    01/25/2011 9:29 AM
    Thanks for the explanation!

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Web Services
    Nuke Master
    Nuke Master
    Posts:322


    --
    02/16/2011 4:16 PM
    I watched your tutorials, very helpful. What I was wondering is how I can get the whole sub menu of a sub menu
    basically my menu structure is
    home
    ...item1
    ......item2
    ......item3
    ......item4

    The children of item 1 have a gap in the flyout between them and the first flyout. How can I get the style for the whole box of the item2-4? I can get a child in that by going to
    .NavMenu .mi1-0-0 td

    But I need the whole item, not just one element. I hope that makes sense.

    Glen Stewart
    Nuke Newbie
    Nuke Newbie
    Posts:2


    --
    03/10/2011 10:25 AM
    I have styled an image only NAV menu and Internet Explorer is not rendering it correctly, while both Chrome and Firefox render the menu correctly. Specifically, the wrong image is being displayed on IE when hovering. Has anyone seen this before? Here's some more information that I hope will help.

    The menu has 3 options, and so there are 6 images. One image each for the normal state, and one image each for the hover state.

    img1.png, img1_hov.png
    img2.png, img2_hov.png
    img3.png, img3_hov.png

    On IE, when you hover on menu option 1, or menu option 2, or menu option 3, img3_hov.png is displayed.

    On Firefox, and Chrome, when you hover on menu option1, img1_hov.png is displayed, when you hover on menu option 2, img2_hov.png is displayed, and when you hover on menu option 3, img3_hov.png is displayed.

    This menu is set up as an unordered list menu.

    Thanks for any assistance you can provide.
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    03/10/2011 5:28 PM
    My only guess is that there is a subtle mistake somewhere in either your html or css that FF and Chrome overlook and that IE doesn't overlook. It happens to me ALL THE TIME!

    Joe Craig, Patapsco Research Group
    Complete DNN Support
    Glen Stewart
    Nuke Newbie
    Nuke Newbie
    Posts:2


    --
    03/14/2011 10:33 AM
    Yeah, I hate those subtle mistakes. They are so hard to find without another pair of eyes looking at it.

    With that in mind, if I am unable to find the problem, I'll post some code and the web site (when it's live) here so others that are interested can have a look at it.

    Thanks.
    Joseph Craig
    DNN MVP
    Posts:11667


    --
    03/15/2011 6:43 PM
    I hate 'em, too!

    Feel free to post (attaching files is a good idea) and maybe there's a good pair of eyeballs somewhere!)

    Joe Craig, Patapsco Research Group
    Complete DNN Support


    ---