Quick Nav:  Online Store   |   Login | Register

CSSNav Menu Configuration

Rate this topic:

Please Register to post a reply. Another benefit of registration is the ability to subscribe to and recieve notifications of new posts.
AuthorMessages
packrat
<100 Posts
Posts:64


01/27/2007 11:49 AM  
Hi John,

This is a continuation of our discussion that started in the DNN Forums:

http://www.dotnetnuke.com/Community/ForumsDotNetNuke/tabid/795/forumid/109/threadid/101119/scope/posts/Default.aspx

I have set the property  OnlyExpandActive="True"

I have set the level to "1-99"

Nothing has changed.  The left hand menu still only shows the child tabs and none of the sub child tabs. The sub child tabs have the child tabs set as their parent in the DNN portal.  Does that cause problems?

Anymore suggestions?  I will continue to work with it...maybe I'll figure something out.  I'll let you know.

Thanks for all your help,

Paul
John Mitchell
Posts:3248


01/28/2007 12:49 AM  
Hi Paul,

I just checked again and it worked for me. Maybe we are expecting different things. Here is the code I am using:
<Snapsis:NavMenuid="NavTabs"DisplayIcon="True"OnlyExpandActive="True"Level="1-99"Type="Tabs"ExcludeTabs="Admin,Host"runat="server"/>


When I have a Child Tab (Level 1) under Home (Level 0), and a Sub Child Tab (Level 2) under the Child, then I can click on Home and it will only show the Level 1 Child Tab.
Then when I click on the Child tab it will show its children.

packrat
<100 Posts
Posts:64


01/28/2007 5:05 PM  
Hi John,

I've been working with the menu all weekend and still cannot accomplish what I'm after. Let me resummarize:

I have the horizontal Snapsis menu working fine. All items it contains are parent items (level 0). One of these items is called Athletics and has 15 child items (level 1).

I want to break these child items up into groups of 3's and display them in their own panes. An example would be like this:

Fall Sports - (non link-Pane Title Header Image)
>Football
>Golf
>Soccer
Winter Sports (non link-Pane Title Header Image)
>Basketball
>Volleyball
>Wrestling
Spring Sports (non link-Pane Title Header Image)
>Baseball
>Tennis
>Lacrosse

Here's what I seem to be running into when doing this.
By setting the properties of the 1st side menu to this:
DisplayIcon="True"
OnlyExpandActive="False"
Type="ActiveChildTabs"
ExcludeTabs="Admin,Host," runat="server" />

I get all child tabs of the parent link (Athletics) which is probably the way it is suppose to be. I thought I could drop several instances of the menu down the left hand side of the page and use the ExcludeTabs orIncludeTabs to get the child items I wanted for each instance of the menu. This doesn't work and I suspect it is because this property only works on the parent level. Is this true? I really don't want to turn all pages within my portal to parent pages to accomplish this only because I suspect that will cause problems later when building a site map. I know the property works at the parent level because my horizontal menu is configured to exclude the home tab. Any further help would be appreciated

Thanks,

Paul
John Mitchell
Posts:3248


01/28/2007 9:37 PM  
Hi Paul,

I don't think you need more than one other instance of the menu for the vertical children. It may be that just trying to use the ActiveChildTabs with the OnlyExpandActive is causing the problems. The ActiveChildTabs type does work on all levels, but will not show the levels above it, it will only show the level below the curently active one. So I think for the vertical menu that you want the Type="Tabs" and then set Level="1-2".

I'll try to configure one the way you are describing. If I understand right, you have the Athelitics tab as the parent, and that menu structure you are displaying as it's children. If you are on the home tab, then I am assuming you do not want to see the children under the Athletics tab. This may turn out to need a little more coding so that instead of currently active children, that it displays a full menu of specific levels under an active parent all the time. There is another setting for doing something like that called "Show" which you can set to Show="WithActiveParent". You can also set Show="Always" and Show="ChildrenOnly".

