Jak vytvořit stránku se záložkami

05. 02. 2018

V tomto článku vám ukážeme postup, jak vytvořit stránku se záložkami. Využití těchto záložek na stránce je vhodné v případě velkého množství textu, který bychom rádi vložili na jednu stránku. Návštěvníkům stránky tak dopřejete přehledný seznam informací, aniž by museli dlouze scrollovat k požadovaným informacím. 

Příklad na webu welko.cz

Postup vytvoření nové stránky

1) Vytvořte novou stránku, u které vyplníte pouze název stránky a nadpis. Následně nastavte typ editoru na HTML editor. Stránku uložte. 

2) Vložte následující kód do stránky za hlavní nadpis.

<h1>Hlavní nadpis</h1>

První část - samotné záložky, které je třeba propojit s obsahem přes id

<ul class="nav nav-tabs" id="myTab">
 <li class="active"><a data-toggle="tab" href="#zalozka1">Název záložky 1</a></li>
 <li class=""><a data-toggle="tab" href="#zalozka2">Název záložky 2</a></li>
 <li class=""><a data-toggle="tab" href="#zalozka3">Název záložky 3</a></li>
 <li class=""><a data-toggle="tab" href="#zalozka4">Název záložky 4</a></li>
 <li class=""><a data-toggle="tab" href="#zalozka5">Název záložky 5</a></li>
</ul>

 Druhá část - obsah jednotlivých záložek

<div class="tab-content">

 <div id="zalozka1" class="tab-pane fade active in">
   <h2>Nadpis záložky 1</h2>
   <p>Obsah záložky 1</p>
 </div>

 <div id="zalozka2" class="tab-pane fade">
   <h2>Nadpis záložky 2</h2>
   <p>Obsah záložky 2</p>
 </div>

 <div id="zalozka3" class="tab-pane fade">
   <h2>Nadpis záložky 3</h2>
   <p>Obsah záložky 3</p>
 </div>

 <div id="zalozka4" class="tab-pane fade">
   <h2>Nadpis záložky 4</h2>
   <p>Obsah záložky 4</p>
 </div>

 <div id="zalozka5" class="tab-pane fade">
   <h2>Nadpis záložky 5</h2>
   <p>Obsah záložky 5</p>
 </div>

</div>

3) Přepněte editor zpět na výchozí (v případě, že máte jako výchozí nastaven WYSIWYG editor).

4) Zobrazte si tzv. bloky, abyste viděli, kde jsou jaké bloky.

5) Do jednotlivých polí, která představují obsah záložek, můžete standardním způsobem vkládat text.

6) Úpravy uložte.

Na co si dát pozor

• Pouze první tag <li> v seznamu <ul> musí mít přiřazenu třídu active. Další položky seznamu již tuto třídu mít nesmí.
• Obdobně je to také u obsahu záložek. První element <div> musí mít přiřazenu třídu active a třídu in.
• Ze seznamu voláme konkrétní záložku pomocí její deklarace, např. #zalozka1. Tato deklarace odpovídá identifikátoru záložky id="zalozka1".
• Pojmenování id je vhodné volit tematicky. Podle pravidel HTML5 musí obsahovat alespoň jeden znak a nesmí obsahovat mezeru.
• Při vkládání obsahu přes WYSIWYG editor je nutné mít zapnuté tzv. bloky. Je to přehledné a zároveň vidíte, že nezasahujete do dalších prvků.
• Pamatujte na to, že v administraci inPage se můžete kdykoliv vrátit k dřívější záloze dané stránky.

Tip pro vás

V tomto článku jsme vám představili jeden z mnoha typů záložek. Jak si vytvořit jiné variace záložek, naleznete například na webu w3school.com.