I have been playing with DotNetNuke for a few months, but I have never actually created a production site with it. I kind of like to get my knowledge to a certain level before taking the plunge and actually using a framework on a client's project - there is no turning back!

My designer has supplied me with the visuals for the site and I want to follow the design very closely. The part that is confusing me at the moment is how I will achieve the desired effect with the site navigation. Here is an image that shows how the navigation should look:

The top-level navigation items will be listed horizontally along the top of the content and the next level of sub-categories will be listed vertically down the left hand side of the content. I am trying to create the site with pure CSS and would like to avoid using navigation modules that rely on tables. How would you suggest recreating this navigation using DotNetNuke?

I've tried HouseMenu but don't feel that it has all of the options necessary to recreate these menus. I would really appreciate if you could put together some reviews of the various navigation systems available for DotNetNuke - much in the same way as you have done for News Article modules and Gallery modules...

I'm guessing that in order to recreate the top-level nav, I will need to be able to specify a separator character to the menu - I have seen this option is available in Inventua TopMenu, but is it any good? It says it only displays horizontal menus, any more versatile nav systems that support separator characters?

Any help will be greatly appreciated ! :-)

One thing I forgot to mention, the "Section title" at the top of the vertical sub-navigation needs to contain the name of the currently selected top-level category...

You should be able to create the horizontal top-level menu with HouseMenu or any other menu. The separators would be part of the menu styling. I'm not well versed in the HouseMenu, so I'll defer to Lee to give you some more details as to whether or not you can accomplish the horizontal + vertical menu items using HouseMenu.

As for the vertical menu, are there second (and possibly third) level menus that are supposed to appear below the Section Title?

I've used NavMenu from Snapsis.com on a site, and I do know that you could do the horizontal top-level menu and vertical lower level menus using it.

As for the Section Title. You might need to do these manually? Is that title also supposed to change as you visit the lower level menu pages?

Hi craig,

Thanks for your quick response - much appreciated.

If CSS styling was used to recreate the separators in the horizontal nav, how would I specify that the last item didn't get followed by a pipe (|) character... ? For example if a border-right was used, I would imagine it would look like this:

HOME | ABOUT | RENOVATION | HISTORY | WILDLIFE | SCHOOLS | COMMUNITY |

With regards to the Section Title, could you elaborate on what you mean by doing them manually? How would you approach that? Could a Breadcrumb be used in some way to achieve the desired affect if it were reconfigured appropriately?

The section title does not need to change when visiting the lower level pages, it should always show the top level section you are in...

Thanks again for your suggestions =)

Some quick answers ...

Your border-right question: Hmmm, don't know ... maybe some other way?

Section Title: I was thinking that you might have to stick in a text/HTML module that contained the title. Perhaps there's a better way.

As I said, I'm hardly the expert on menu styling, etc. But those were ideas that came to mind with at least 15 seconds of thought. I'd LOVE to hear/see some other ideas.

Craig,

I have found that pretty much all of the tutorials for horizontal CSS nav with separators are pretty much the same as the following:

http://www.monkeyflash.com/css/simp...vbar-list/

Basically, they recommend using border-right for all items, then set an additional class on the final item to clear the borders. This is all well and good if you are creating static HTML or writing the code to generate the navigation yourself, but when you are using DNN modules you are at the mercy of the original creator to provide you with the necessary features. All I really need is a "final-list-item-cssclass" option on the menu and then I can achieve that effect.

As a .NET developer, it's very frustrating when you first move into a framework that dictates the way you work. Frameworks can allow you to achieve the most complex results in no time at all (i.e. adding a forum to your site), but then the simplest things can seem so difficult - horizontal nav with separators (hardly rocket science :-). If I get properly involved with DNN, I will probably end up writing my own modules. I already have the Professional DotNetNuke 4 book by Wrox but haven't read about building modules yet, just skinning and customisation.

I have just looked at the configuration options for the breadcumb skin object - no luck there! Somebody must have needed to include a section title before now, there are plenty of real world examples of sites that operate like that. I'm sure it is just my lack of knowledge that is preventing me from achieving the desired result.

I really want to start using DotNetNuke in more of my projects - I love the concept. However, until I understand how to achieve these basic goals, I tend to shy away from using it. If a client says, "can we have X and Y", it's not nice to be in a position where you have to say, "I'm not sure really".

put <%= Page.Title %> into your skin to show the current page title

however DNN exposes public objects (PortalAlias... and such) that have loads of properties like portal name, portal name etc.

i came across a site a few days ago that showed examples of doing this sort of thing but silly me i didn't bookmark it.

I appreciate your comments.

Here are some additional suggestions.

