Siteye 6'lı Buton ve Mobil Responsive Menü Ekleme

Kapalı             Açık            İç Sayfa

1 . Kod: Bu kodda bulunan mobileApp değişkeni discus yönetim panelinde bulunan transtlate modülünden geliyor. Eğer sitemize bu menüyü eklemek istiyorsak değişkenin değerine yönetim panelinden true değerini atamamız gerekiyor.

@if (mobileApp == "true") {
<style>
    body.kts-one {
        padding-bottom: 0px;
    }
</style>

2 . Kod: Burada eğer mobilde anasayfa açıksa 6'lı buton gelecek. Mobil butona linkini, resimini ve metinini sitenin yönetim panelinin translate modülünden MobilButon1Link, MobilButon1Resim ve MobilButon1Metin vb. değişkenleri kaydedip içlerine istediğimiz değerleri aşağıdaki gibi ekliyoruz.

    if (anasayfa == true)
    {
    <div class="container-fluid visible-xs visible-sm mobile-view">
        <div class="mobile-main">
            <div class="mobile-body">
                <nav class="navbar navbar-default">
                    <div class="container-fluid">
                        <!-- Brand and toggle get grouped for better mobile display -->
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="navbar-brand" href="/@dilk"><img src="/Resim/Upload/logo.png" class="img-responsive mobile-logo" /></a>
                        </div>

                        <!-- Collect the nav links, forms, and other content for toggling -->
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-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).OrderBy(m => m.MakaleKategoriSira))
                                {
                                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))
                                    {
                                    <li><a href="@Partial.KategoriLink(aktkategorim.MakaleKategoriID)">@aktkategorim.MakaleKategoriAdi.HtmlEncode()</a></li>
                                    }
                                    @foreach (Makale makalem in Partial.MakalelerID(kategorim.MakaleKategoriID, 0, 100, "sira", false))
                                    {
                                    <li><a href="@Partial.MakaleLink(makalem.MakaleID)">@makalem.MakaleBaslik.HtmlEncode()</a></li>
                                    }
                                </ul>
                            </li>*@

                                <li><a href="@Partial.KategoriLink(kategorim.MakaleKategoriID)">@kategorim.MakaleKategoriAdi.HtmlEncode()</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 == 999)
                                {
                                <li><a href="@Partial.KategoriLink(kategorim.MakaleKategoriID)">@kategorim.MakaleKategoriAdi.HtmlEncode()</a></li>
                                }
                                }
                            </ul>
                            

                        </div><!-- /.navbar-collapse -->
                    </div><!-- /.container-fluid -->
                </nav>
                <div class="row button-row">
                    <div class="col-xs-4">
                        <div class="mobile-button">
                            <a href="@(Partial.Translate("MobilButon1Link", dilk))">
                            <div class="buttonpic">
                                <div style="background-image: url(@(Partial.Translate("MobilButon1Resim", dilk))), url(/Resim/Upload/mbut.png);"></div>
                        </div>
                        <p>@(Partial.Translate("MobilButon1Metin", dilk))</p>
                        </a>
                    </div>
                </div>
                <div class="col-xs-4">
                    <div class="mobile-button">
                        <a href="@(Partial.Translate("MobilButon2Link", dilk))">
                        <div class="buttonpic">
                            <div style="background-image: url(@(Partial.Translate("MobilButon2Resim", dilk))), url(/Resim/Upload/mbut.png);"></div>
                    </div>
                    <p>@(Partial.Translate("MobilButon2Metin", dilk))</p>
                    </a>
                </div>
            </div>
            <div class="col-xs-4">
                <div class="mobile-button">
                    <a href="@(Partial.Translate("MobilButon3Link", dilk))">
                    <div class="buttonpic">
                        <div style="background-image: url(@(Partial.Translate("MobilButon3Resim", dilk))), url(/Resim/Upload/mbut.png);"></div>
                </div>
                <p>@(Partial.Translate("MobilButon3Metin", dilk))</p>
                </a>
            </div>
        </div>
    </div>
    <div class="row button-row">
        <div class="col-xs-4">
            <div class="mobile-button">
                <a href="@(Partial.Translate("MobilButon4Link", dilk))">
                <div class="buttonpic">
                    <div style="background-image: url(@(Partial.Translate("MobilButon4Resim", dilk))), url(/Resim/Upload/mbut.png);"></div>
            </div>
            <p>@(Partial.Translate("MobilButon4Metin", dilk))</p>
            </a>
        </div>
    </div>
    <div class="col-xs-4">
        <div class="mobile-button">
            <a href="@(Partial.Translate("MobilButon5Link", dilk))">
            <div class="buttonpic">
                <div style="background-image: url(@(Partial.Translate("MobilButon5Resim", dilk))), url(/Resim/Upload/mbut.png);"></div>
        </div>
        <p>@(Partial.Translate("MobilButon5Metin", dilk))</p>
        </a>
    </div>
    </div>
    <div class="col-xs-4">
        <div class="mobile-button">
            <a href="@(Partial.Translate("MobilButon6Link", dilk))">
            <div class="buttonpic">
                <div style="background-image: url(@(Partial.Translate("MobilButon6Resim", dilk))), url(/Resim/Upload/mbut.png);"></div>
        </div>
        <p>@(Partial.Translate("MobilButon6Metin", dilk))</p>
        </a>
    </div>
    </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <a href="http://www.karayeltasarim.com/" target="_blank" title="antalya web tasarım">
                <img style="width:30%;margin: 30px auto;" src="/Content/Tema/@(Partial.Ayar("Tema"))/images/karayel-siyah.svg" class="img-responsive" alt="web tasarım antalya" />
            </a>
        </div>
    </div>
    </div>
    </div>
    </div>
    <style>
        .mobile-logo {
            margin: 0px auto !important;
        }
    </style>
    }
    else
    {
    <nav class="navbar navbar-default visible-xs visible-sm">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/@dilk"><img src="/Resim/Upload/logo.png" class="img-responsive mobile-logo" /></a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="/dilk">ANASAYFA</a></li>
                    @foreach (MakaleKategori kategorim in Partial.KategorilerAna(dilk).OrderBy(m => m.MakaleKategoriSira))
                    {
                    if (kategorim.MakaleKategoriSira < 10)
                    {

                    <li><a href="@Partial.KategoriLink(kategorim.MakaleKategoriID)">@kategorim.MakaleKategoriAdi.HtmlEncode()</a></li>
                    }
                    }




                    @foreach (Sayfa sayfam in Partial.Sayfalar(dilk))
                    {
                    <li><a href="@Partial.SayfaLink(sayfam.SayfaID)">
                        @sayfam.SayfaBaslik.ToUpper().HtmlEncode()
                    </a>
                    </li>
                    }

                </ul>

            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    }

    }

© 2024, ASP.NET MVC CMS (Content Management System / İçerik Yönetim Sistemi). Tüm Hakları Saklıdır.