Gezinme Menüsü

Gezinme menüsü iki versiyonda mevcuttur, ek açılır menülere sahip varsayılan menü ve açılır menüleri olmayan alternatif menü. Varsayılan menü yalnızca HTML Düzenle ile düzenlenebilir.

1. GitBlogger HTML Editörü.
2. Aşağıdakine benzer bir şey arayan için arama yapın :<b:includable id='items-mainMenu'>

   <!--[ Navigation Menu Items ]-->
   <b:includable id='items-mainMenu'>
     ...
   </b:includable>

3. Gezinme menüsü öğelerinizi ve arasında düzenleyebilirsiniz . Varsayılan olarak eklenen birkaç öğe vardır, bunları kaldırmaktan ve kendinizinkini eklemekten çekinmeyin.<b:includable id='items-mainMenu'></b:includable>

Standart menü

Standart menü eklemek için, işaretli kısımları uygun değerlerle değiştirerek aşağıdaki kod parçacığını ekleyebilirsiniz:

<!--[ Standard menu ]-->
<li>
  <!--[ Change attribute href='#' to add url ]-->
  <a aria-label='Standard Menu' href='#' itemprop='url'>
    <!--[ Icon ]-->
    <b:include name='svg.folder-2'/>
    <!--[ Title ]-->
    <span itemprop='name'>Standard Menu</span>
  </a>
</li>

Açılır menü

Aşağıdaki gibi kullanabileceğiniz birkaç açılır menü stili vardır:

Alt menülerde simge olmadan

Alt menüler için svg ikonları eklemek istemiyorsanız bu stili kullanabilirsiniz. İşaretli kısımları uygun değerlerle değiştirerek aşağıdaki kod parçasını ekleyebilirsiniz. Lütfen geçiş düğmesi için svg ikonunun eklenmesi gerektiğini unutmayın.

<!--[ Dropdown Menu ]-->
<li>
  <input id='nav-drop-1' type='checkbox' checked=''/>
  <label aria-label='Sub Menu' for='nav-drop-1' role='button'>
    <!--[ Icon ]-->
    <b:include name='svg.folder-2'/>
    <!--[ Title ]-->
    <span>Sub Menu</span>
  </label>
  <ul>
    <li>
      <!--[ Change attribute href='#' to add url ]-->
      <a aria-label='Sub Menu 01' href='#' itemprop='url'>
        <!--[ Title ]-->
        <span itemprop='name'>Sub Menu 01</span>
      </a>
    </li>
    <li>
      <!--[ Change attribute href='#' to add url ]-->
      <a aria-label='Sub Menu 02' href='#' itemprop='url'>
        <!--[ Title ]-->
        <span itemprop='name'>Sub Menu 02</span>
      </a>
    </li>
    <li>
      <!--[ Change attribute href='#' to add url ]-->
      <a aria-label='Sub Menu 03' href='#' itemprop='url'>
        <!--[ Title ]-->
        <span itemprop='name'>Sub Menu 03</span>
      </a>
    </li>
  </ul>
</li>

Alt menülerde ikon ile

Bunun için kod parçacığı yukarıdakine benzer, tek yapmanız gereken aşağıda gösterildiği gibi alt menüdeki başlığın üstüne svg simge kodunuzu eklemek:

<!--[ Dropdown Menu ]-->
<li>
  ...
  <ul>
    ...
    <li>
      <!--[ Change attribute href='#' to add url ]-->
      <a aria-label='Sub Menu 01' href='#' itemprop='url'>
        <!--[ Icon ]-->
        <b:include name='svg.folder-2'/>
        <!--[ Title ]-->
        <span itemprop='name'>Sub Menu 01</span>
      </a>
    </li>
    ...
  </ul>
</li>

Üst seviyede alt menüler

Geçiş düğmesi küçülür ve alt menü standart menüyle aynı şekilde davranır ancak geçiş düğmesine tıklanarak daraltılabilir/genişletilebilir. İşaretli kısımları uygun değerlerle değiştirerek aşağıdaki kod parçasını ekleyebilirsiniz. Alt menülerin svg simgesine sahip olması gerektiğini unutmayın.

<!--[ Dropdown Menu (Sub Menu at Top level) ]-->
  <li class='mr'>
    <input id='nav-drop-3' type='checkbox' checked=''/>
    <label aria-label='More...' for='nav-drop-3' role='button'>
      <!--[ Title ]-->
      <span>More...</span>
    </label>
    <ul>
    <li>
      <!--[ Change attribute href='#' to add url ]-->
      <a aria-label='Sub Menu 01' href='#' itemprop='url'>
        <!--[ Icon ]-->
        <b:include name='svg.folder-2'/>
        <!--[ Title ]-->
        <span itemprop='name'>Sub Menu 01</span>
      </a>
    </li>
    <li>
      <!--[ Change attribute href='#' to add url ]-->
      <a aria-label='Sub Menu 02' href='#' itemprop='url'>
        <!--[ Icon ]-->
        <b:include name='svg.folder-2'/>
        <!--[ Title ]-->
        <span itemprop='name'>Sub Menu 02</span>
      </a>
    </li>
    <li>
      <!--[ Change attribute href='#' to add url ]-->
      <a aria-label='Sub Menu 03' href='#' itemprop='url'>
        <!--[ Icon ]-->
        <b:include name='svg.folder-2'/>
        <!--[ Title ]-->
        <span itemprop='name'>Sub Menu 03</span>
      </a>
    </li>
    </ul>
  </li>