For the menu, I believe that you can easily specify a background image to each menu entry.  It might be possible to get your separators in that way.

I use Snapsis' NavMenu on a site because it allowed me to so some things that I couldn't figure out how to do with other menus.  I got them to even add a feature or two that I needed, so a final-list-item-cssclass might not be out of the question. 

It does take a while to get grounded in DotNetNuke.  But, the more that you dig in, the more you learn.  I've been meaning to add Xmod and Listx to my repertoire, as it seems they provide semi-customization without having to add module code.  I've also written modules as needed.  It might be fun to go back and see if I could have done the custom stuff with one of these modules.

I also believe that the "can we have X and Y" question can always be answered in the affirmative if you think that you could do it directly with html/javascript/etc.  I've yet to encounter things that can't be done within the framework, and the framework provides lots of tools that make some of these things very easy.

If/when you get to the module development part, I'd also recommend that you add dotnetnuke.adefwebserver.com to your list of DNN links.  There's some quite good stuff there! 

And, I'd also probably recommend that you resist the urge to create custom modules until you find it absolutely necessary. 

I'll start calling you Joe now :-) Oops!

The background image is a great idea for something to try - I will have a play with that now. I'm currently at the stage of building up the site in static HTML - I'll post a link if I get the background image thing working.

In all honesty, out of all of the menu systems that I have seen so far, the snapsis menu looks the most versatile. I'll have a look into it.

I am totally confident that I can achieve the results that I require in HTML/JavaScript/ASP.NET - my anxiety lies with my ability to translate that into DNN. I take heed of your warning about resisting the urge to create custom modules, however, I feel that the process of locating a module that will serve a particular purpose can be time consuming.

Would you agree with me in that it is often necessary to download several module offerings from various vendors that all work in slightly different manners and then performing an evaluation? When it is something simple you want to achieve, this can seem long-winded.

If everything I have said is slightly misguided then please tell me I am wrong :-) I really want somebody to help me build the case for moving to DotNetNuke for more of my work. I am simply trying to weigh up the cases for "Build from scratch" vs "use DotNetNuke".

I have built several proprietry CMS systems in the past and have always wished that I could incorporate as many features as DotNetNuke provides, but working by myself that is a massive task.

Thanks for all of your advice.
Cheers,
Adam

OK. I'll call you Adam!

Rather than download modules, it may be more efficient to describe the requirements and ask for some feedback here. Collectively, the readers of this forum have a lot of experience!

Purchased modules are a great solution, provided that they do what they should do.

As for as the DNN vs. build ... you can get a lot done in a few minutes with DNN. You really can build a site, and start adding content. I was originally drawn to DNN for the user/login/registration/security roles/admin functions that it includes.

The static HTML for the site so far is as follows:

http://www.sinconta.com/sites/churchyard/

Just to follow up:

The HouseMenu creates an individual id for each element in the menu, so if you create an overall right border, you will then be able to create a CSS class which removes the right border for the last menu item on the right side.

(This is based on your client not adding further pages to the top menu)

The site which mentions tips for page titles in skins etc. was probably the tips and tricks section in snapsis

Submenus: The HouseMenu will be capable of doing this, but it does require jumping through a few hoops. - Take a look for instance at the articles page, on the left hand side are the sub menus for the articles page. - This is setup by creating a separate skin for each of the main pages, which is not ideal.

I have outlined how this is done in this tutorial:
How to create Horizontal CSS menus in DotNetNuke using the HouseMenu

you will just have to apply it to a vertical sub menu rather than a horizontal one.

I would look at the snapsis menu though as it should be easier to configure for the sub menus that you require. - I have not used the snapsis menu yet, but will be looking at it soon.

Thanks,

Excellent tips, thanks Lee - much appreciated. I'll post again when I get somewhere with this.

Right, an update as to my progress... I have got as far as building the static HTML, this can be seen at:

http://www.sinconta.com/sites/churchyard/

I have now tried to translate this into a skin and I have encountered some problems.

I have created a DotNetNuke instance and set the skin I have created so far as the default site skin, this can be seen at:

http://www.sinconta.com/sites/churchyard/nuke/

I know there aren't any login controls etc, it's just the main layout I am worried about at the moment. I have the following problems:-

- Images aren't showing, what is the path to the images that I put in the skin folder?
- I put global styles for the a & h1 tags in the CSS, these have been overridden

My skin so far can be downloaded from:

http://www.sinconta.com/sites/churchyard/Skin.zip

I had a brief search for "skins in images" but it didn't return anything useful.

Any help would be a god-send in these early stages of my DotNetNuke career :-)

Cheers folks,
Ads

