Thanks for a cool package. One question though. Im trying to usen the package as a topnavigation using level 1. And a side navigation for level 2 and below. Much like the example given.
But when navigation bleow level1, the "Selected" class i removed from the top menu... I would like to keep the level1 parent "Selected" i my css. Is there a setting for this in the macro or must i change something in the xslt?
Yes this can all be done with the macro settings, however you may need to modify your styles slightly.
On your top navigation ensure that you have Select Branches ticked.
This will then append the class you specify in the Brach Class when you are in pages that are children of that node.
Either specify your Brach Class (in the top navigation) to be selected or define a new CSS class.
This setup allows you to have different styles for items which are selcted i.e. you are on that page over pages which are just in the hierachy of the current page.
Here's the top level navigation example tweaked to show you what I mean:
<style> /*Class applied when the node is actually selected*/ .horizontal .selected {font-weight:bold;}
/*Class applied when the node is not actually selected but is an ancestor of the currently selected page */ .horizontal .ancestorSelected {font-weight:bold;} </style>
Hope this helps.
Any more quesitions, don't heistate to ask. Also don't forget to vote this package up if it works for you.
On a side note, the Beta version is nearing realese now which wil have facilities for forcing it to show the home node in the top navigation and a few other tweaks!
What are the right settings to show a dropdown submenu list for each headitem? In the forum your project is mentioned to do it but after days and days of triying I am not able to find the good settings to have a dropdown list, thank ya! yay!
IM also using a dropwdown list and want it to keep all children in all level from the homepage visible.
Im trying to use the Forcenode and putting it to the homepage but as soon as I click a subpage to the homepage, all children of the other subpages dissapear..
@froad ... not sure if you have already solved your problem, but I was able to do so and thought I would share the solution.
When using the menu as a dropdown that should be displayed on every page, I had the same problem that it would not display child menus after navigating away from the homepage. I edited the "[COG]Navigation.xslt" file, near the very bottom, I removed the following condition when testing if it should recurse through the children:
and $currentPage/descendant-or-self::node[@id = $currentNodeID]/child::node
That makes the new code look like:
<!-- if it's a branch recurse through it's children--> <xsl:if test="((($isBranch = 1 and $recurse = 1) or ($walkChildren = 1)) and $maxMenuDepth >= $calculatedMenuDepth)"> <xsl:call-template name="nodeIterator"> <xsl:with-param name="parentNode" select="." /> <xsl:with-param name="pseudoCurrentPage" select="$pseudoCurrentPage" /> </xsl:call-template> </xsl:if>
Now the child pages show up in the menu regardless of what page I'm on. I have no idea what impact this will have on the functionality if the menu is not being used as a dropdown, but it works great for my purposes.
keeping level1 selected
Thanks for a cool package. One question though. Im trying to usen the package as a topnavigation using level 1. And a side navigation for level 2 and below. Much like the example given.
But when navigation bleow level1, the "Selected" class i removed from the top menu... I would like to keep the level1 parent "Selected" i my css. Is there a setting for this in the macro or must i change something in the xslt?
Hi,
Yes this can all be done with the macro settings, however you may need to modify your styles slightly.
On your top navigation ensure that you have Select Branches ticked.
This will then append the class you specify in the Brach Class when you are in pages that are children of that node.
Either specify your Brach Class (in the top navigation) to be selected or define a new CSS class.
This setup allows you to have different styles for items which are selcted i.e. you are on that page over pages which are just in the hierachy of the current page.
Here's the top level navigation example tweaked to show you what I mean:
Hope this helps.
Any more quesitions, don't heistate to ask. Also don't forget to vote this package up if it works for you.
On a side note, the Beta version is nearing realese now which wil have facilities for forcing it to show the home node in the top navigation and a few other tweaks!
Tim
What are the right settings to show a dropdown submenu list for each headitem? In the forum your project is mentioned to do it but after days and days of triying I am not able to find the good settings to have a dropdown list, thank ya! yay!
IM also using a dropwdown list and want it to keep all children in all level from the homepage visible.
Im trying to use the Forcenode and putting it to the homepage but as soon as I click a subpage to the homepage, all children of the other subpages dissapear..
@froad ... not sure if you have already solved your problem, but I was able to do so and thought I would share the solution.
When using the menu as a dropdown that should be displayed on every page, I had the same problem that it would not display child menus after navigating away from the homepage. I edited the "[COG]Navigation.xslt" file, near the very bottom, I removed the following condition when testing if it should recurse through the children:
and $currentPage/descendant-or-self::node[@id = $currentNodeID]/child::node
That makes the new code look like:
<!-- if it's a branch recurse through it's children-->
<xsl:if test="((($isBranch = 1 and $recurse = 1) or ($walkChildren = 1)) and $maxMenuDepth >= $calculatedMenuDepth)">
<xsl:call-template name="nodeIterator">
<xsl:with-param name="parentNode" select="." />
<xsl:with-param name="pseudoCurrentPage" select="$pseudoCurrentPage" />
</xsl:call-template>
</xsl:if>
Now the child pages show up in the menu regardless of what page I'm on. I have no idea what impact this will have on the functionality if the menu is not being used as a dropdown, but it works great for my purposes.
Cheers!
- AJ Dyke
Thanks AJ this is what I needed too.
Tim can we have this as an option one day please?
Hi Tim,
You're package has done me very well thanks for the work.
Problem I'm having is the classes are are being put together in weird ways, ending up with stuff like this:
Top level selected:
Sorry, I was being a bit dense...
The following worked fine :)
TOPNAV
<umbraco:Macro
startingLevel="1"
recurse="0"
selectBranches="1"
maxMenuDepth="1"
ulBaseClass="topnav"
branchClass="ancestorSelected"
selectedClass="selected"
Alias="[COG]Navigation"
runat="server">
</umbraco:Macro>
SUBNAV
<umbraco:Macro
startingLevel="2"
recurse="1"
selectBranches=""
maxMenuDepth="1"
ulBaseClass="subnav"
branchClass=""
selectedClass="subnavselected"
Alias="[COG]Navigation"
runat="server">
</umbraco:Macro>
And the css to style it out:
ul.topnav {
height: 40px;
margin: 0px;
padding: 0px;
float: left;
font: 0.8em Verdana, sans-serif, Arial;
width: 100%;
overflow: hidden;
background: #0094A4;
border-bottom: 2px solid #CF7417;
}
ul.topnav li {
display: inline;
}
ul.topnav li a {
padding: 12px 16px 12px 16px;
float: left;
border-right: 1px solid #52B6C1;
color: white;
text-decoration: none;
background: #0094A4;
}
ul.topnav li a:visited {
color: white;
}
ul.topnav li a:hover {
color: #ffffff;
text-decoration: none;
background: #666666;
}
ul.topnav .selected {
color: #ffffff;
text-decoration: none;
background: #666666;
}
ul.topnav .ancestorSelected {
color: #ffffff;
text-decoration: none;
background: #666666;
}
ul.subnav.lv1 {
font: bold 0.7em sans-serif, Arial, Verdana;
margin: 0px;
padding: 0px;
list-style: none;
}
ul.subnav.lv1 li {
margin: 0px;
padding: 0px;
}
ul.subnav.lv1 li a {
border-top: 1px solid #eeeeee;
background: #cccccc;
color: #000000;
display: block;
width: 176px;
padding: 10px 5px 10px 5px;
}
ul.subnav.lv1 li a:hover {
background: #dddddd;
color: #0094A4;
text-decoration: none;
}
ul.subnav.lv1 .navselected {
background: #dddddd;
color: #0094A4;
text-decoration: none;
}
ul.subnav.lv1 .subnavselected {
background: #dddddd;
color: #0094A4;
text-decoration: none;
}
ul.subnav .lv2 {
margin: 0px;
padding: 0px;
list-style-type: none;
}
ul.subnav .lv2 li {
margin: 0px;
padding: 0px;
}
ul.subnav .lv2 li a {
border-top: 1px solid #eeeeee;
background: #ffffff;
color: #999999;
display: block;
width: 176px;
padding: 10px 0px 10px 10px;
}
ul.subnav .lv2 li a:hover {
background: #ffffff;
color: #0094A4;
text-decoration: none;
}
ul.subnav .lv2 .subnavselected {
background: #ffffff;
color: #0094A4;
text-decoration: none;
}
Thanks for cogworks, works a treat :)
is working on a reply...