Dropdown menu bootstrap 4 tabs

Post Reply
User avatar
Ticketa
Турист
Турист
Posts: 521
Joined: Mon Feb 27, 2012 1:54 pm
Answers: 23
Location: in /root
Contact:

Dropdown menu bootstrap 4 tabs

Post by Ticketa » Thu Sep 10, 2020 7:51 pm

привет,
някой има ли идея как мога да добавя на тези tabs работещо dropdown меню?

https://codepen.io/MaorGigi/pen/NWqrLJN

Добавяйки тези редове:

Code: Select all

<li class="nav-item dropdown"><a href="javascript:void(0)" class="nav-link dropdown-toggle  active" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="hidden-xs-down">Pages</span></a><div class="dropdown-menu"><a href="#" data-ajax="true" class="dropdown-item" role="tab" data-toggle="tab"><i class="icon-menu"></i>Pages 1</a><a href="#" data-ajax="true" class="dropdown-item" role="tab" data-toggle="tab"><i class="icon-plus"></i>Pages 2</a></div></li>
Те не са работещи и dropdown менюто не бачка. Идеята ми е при responsive mode да бачка и dropdown менюто

Пробвах и така и също не бачка;

Code: Select all

<li class="nav-item dropdown"><a href="javascript:void(0)" class="nav-link dropdown-toggle  active" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="hidden-xs-down">Pages</span></a><ul class="dropdown-menu"><li><a href="#" data-ajax="true" class="dropdown-item" role="tab" data-toggle="tab"><i class="icon-menu"></i>Pages 1</a></li><li><a href="#" data-ajax="true" class="dropdown-item" role="tab" data-toggle="tab"><i class="icon-plus"></i>Pages 2</a></li></ul></li>

User avatar
anonimen
Web-tourist
Web-tourist
Posts: 1589
Joined: Mon Jun 11, 2012 6:07 pm
Answers: 163
Location: Parse error: unexpected "}" in /home/index.php on line 26

Re: Dropdown menu bootstrap 4 tabs

Post by anonimen » Fri Sep 11, 2020 9:52 am

Къде искаш да добавиш dropdown? С бутон до всеки от линковете ли?
Или самите линкове искаш да станат dropdown бутони - но в този случай при натискането им dropdown ли ще се появява, или ще се активира съответният таб?

User avatar
Ticketa
Турист
Турист
Posts: 521
Joined: Mon Feb 27, 2012 1:54 pm
Answers: 23
Location: in /root
Contact:

Re: Dropdown menu bootstrap 4 tabs

Post by Ticketa » Fri Sep 11, 2020 9:59 am

anonimen wrote:
Fri Sep 11, 2020 9:52 am
Къде искаш да добавиш dropdown? С бутон до всеки от линковете ли?
Или самите линкове искаш да станат dropdown бутони - но в този случай при натискането им dropdown ли ще се появява, или ще се активира съответният таб?
Искам tabs линковете да бъдат подходящи за мобилни устройства т.е. ако имам 10 линка да има от дясно стрелка, точки или каквото и да е които да визуализират тези останали линкове.

Като някой от линковете да могат да имат и падащи (суб) менюта.


https://codepen.io/hayatbiralem/pen/KpzjOL

Това ми върши работа , но е за bootstrap 3 , а аз търся за bootstrap 4

User avatar
anonimen
Web-tourist
Web-tourist
Posts: 1589
Joined: Mon Jun 11, 2012 6:07 pm
Answers: 163
Location: Parse error: unexpected "}" in /home/index.php on line 26

Re: Dropdown menu bootstrap 4 tabs

Post by anonimen » Fri Sep 11, 2020 10:23 am

Ticketa wrote:
Fri Sep 11, 2020 9:59 am
anonimen wrote:
Fri Sep 11, 2020 9:52 am
Къде искаш да добавиш dropdown? С бутон до всеки от линковете ли?
Или самите линкове искаш да станат dropdown бутони - но в този случай при натискането им dropdown ли ще се появява, или ще се активира съответният таб?
Искам tabs линковете да бъдат подходящи за мобилни устройства т.е. ако имам 10 линка да има от дясно стрелка, точки или каквото и да е които да визуализират тези останали линкове.

Като някой от линковете да могат да имат и падащи (суб) менюта.


https://codepen.io/hayatbiralem/pen/KpzjOL

Това ми върши работа , но е за bootstrap 3 , а аз търся за bootstrap 4
Ахаааа, разбрах те, аз се мъчих да добавя към самите линкове dropdown меню, ама нещо не ми се получи и реших да питам за разяснение :D

Ами аз в момента го виждам както ти го описваш:
wt.png
You do not have the required permissions to view the files attached to this post.

User avatar
anonimen
Web-tourist
Web-tourist
Posts: 1589
Joined: Mon Jun 11, 2012 6:07 pm
Answers: 163
Location: Parse error: unexpected "}" in /home/index.php on line 26

Re: Dropdown menu bootstrap 4 tabs

Post by anonimen » Fri Sep 11, 2020 10:32 am

Виж, май го направих:

Code: Select all

        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" >How do we use it?</a>
              <div class="dropdown-menu">
              <a class="dropdown-item" href="#block-simple-text-2" aria-selected="false" aria-controls="block-simple-text-2" id="block-simple-text-2-tab">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated link</a>
            </div>

        </li>
И сега излиза така:
wt.png
А като цъкна 'action', зарежда втория таб.
You do not have the required permissions to view the files attached to this post.

User avatar
anonimen
Web-tourist
Web-tourist
Posts: 1589
Joined: Mon Jun 11, 2012 6:07 pm
Answers: 163
Location: Parse error: unexpected "}" in /home/index.php on line 26

Re: Dropdown menu bootstrap 4 tabs

Post by anonimen » Fri Sep 11, 2020 10:41 am

Демо: https://codepen.io/man/pen/yLOjYjx
Само че се чупи при по-тесен екран, не се показва dropdown-ът.

ПП В горния код пропуснах data-toggle="tab" на линка от dropdown-а, с който активирам втория таб - без тоя атрибут не работи.

User avatar
Ticketa
Турист
Турист
Posts: 521
Joined: Mon Feb 27, 2012 1:54 pm
Answers: 23
Location: in /root
Contact:

Re: Dropdown menu bootstrap 4 tabs

Post by Ticketa » Fri Sep 11, 2020 11:12 am

anonimen wrote:
Fri Sep 11, 2020 10:41 am
Демо: https://codepen.io/man/pen/yLOjYjx
Само че се чупи при по-тесен екран, не се показва dropdown-ът.

ПП В горния код пропуснах data-toggle="tab" на линка от dropdown-а, с който активирам втория таб - без тоя атрибут не работи.
Да, чупи се dropdown точно там имам проблем и аз под мобилни устройства :doh:
ПП В горния код пропуснах data-toggle="tab" на линка от dropdown-а, с който активирам втория таб - без тоя атрибут не работи
Това не го разбрах

User avatar
Ticketa
Турист
Турист
Posts: 521
Joined: Mon Feb 27, 2012 1:54 pm
Answers: 23
Location: in /root
Contact:

Re: Dropdown menu bootstrap 4 tabs

Post by Ticketa » Mon Sep 14, 2020 6:53 pm

Up

Post Reply