Copied to clipboard

Flag this post as spam?

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


  • Rocoeh 65 posts 86 karma points
    Jun 25, 2012 @ 10:45
    Rocoeh
    0

    navigation with Razor

    Hi,
     
    my structure is like this
     
    - content
        -homepage
           - who we are
        - the history
          - out ethos
           - your visit
        - getting around
           - things to do
       
          -contact us

    I want to get everything under the homepage (which I could hardcode as it will never change.
        the structure is suckerfish so it is a 'top' nav for the top list and nested ul's for the subnav. And finally I need to determine the current page so I can add a class="current page" to it,  I have setup an umbracoNaviHide on the document types so anything I do not want can be excluded from the Nav

    Many thanks

  • Fuji Kusaka 2203 posts 4220 karma points
    Jun 25, 2012 @ 11:28
    Fuji Kusaka
    0

     

    Hi Rocoeh,

    You can get your razor navi to work this way

     @{  
      var homeNode = Model.AncestorOrSelf(1);   
    const string selectedClass = " class=\"current page\"";
       <li@Library.If(Model.NodeTypeAlias == "DocTypeAlias", selectedClass)><a href="/">Home</a></li>
            foreach(var page in homeNode.Children.Where("Visible")) {
    <li@Library.If(page.IsAncestorOrSelf(Model), selectedClass)>
                    <a href="@page.Url" title="@page.Name">@page.Name</a>
               </li> 
      }
      } 

     

    //fuji

     

     

  • Rocoeh 65 posts 86 karma points
    Jun 25, 2012 @ 12:10
    Rocoeh
    0

    Thanks this is close, modified your text a bit because I did not need the home link as my logo is the page home link. I am not getting the sub menu

     

    the html should be something like this

     

    <u id="main-nav">

         <li class="level1"><a href="">item1</a>

          <ul class="subnav">

           <li><a href="">sub nav item1</a></li>

          <li><a href="">sub nav item2</a></li>

           <li><a href="">sub nav item3</a></li>

          </ul>

         </li>

     

       <li class="level2"><a href="">item1</a>

          <ul class="subnav">

           <li><a href="">sub nav item1</a></li>

          <li><a href="">sub nav item2</a></li>

           <li><a href="">sub nav item3</a></li>

          </ul>

         </li>

    </ul>

     

      

     

    <ul id="main-nav">
      @{
       var terraNode = Model.AncestorOrSelf(1);
       @terraNode;
       const string selectedClass = " class=\"current page\"";   


        foreach(var page in terraNode.Children.Where("Visible"))   {
                 <li@Library.If(page.IsAncestorOrSelf(Model), selectedClass)>
                     <a class="level1" href="@page.Url" title="@page.Name">@page.Name</a>   
               </li>         
             }
      }
      </ul>

     

     


  • Fuji Kusaka 2203 posts 4220 karma points
    Jun 25, 2012 @ 13:27
    Fuji Kusaka
    0

    Hi Rocoeh,

    Did you get it working ?

    //fuji

  • Rocoeh 65 posts 86 karma points
    Jun 25, 2012 @ 13:30
    Rocoeh
    0

    Hi Fuji,

     

    No I get no 2nd level should there be an embeded if statement?

  • Fuji Kusaka 2203 posts 4220 karma points
    Jun 25, 2012 @ 13:42
    Fuji Kusaka
    0

    Ho Rocoeh,

    Yes you have to include and if statement in your loop to check for any child nodes.

     

     foreach(var page in homeNode.Children.Where("Visible")) {
    <li@Library.If(page.IsAncestorOrSelf(Model), selectedClass)>
                    <a href="@page.Url" title="@page.Name">@page.Name</a>
    @* Here you check for any child node *@
     @if(page.Children.Count() > 0){
     @foreach(var childPage in page.Children){
    <li><a href="@childPage.Url">@childPage.Name</a></li>}

               </li> 
      }

     

    This should get your navigation drop down working

    //fuji

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies