Tip 2 Off-Canvas Site Navigasyonu

Sitenin dışında kalır ve sağ taraftan açılır. Logo biri sayfanın üzerinde diğeri kanvasın içerisinde olmak üzere iki tanedir. Dilendiği taktirde ayrı ayrı atanabilir.

Sıralama ise diğer standart menü ile aynıdır. Aşağıdaki görselde menü sıralaması anlatılmıştır.

CSHTML

<div class="off-canvas">
        <div class="logo">
            <a href="#">
                <img src="/Content/Tema/KT/images/logo_alanyali.png" />
            </a>
        </div>

        <div class="navmenu navmenu-fixed-right offcanvas">
            <ul class="nav navmenu-nav">
                <li><a href="/@dilk"> @Partial.Translate("Anasayfa", dilk) </a></li>
                @foreach (Sayfa sayfam in Partial.Sayfalar(dilk))
                {
                    if (sayfam.SayfaSirasi < 90)
                    {
                        <li><a href="@Partial.SayfaLink(sayfam.SayfaID)">@sayfam.SayfaBaslik.HtmlEncode()</a></li>
                    }
                }
                @foreach (MakaleKategori kategorim in Partial.KategorilerAna(dilk))
                {
                    if (kategorim.MakaleKategoriSira < 10)
                    {
                        <li class="dropdown">
                            <a href="@Partial.KategoriLink(kategorim.MakaleKategoriID)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">@kategorim.MakaleKategoriAdi.HtmlEncode() <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                @foreach (MakaleKategori aktkategorim in Partial.KategorilerAltID(kategorim.MakaleKategoriID).OrderBy(m => m.MakaleKategoriSira).Take(10))
                                {
                                    <li><a href="@Partial.KategoriLink(aktkategorim.MakaleKategoriID)">@aktkategorim.MakaleKategoriAdi.HtmlEncode()</a></li>
                                }
                                @foreach (Makale makalem in Partial.MakalelerID(kategorim.MakaleKategoriID, 0, 10, "sira", false))
                                {
                                    <li><a href="@Partial.MakaleLink(makalem.MakaleID)">@makalem.MakaleBaslik.HtmlEncode()</a></li>
                                }
                            </ul>
                        </li>
                    }
                }
                @foreach (Sayfa sayfam in Partial.Sayfalar(dilk))
                {
                    if (sayfam.SayfaSirasi > 90)
                    {
                        <li><a href="@Partial.SayfaLink(sayfam.SayfaID)">@sayfam.SayfaBaslik.HtmlEncode()</a></li>
                    }
                }
                @foreach (MakaleKategori kategorim in Partial.KategorilerAna(dilk))
                {
                    if (kategorim.MakaleKategoriSira == 999)
                    {
                        <li><a href="@Partial.KategoriLink(kategorim.MakaleKategoriID)">@kategorim.MakaleKategoriAdi.HtmlEncode()</a></li>
                    }
                }
            </ul>
            
            <div class="col-md-12">
                <a href="@Partial.Translate("Telefon1", dilk)" style="font-size: 29px; padding: 15px 0px; display: block;"><i class="fa fa-phone" aria-hidden="true"></i> @Partial.Translate("Telefon1", dilk)</a>
            </div>
            <div class="relativity">
                <img src="/Content/Tema/KT/images/logo_alanyali.png" style="width: 100%;" />
            </div>
        </div>

        <div class="navbar navbar-default navbar-fixed-top">
            <a class="hamburger" data-toggle="offcanvas" data-target=".navmenu" data-canvas="body"></a>
        </div>
    </div>