Menu Bootstrap 4

04. úno 2019 10:16 #138784

Menu Bootstrap 4 od JanBab

Uživatel

Zdravím, vytvářím si vlastní šablonu pro Joomlu 3 v Bootstrap 4. Jediné co mi dělá problémy je vytvoření horizontálního a verikálního menu pomocí .navbar, viz www.w3schools.com/bootstrap4/bootstrap_navbar.asp
Našel jsem nějaké návody, ale výsledek nikdy nebyl dobrý.
Díky

04. úno 2019 12:22 #138786

Odpověď od H13

Admin

Otázkou je, co přesně ti dělá problém? Jestli je to samotný Bootstrap 4 nebo nějaký konflikt se stávající Joomla! knihovnou (např. že si Joomla! načte Bootstrap 2.3 a ten je pak v konfliktu s tvým Bootstrap 4 kódem, apod.)

Phoca Cart - www.phoca.cz/phocacart - e-shop, e-commerce
Phoca Gallery - www.phoca.cz/phocagallery - obrázková galerie
Phoca Download - www.phoca.cz/phocadownload - stahování souborů
Phoca Guestbook - www.phoca.cz/phocaguestbook - guestbook

04. úno 2019 13:20 #138788

Odpověď od JanBab

Uživatel

Největší problém mi dělá vytvořit rozbalovací menu. Pokud mám jednoúrovňové menu, tak to celkem zvládnu (nastavit "Přípona třídy modulu", "CSS styl odkazu", atd.). Ale pokud mám víceúrovňové menu, tak si nevím rady, viz balicistroje.8u.cz/

Pokud by mohl být problém se starým Bootstrapem, tak jak ho vypnu?

04. úno 2019 18:46 #138789

Odpověď od H13

Admin

Je tam 2x jQuery a 2x Bootstrap Javascript, a to pravděpodobně verze 2.x a 4x (což je ještě horší než kdyby tam byla 2 - 3 nebo 3 - 4)

To si myslím, že určitě bude problém.

Vypnout jednu knihovnu se dá, ale musí se vše prozkoušet, aby nenastal problémněkde jinde.

Já si vypínám Bootstrap Javascript pomocí systémového pluginu:
www.phoca.cz/phoca-upgrade-system-plugin

ale mám to odzkoušený pouze pro konflikty mezi verzí 2.x a 3.x. Těžko říct, jak to může fungovat s verzí 4

Na Bootstrap 4 si prostě musíme počkat až bude Joomla! ve verzi 4.

07. úno 2019 10:20 #138843

Odpověď od JanBab

Uživatel

Tak jsem to vymázl přímo v šabloně a je to stejné.

07. úno 2019 21:50 #138856

Odpověď od Pavel [byPV]

Začátečník

Zdravím,

sice máte na webu stále CSS pro Bootstrap ze dvou různých verzí, ale to není hlavní problém. Hlavní problém vidím v tom, že HTML kód (včetně CSS tříd) neodpovídá tomu, co Bootstrap 4 vyžaduje.

Porovnejte si to s návodem z w3schools (možná lepší se však dívat na oficiální dokumentaci, kde to mají také pěkně popsané).

Pokud ve stránce toto

Code:

<ul class="nav menunav-item mod-list" id="navbar-nav">
  <li class="nav-item item-101 default"><a href="/index.php?option=com_content&amp;view=featured&amp;Itemid=101" class="nav-link">Home</a></li>
  <li class="nav-item item-102 current active deeper parent">
    <a href="/index.php?option=com_config&amp;view=templates&amp;controller=config.display.templates&amp;Itemid=102" class="nav-link">Home (2)</a>
    <ul class="nav-child unstyled small">
      <li class="nav-item item-106"><a href="/index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=106" class="nav-link">Podmenu</a></li>
      <li class="nav-item item-107"><a href="/index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=107" class="nav-link">Podmenu (2)</a></li>
    </ul>
  </li>
  <li class="nav-item item-103"><a href="/index.php?option=com_content&amp;view=featured&amp;Itemid=103" class="nav-link">Home (3)</a></li>
  <li class="nav-item item-104"><a href="/index.php?option=com_content&amp;view=featured&amp;Itemid=104" class="nav-link">Home (4)</a></li>
  <li class="nav-item item-105"><a href="/index.php?option=com_content&amp;view=featured&amp;Itemid=105" class="nav-link">Home (5)</a></li>
</ul>

nahradím za toto

Code:

<ul class="nav menunav-item mod-list" id="navbar-nav">
  <li class="nav-item item-101 default"><a href="/index.php?option=com_content&amp;view=featured&amp;Itemid=101" class="nav-link">Home</a></li>
  <li class="nav-item item-102 current active deeper parent dropdown">
    <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Home (2)</a>
    <div class="dropdown-menu">
      <a href="/index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=106" class="dropdown-item">Podmenu</a>
      <a href="/index.php?option=com_content&amp;view=article&amp;id=1&amp;Itemid=107" class="dropdown-item">Podmenu (2)</a>
    </div>
  </li>
  <li class="nav-item item-103"><a href="/index.php?option=com_content&amp;view=featured&amp;Itemid=103" class="nav-link">Home (3)</a></li>
  <li class="nav-item item-104"><a href="/index.php?option=com_content&amp;view=featured&amp;Itemid=104" class="nav-link">Home (4)</a></li>
  <li class="nav-item item-105"><a href="/index.php?option=com_content&amp;view=featured&amp;Itemid=105" class="nav-link">Home (5)</a></li>
</ul>

tak to funguje bez problémů, ale i tak jsou tam stále některé CSS třídy zbytečné a okolo ještě některé špatně (pro funkčnost v Bootstrap 4).

Obávám se, že toto si v Joomla! modulu jen tak nenaklikáte a bude třeba úprava layoutu (případně vytvoření nového) v modulu mod_menu, který vložíte do šablony.

P.

Přihlásit se

Joomla 5.2.2 Security & Bugfix Release

Menu Bootstrap 4

Nejnovější příspěvky