Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Claushingebjerg 936 posts 2571 karma points
    Sep 07, 2009 @ 20:57
    Claushingebjerg
    0

    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?

  • Tim 225 posts 690 karma points
    Sep 08, 2009 @ 10:36
    Tim
    1

    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:

    <umbraco:Macro
    startingLevel="1"
    recurse="0"
    selectBranches="1"
    maxMenuDepth="1"
    ulBaseClass="horizontal"
    branchClass="ancestorSelected"
    selectedClass="selected"
    Alias="[COG]Navigation"
    runat="server">
    </umbraco:Macro>

    <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!

    Tim

     

     

  • spyder 4 posts 24 karma points
    Dec 15, 2009 @ 20:38
    spyder
    0

    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!

  • Fredrik Esseen 608 posts 904 karma points
    Dec 16, 2009 @ 12:01
    Fredrik Esseen
    0

    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..

  • AJ 1 post 21 karma points
    Mar 07, 2010 @ 16:34
    AJ
    0

    @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 &gt;= $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

  • Claire Botman 48 posts 77 karma points
    Mar 08, 2010 @ 05:04
    Claire Botman
    0

    Thanks AJ this is what I needed too.

    Tim can we have this as an option one day please?

  • Sam 184 posts 209 karma points
    Mar 17, 2010 @ 17:00
    Sam
    0

    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:

    <ul class="horizontallv1">
    <li class="hasChildren"><a href="#" class="">Services</a></li>
    <li class="selectedancestorSelected hasChildren"><a href="#" class="selectedancestorSelected ">Projects</a></li>
    <li class=""><a href="#" class="">Photos</a></li>
      <li class=""><a href="#" class="">Helping Us</a></li>
    <li class="hasChildren"><a href="#" class="">Blog</a></li>
    <li class=""><a href="#" class="">Contact</a></li>
    <li class="hasChildren"><a href="#" class="">About Us</a></li>
    </ul>
    Sub level selected:

    <ul class="horizontallv1">
    <li class="hasChildren"><a href="#" class="">Services</a></li>
    <li class="ancestorSelected hasChildren"><a href="#" class="ancestorSelected ">Projects</a></li>
    <li class=""><a href="#" class="">Photos</a></li>
    <li class=""><a href="#" class="">Helping Us</a></li>
    <li class="hasChildren"><a href="#" class="">Blog</a></li>
    <li class=""><a href="#" class="">Contact</a></li>
    <li class="hasChildren"><a href="#" class="">About Us</a></li>
    </ul>


    and I'm using the following as per your example:

    <umbraco:Macro
    startingLevel="1"
    recurse="0"
    selectBranches="1"
    maxMenuDepth="1"
    ulBaseClass="horizontal"
    branchClass="ancestorSelected"
    selectedClass="selected"
    Alias="[COG]Navigation"
    runat="server">
    </umbraco:Macro>


    It's making styling the menu pretty awkward! I'm new to umbraco so if you can help it'd be very much appreciated, thanks :)

    All the best.
  • Sam 184 posts 209 karma points
    Mar 17, 2010 @ 19:39
    Sam
    0

    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 :)

Please Sign in or register to post replies

Write your reply to:

Draft