Sign in Register
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

    Copy Link
  • 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, 

    Copy Link
  • 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

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

    No worries Michael, most welcome and nice input

     

    //fuji

    Copy Link

  • 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