Computer Magic Logo
Menu

Saturday, August 8, 2015

Published by Aristotelis Pitaridis

Now that we have learned how to use all the required member functions and properties for the pages, let’s try to create a real menu. We suppose that we have created a web site with the following structure.

As we can see, we have the home page of the site and in the home page we created all the other pages of the site. First we will create a menu which will contain only the main pages of our site.

@{
    var HomePage = CurrentPage.AncestorsOrSelf().Last();
}

<ul>
    <li><a href="@HomePage.Url">@HomePage.Name</a></li>
    @foreach (var MenuItem in HomePage.Children.Where("Visible"))
    {
        <li>
            <a href="@MenuItem.Url">@MenuItem.Name</a>
        </li>
    }
</ul>

We declare a variable called HomePage and we store the home page of our site by getting the last ancestor of the current page. In our HTML we have an unordered list which contains one list element for each child page of the home page. We also added as first element of the list a link to the home page.

In order to generate the list of pages we use a foreach loop and for each child page of the home page we create a new list element using its URL and name.

For the Children property we used the Where filter with the string value "Visible" which asks from Umbraco to display only the pages which has been defined by the web site administrator.

Sometimes we want to display the second level of pages and this can be done using a second foreach loop which will be executed for each of the main pages of the site. Let’s see the code.

@{
    var HomePage = CurrentPage.AncestorsOrSelf().Last();
}

<ul>
    <li><a href="@HomePage.Url">@HomePage.Name</a></li>
    @foreach (var MenuItem in HomePage.Children.Where("Visible"))
    {
        <li>
            <a href="@MenuItem.Url">@MenuItem.Name</a>
            @if (MenuItem.Children.Count() > 0)
            {
                <ul>
                    @foreach (var SubMenuItem in MenuItem.Children.Where("Visible"))
                    {
                        <li>
                            <a href="@SubMenuItem.Url">@SubMenuItem.Name</a>
                        </li>
                    }
                </ul>
            }
        </li>
    }
</ul>

We used exactly the same procedure like we did with the root pages but instead of using the home page to find the child, we used the current menu item each time that we had a new page.

The final step to finish our menu is to add the CurrentPage class to the currently selected page so that we will inform the visitor which page is visible at the moment. We can use this class later in order to give a different format so that it will not look like the other links.

@{
    var HomePage = CurrentPage.AncestorsOrSelf().Last();
    int CurrentPageID = CurrentPage.Id;
}

<ul>
    <li><a href="@HomePage.Url">@HomePage.Name</a></li>
    @foreach (var MenuItem in HomePage.Children.Where("Visible"))
    {
        <li>
            @if (MenuItem.Id == CurrentPageID)
            {
                <a href="@MenuItem.Url" class="CurrentPage">@MenuItem.Name</a>
            }
            else
            {
                <a href="@MenuItem.Url">@MenuItem.Name</a>
            }
            @if (MenuItem.Children.Count() > 0)
            {
                <ul>
                    @foreach (var SubMenuItem in MenuItem.Children.Where("Visible"))
                    {
                        <li>
                            @if (SubMenuItem.Id == CurrentPageID)
                            {
                                <a href="@SubMenuItem.Url" class="CurrentPage">@SubMenuItem.Name</a>
                            }
                            else
                            {
                                <a href="@SubMenuItem.Url">@SubMenuItem.Name</a>
                            }
                        </li>
                    }
                </ul>
            }
        </li>
    }
</ul>

As we can see in the code block we declared a variable which will contain the id of the current page. In the contents block we can see that every time we create a new link we check if the id of this page is the same as the id of the current page. If they have the same value we create a link with the CurrentPage class otherwise we do not use this class.