Menu Bootstrap 4

JanBab
04. úno 2019 10:16 #138784
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

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od H13
04. úno 2019 12:22 #138786
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 Gallery - http://www.phoca.cz/phocagallery - obrázková galerie (Joomla!)
Phoca Guestbook - http://www.phoca.cz/phocaguestbook - kniha návštěv (Joomla!)
Phoca Download - http://www.phoca.cz/phocadownload - stahování souborů (Joomla!)
Phoca Cart - http://www.phoca.cz/phocacart - e-shop,...

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od JanBab
04. úno 2019 13:20 #138788
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?

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od H13
04. úno 2019 18:46 #138789
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.

Phoca Gallery - http://www.phoca.cz/phocagallery - obrázková galerie (Joomla!)
Phoca Guestbook - http://www.phoca.cz/phocaguestbook - kniha návštěv (Joomla!)
Phoca Download - http://www.phoca.cz/phocadownload - stahování souborů (Joomla!)
Phoca Cart - http://www.phoca.cz/phocacart - e-shop,...

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od JanBab
07. úno 2019 10:20 #138843
Tak jsem to vymázl přímo v šabloně a je to stejné.

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.

Odpověď od Pavel [byPV]
07. úno 2019 21:50 #138856
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

<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

<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.

Pro možnost přispívání do fóra je nutné: Přihlásit se nebo Vytvořit účet.