I know that all of these settings get confusing because of the overlapping nature, but to get seperate instances to do all the different variations of what people wanted it grew into this. The thing to remember about the different settings is to try and just use the minimum to accomplish what you want. In other words, the Level property might not apply, etc.

One other thing, to display the grouping that is not clickable, you just need to set those tabs/pages to disabled in the page settings. I believe the menu on the home page of Snapsis.com is pretty close to what you are wanting to do for that.
packrat
<100 Posts
Posts:64


01/29/2007 7:21 AM  
Ok John...I will continue to work on the combination of properties to try an achieve what I'm after. Thanks for the reminder on the disabling of a page to make it non-clickable. That makes having only one instance of the menu for the children understandable. Still want to know if the exclude/include property is only applicable to parent tabs? It would be nice if the developer's guide was updated to list all the possible properties and some example scenarios. I will work on geting my site live so that I can give you a URL for a visual. For now, I will try to explain it here:

Top right hand header menu:

Home-Contact Us-Site Map (This appears on every page in the site. Located in the top right hand corner of the header. I have this working as I want with the following code.)



Horizontal Nav Menu:

About Us-Academics-Admissions-Athletics-Calendar-Campus Life-Fine Arts-Giving (These are all parent pages with no children showing. I have this working as I want with the following code)



Side Menu for any selected parent page. I will use Athletics as my example:

Booster Club (child link to athletics)
Driving Directions (child link to athletics)
Nest Notes (child link to athletics)

Fall Sports (disabled child link to athletics - non clickable and styled independently of other athletic child links)
-Football (sub child link to Fall Sports)
-Golf (sub child link to Fall Sports)
-Volleyball (sub child link to Fall Sports)

Winter Sports (disabled child link to athletics - non clickable and styled independently of other athletic child links)
-Basketball (sub child link to Fall Sports)
-Wrestling (sub child link to Fall Sports)
-Soccer (sub child link to Fall Sports)

Spring Sports (disabled child link to athletics - non clickable and styled independently of other athletic child links)
-Baseball (sub child link to Fall Sports)
-Lacrosse (sub child link to Fall Sports)
-Tennis (sub child link to Fall Sports)

This is where I need help in uderstanding what properties to set in the ASCX page, if I do/don't need multiple instances or separate panes and what the structure (classes) of the CSS would look like. My CSS for all menus at this point is this:

/*affects all menus? */

.TabList {

float :left;

}
.TabList ul {

clear:both;
margin:0;
padding:10px 10px 0;
list-style:none;
display: inline;
}

.TabList li {
float:left;
margin:0;
display: inline;
padding:0 0 0 2px;

}

.LinkIcon {
border:0;
padding-right:2px;
}

.TabList li a {
font-family: Georgia, Tahoma,San-Serif;
font-size:14px;
voice-family: "\"}\""; voice-family:inherit;
line-height:normal;
}



/*new header menu work */

#ParentTopMenuContainer {

margin-left: 600px;

height:30px;
background-color: transparent;

}

#TopMenu a {

display:block;
font-size: 10px;
padding:0px 0px 0px 0px;
text-decoration:none;
font-weight:bold;
color:#f1f1ff;

}

#TopMenu a:hover {
text-decoration:none;
color:#9b0505;
}

#TopMenu li
{

}

#TopMenu li:hover {

}

#TopMenu .SelectedTab {
background-position:0 -150px;
border-width:0;
}
#TopMenu .SelectedTab a {
background-position:100% -150px;
padding-bottom:5px;
color:#FFFFFF;
}

/*new horizontal menu work */


#ParentTabsContainer
{
float: left;
width: 100%;
height: 30px;
background-color: black;
background-image: url(../Images/menu.jpg);
background-repeat: repeat-x;
}

#ParentTabs a {
float:left;
display:block;
width:75px;
text-align:center;
padding:6px 5px 4px 20px;
text-decoration:none;
font-weight:bold;
color:green;

}

