Menu Bootstrap 4

JanBab
Autor
OFFLINE
Uživatel

Více

04. úno 2019 10:16 #138784 od JanBab

Menu Bootstrap 4 od JanBab

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

H13
OFFLINE
Admin

Více

04. úno 2019 12:22 #138786 od H13

Odpověď od H13 v tématu Menu Bootstrap 4

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

JanBab
Autor
OFFLINE
Uživatel

Více

04. úno 2019 13:20 #138788 od JanBab

Odpověď od JanBab v tématu Menu Bootstrap 4

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?

H13
OFFLINE
Admin

Více

04. úno 2019 18:46 #138789 od H13

Odpověď od H13 v tématu Menu Bootstrap 4

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.

JanBab
Autor
OFFLINE
Uživatel

Více

07. úno 2019 10:20 #138843 od JanBab

Odpověď od JanBab v tématu Menu Bootstrap 4

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

Pavel [byPV]
OFFLINE
Začátečník

Více

07. úno 2019 21:50 #138856 od Pavel [byPV]

Odpověď od Pavel [byPV] v tématu Menu Bootstrap 4

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.

Vygenerováno za 0.360 sekund