razor menu with icon font and pagename

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

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

Razor

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

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

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

0

No worries Michael, most welcome and nice input

//fuji

Copy Link
is working on a reply...

Please Sign in or register to post replies