You can put the images in the base directory of your skin, or you could create an images subdirectory. I've seen it done both ways.

If you put the images into the base directory, just refer to filename.ext in your skin.css file. If they are in an images subdirectory, refer to images\filename.gif.

If you put your skin's styles in your skin.css file, they shouldn't be overridden.

If you are still struggling, it would probably be worth your time looking at the simple red leaf pure CSS skin and view some of the code in there.

If you are having problems with overridden classes, I use the web developers toolbar to troubleshoot these to investigate how they are being overridden and how you can prevent it etc. - The first step I do is to strip the code from the default.css file to see if this fixes the problem and then to compare the code in the default.css with the code in the skin.css to see which elements you need to override that are already pre-programmed in the default.css file. - These techniques are outlined in: Troubleshooting DotNetNuke Skins and when you use the web deveopers toolbar they are only implemented to the live site in real time and not saved, so you can happily strip out code without losing the work you have already done.

Introduction to CSS and inheritance in DotNetNuke skins
may also be of interest

Hope this helps,

Hello Everybody,

I have got past all of my initial teething troubles and have achieved the desired effect with the navigation. I thought I'd come back and explain how I managed it.

I purchased the Developer Edition of the Snapsis CSS NavMenu. I must say that I am extremely impressed with this module, it enabled me to achieve the desired effect with ease!

After installing the module to my DotNetNuke installation, I then registered the module in the ASCX file, like this:

<%</FONT><FONT color=#0000ff size=2>@</FONT><FONT size=2> </FONT><FONT color=#a31515 size=2>Register</FONT><FONT size=2> </FONT><FONT color=#ff0000 size=2>TagPrefix</FONT><FONT color=#0000ff size=2>="snapsis"</FONT><FONT size=2> </FONT><FONT color=#ff0000 size=2>Namespace</FONT><FONT color=#0000ff size=2>="Snapsis.DNN.Skins"</FONT><FONT size=2> </FONT><FONT color=#ff0000 size=2>Assembly</FONT><FONT color=#0000ff size=2>="Snapsis.DNN.NavMenu"</FONT><FONT size=2> %>

In order to create the primary navigation (horizontal), I placed the following tag in my ASCX file:

<snapsis:NavMenu ID="snmprimary" runat="server" Level="0-0" Type="Tabs" ExcludeTabs="Admin,Host" />

This means that an Unordered List (

element) is generated for level 0 (root level) pages only. I then applied the following styling to achieve the effect that I wanted:

#snmprimary ul
{
margin-left:238px;
padding:14px 0;
list-style:none;
display: inline-block;
}

#snmprimary ul:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* Hides from IE-mac \*/
* html #snmprimary ul
{
height: 1%;
}

#snmprimary ul
{
display: block;
}
/* End hide from IE-mac */

#snmprimary ul li
{
padding:0 2px;
border-right:solid 1px #cfcece;
list-style:none;
float:left;
text-transform:uppercase;
}

#snmprimary ul li.Last-Child
{
border:none;
}

#snmprimary ul li a
{
text-decoration:none;
padding:0 3px;
}

Describing the CSS in detail is beyond the scope of this post. One point that is worth mentioning is that the Snapsis CSS menu gives the first list item the class First-Child and the last list item the class Last-Child. This enabled me to stop the separator from appearing after the last menu item!

Lee - I tried using the HouseMenu and using the unique ID as you suggested, but when you select the last menu item, the ID changes to CurrentItem (or something similar), therefore making the separator appear.

The secondary navigation (vertical) was achieved by placing the following code in the ASCX:

<h1 class="sectiontitle"><%</FONT><FONT color=#0000ff size=2>=</FONT><FONT size=2>PortalSettings.ActiveTab.BreadCrumbs(0).TabName%>h1>
<snapsis:NavMenu ID="snmsecondary" runat="server" Level="1-1" Type="Tabs"
ExcludeTabs="Admin,Host" ShowType="WithActiveParent" />

The first part gives us the section title - I found this in the Snapsis FAQ as you fathomed out Lee- thanks! The second part gives us the secondary nav, it ensures that level 1 (first level off root) is displayed for the currently active parent.

The CSS to style it was as follows:

#snmsecondary ul
{
list-style:none;
}

#snmsecondary ul li
{
list-style:none;
padding:12px 0;
background:url(images/navseparator.gif) repeat-x scroll bottom;
}

#snmsecondary ul li.Last-Child
{
background:none;
}

#snmsecondary ul li a
{
text-decoration:none;
}

Hopefully, this will help somebody else.

If you would like to see the DNN site so far, please check:

http://www.sinconta.com/dnn/churchyard/

Thanks for all of that info, it's a good read