AMP Kullanımı 3

<a on="tap:sidebarId.toggle" class="b-menu"><i class="fa fa-bars"></i></a>

<amp-sidebar id="sidebarId" layout="nodisplay" side="left">

Menünün ampdeki adı amp-sidebardır.

“sidebarId” menünün adıdır.

layout="nodisplay"başlangıştagizli kalması içindir.

side="left" menünün soldantarafta açılacağını belirtir.

Menü 3 parçadan oluşur

<div class="menu-top">(Üst Bölüm)

<div class="menu"> (İçerikBölümü)

<div class="menu-bottom"> (Alt Bölüm)

<div class="menu-top">

Logo : <amp-img class="amp-sidebar-imagelogo" src="/uploads/logo.png" width="120" height="27" alt="Brunsia"></amp-img>

Menüyü Kapatma: <a on="tap:sidebarId.close" class="b-menu-close"><i class="fa fa-times"></i></a>

“sidebarId” adlı menünün kapatılacağınıbelirtir.

<divclass="menu">

menu-itemile içerikler belirlenir.

Resim ve Başlık  
<div class="col-12 menu-item">
    <a href="/">
        <amp-img class="amp-sidebar-image" src="/uploads/favicon.png" width="20" height="20" alt="Brunsia"></amp-img>
        Anasayfa
    </a>
</div>

Ikon ve Başlık 
<div class="col-12 menu-item">
   <a href="/iletisim">
       <i class="fa fa-info"></i>
       İletişim
   </a>
</div>

<div class="menu-bottom">

İçerisinde istenilse özel birişlem yapılabilir. 
Genel olarak içerisinde dil elementi kullandığımız için [Content] kısa kodu kullanıyoruz.

<repeater class="col-12 menu-item" data-type="4" data-menu="[menu-id]">

   <a href="[[Url]]"><i class="[[Ikon]]"></i>[[Adi]]</a>

</repeater>

Dinamik menüde döngü vardır. [[ Kısa Kod]] bölümleri ilgili menü içeriğini getirir.

Kısa Kodlar Şunlardır;

Index: [[Index]]

Count: [[Count]]

Id:[[Id]]

Sıra:[[Sira]]

Tipi:[[Tipi]]

UstTaksonomiId:[[UstTaksonomiId]]

Adı:[[Adi]]

İkon:[[Ikon]]

Seviye:[[Seviye]]

Url:[[Url]]

Sınıf:[[Sinif]]

EkAlan:[[EkAlan]]

BagUrl:[[BagUrl]]