Copied to clipboard

Flag this post as spam?

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


  • Michael 63 posts 211 karma points
    Mar 19, 2014 @ 10:20
    Michael
    0

    Razor menu with icon font and pagename

    Hi guys

    I am working on a menu and would like to improve it so that the top level pages display an icon and the name. On my textpages I have a dropdown list with the classes they can choose from. I thought it was as simple as putting in a var called icon and fetching the value via .Parameter.

    My code looks like this:

    @inherits umbraco.MacroEngines.DynamicNodeContext
    @{
      @*Get the root of the website *@
      var root = Model.AncestorOrSelf(1);
      var startNodeID = Parameter.source;
      @*var homePage = Parameter.frontPage;*@
    }
    <ul>
      @*<li><a href="@Model.NodeById(startNodeID).NiceUrl">@homePage</a></li>*@
      @foreach (var page in root.Children.Where("Visible"))
      {
        var icon = @page.Parameter.ikon;
        <li class="@page.IsAncestorOrSelf(Model, "current", "")">
          <a href="@page.Url">@page.Name <span class="@icon"></span></a>
            @* LVL 2 *@
            <ul>
            @*@foreach (var subpage in page.Children.Where("nodeTypeAlias == \"Tekstside\"").Where("Visible"))*@
               @foreach (var subpage in page.Tekstside.Where("Visible"))
               {
                 <li><a href="@subpage.Url">@subpage.Name</a></li>
            }
          </ul>
        </li>
      }
    </ul>

    Any ideas?

    Thx in advance :)

     

    /Michael

  • Fuji Kusaka 2203 posts 4220 karma points
    Mar 19, 2014 @ 10:39
    Fuji Kusaka
    100

    Hi Michael,

    Assuming you want to display an icon for each item of the first level why not make use of an Upload file ? 

    var root = Model.AncestorOrSelf(1).Children;
    
                    foreach (var page in root) {
    var icon = page.HasValue("iconAlias")? page.iconAlias : "/img/defaultIcon.png"; <li><a href="@page.Url">@page.Name<span style="background:url('@icon') no-repeat;"></span></a>
    @if(page.Children.Where("nodeTypeAlias == \"Tekstside\"").Any()){
    <ul>
    @foreach(var subpage in page.Children){
    <li><a href="@subpage.Url">@subpage.Name</a></li>
    }
    </ul>
    }
    </li> }

     
    Hope this helps, 

  • Michael 63 posts 211 karma points
    Mar 19, 2014 @ 10:47
    Michael
    0

    Thank you very much Fuji :D

    I used some of your code and stuck with my icon font. My working code looks like this:

    @inherits umbraco.MacroEngines.DynamicNodeContext
    @{
      @*Get the root of the website *@
      var root = Model.AncestorOrSelf(1);
      var startNodeID = Parameter.source;
      @*var homePage = Parameter.frontPage;*@
    }
    <ul>
      @*<li><a href="@Model.NodeById(startNodeID).NiceUrl">@homePage</a></li>*@
      @foreach (var page in root.Tekstside.Where("Visible"))
      {
        @*var icon = @page.Parameter.ikon;*@
        var icon = page.HasValue("ikon")? page.ikon : Parameter.ikon;
        <li class="@page.IsAncestorOrSelf(Model, "current", "")">
          <a href="@page.Url">@page.Name <span class="@icon"></span></a>
            @* LVL 2 *@
            <ul>
            @*@foreach (var subpage in page.Children.Where("nodeTypeAlias == \"Tekstside\"").Where("Visible"))*@
               @foreach (var subpage in page.Tekstside.Where("Visible"))
               {
                 <li><a href="@subpage.Url">@subpage.Name</a></li>
            }
          </ul>
        </li>
      }
    </ul>

    Thx again

    /Michael

  • Fuji Kusaka 2203 posts 4220 karma points
    Mar 19, 2014 @ 10:49
    Fuji Kusaka
    0

    No worries Michael, most welcome and nice input

     

    //fuji

Please Sign in or register to post replies

Write your reply to:

Draft