#ParentTabs a:hover {
text-decoration:none;
background-position:100% -150px;
color:#F5f5f5;
}

#ParentTabs li {

}

#ParentTabs li:hover {

}

#ParentTabs .SelectedTab {
background-position:0 -150px;
border-width:0;
}
#ParentTabs .SelectedTab a {
background-position:100% -150px;
padding-bottom:5px;
color:#9b0505;
}


/* IE-PC doesn't see these child selectors but CSS2 compliant browsers can make use of them
#NavTabs > ul a {width:auto;}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#NavTabs a {float:none;}
/* End IE5-Mac hack */

/*new vertical menu work */

#NavTabsContainer
{
float: left;
width: 215px;
height: 100%;
background-color: black;

}

#NavTabs a
{
width: 185px;
float: left;
text-align: left;
font-size: 14px;
padding-left: 30px;
padding-top: 2px;
padding-bottom: 2px;
text-decoration: none;
color: #f5f5f5;
background-image: url(../Images/sidemenu.jpg);
background-repeat: no-repeat;
}

#NavTabs a:hover {

color:#b9201b;
}

#NavTabs li {

}

#NavTabs li:hover {

}

#NavTabs .Level1 {
padding: 0px 0px 0px 0px;
border-top: #f5f5f5 1px solid;

}
#NavTabs .Level1 a {
font-weight:bold;
}

#NavTabs .Level2 {
padding-left:12px;
}
#NavTabs .SelectedTab a {
font-weight:bold;
border-left:4px solid blue;
background-color: blue;
color:#000;
}
#NavTabs .DisabledTab {
color:#000;
font-weight:bold;
padding-left:4px;
width:165px;
}

Thanks for your continued help. Your support is truly appreciated.

Paul
packrat
<100 Posts
Posts:64


01/29/2007 8:52 AM  
Hi John,

I was able to get the side menu set up and get the separation I needed by creating pages to act as headings and then disabling them. I am using the #disabledtabs class to set the styling for these headers. All of the pages are child pages to the Athletics parent page. Just out of curiosity, I created a sub child page to one of the child pages, but could only get it to show up by setting the Show property to "Always". The only problem is it shows all child tabs and sub child tabs from every parent page. I tried "WithActiveParent" but it reverted back to only showing child tabs with no sub child tabs. I tried "Children Only" and the page throws an error. I have tried Level="1-2" and "1-99". I also have changed the Type="Tabs" and "ActiveChildTabs" in conjunction with the Level and Show properties but cannot get the sub child tabs to display. Like I said, they only display when I set the Show property to "Always", but this is not desirable because all child and sub child pages from every parent displays. I'll go with what I've got for now but am still interested in getting my questioned answered about the Exclude/Include Property only being specific to parent items? If this property could be applied to child items, it would definitely make the menu much more flexible. Once again, thanls for any response and for allowing me to ramble on your forums. I try to explain things thoroughly in case someone else out there is new to the menu and can use our dialogue to make some headway.

Paul
John Mitchell
Posts:3248


01/29/2007 9:37 AM  
Hi Paul,
I appreciate your details and your patience. I don't know if anyone has actually tried to do exactly what you are doing so this infrmation can be very helpful.

The IncludeTabs and ExcludeTabs work for all levels, but if you exclude a parent it will also exclude all it's children.

It sounds like you are really close, but I may still need to add one more option for displaying only children of the active root level tab all the time.

Reply to the notification you get from this postl directly through e-mail, or use my profile to send a direct message and I'll send you a new version that has this option.

Also, if you want to send me your current skin, I can work with that to make sure it will do what you want.
Please Register to post a reply. Another benefit of registration is the ability to subscribe to and recieve notifications of new posts.
Forums >Snapsis Product Support >CSS NavMenu > CSSNav Menu Configuration



ActiveForums 3.7
Powered by: Snapsis Software