Meniu complex în Bootstrap

Limbaje de Programare HTML & CSS
1

Salut, am o problemuta.Ma chinui sa fac o chestie ca cea din poza alaturata

screencapture-justwatch-us-2018-10-09-19_18_02
screencapture-justwatch-us-2018-10-09-19_18_02.png1127×272 18.1 KB
, e un fel de meniu dropdown. Insa nu functioneaza chiar asa in bootstrap.

Am avut tendinta sa modific popover sau tooltip din aceasta librarie, dar nu cred ca ar fi varianta corecta.
Probabil exista o librarie pentru asa ceva si nu stiu eu ce sa caut, sau se face prin alta metoda.In perspectiva este un buton ce la “click” deschide sau afiseaza un div.Este ceva in bootstrap pentru asa ceva, sau trebuie sa creez din css+js? Multumesc !

1 Like
2

Cumva gen modal? https://getbootstrap.com/docs/4.0/components/modal/

1 Like
3

Nu e modal, el se afiseaza peste tot continutul. E vorba de altceva aici si nu reusesc sa-mi dau seama.M-am gandit si la varianta cu navbar si megamenu, insa nici asta nu este.

4

Eu din ce vad este un tab bar si la click se afiseaza bara aia galbena. Vezi aici exemplu de tab.

5

E posibil sa fie tab bar, nu ma intereseaza banda galbena,ci doar meniul. Ma documentez si revin. Multumesc mult !

6

Maybe Dropdowns?

Uite aici un mic demo https://www.bootply.com/GGYuvQm0MS

1 Like
7

Ce ai vazut tu este un popover.
Cod sursa de pe site https://www.justwatch.com/us

<div class="additional-filter__popover" ng-if="filterData.popover">
    ...
</div>

Se poate face si cu dropdown.

1 Like
8

Popover filter menu: https://jsfiddle.net/ZsharE/nqb5643o/
Am folosit acelasi template pentru toate butoanele, asta nu cred ca este un impediment. :wink:

3 Likes
9

Gata, am vazut si eu in codul sursa. Insa aditional-filer__popover m-a dus cu gandul ca e in afara bootstrap-ului.Multumesc mult, ma pun pe treaba.

10

Reusi, despre asta era vorba. Problema e ca slider-ul nu-mi functioneaza, poate e vorba de vreun conflict js, dar in consola nu-mi returneaza nimic.Adica el apare ca inainte ca stil, insa nu functioneaza “sa trag de el”.

//cred ca de aici pleaca, vad ca css-ul e corect dar js-ul nu functioneaza.

content: $('.popover-releaseYear').html(),

11

https://jsfiddle.net/ZsharE/nqb5643o/

Totusi este cam multa bataie de cap, cred ca mai bine faceai un dropdown custom.

12

Reusi cu ceva de genul:

  $('.triggerOverlay').popover({ 
    html : true,
    callback: function () {
				$('#range_26').ionRangeSlider({
                type: "double",
                min: 1900,
                max: 2018,
                grid: false,
                keyboard: true,
                prettify_enabled: false,

                onStart: function (data) {
                    console.log("onStart" + data);
                },
                onChange: function (data) {
                    console.log("onChange");
                },
                onFinish: function (data) {
                    console.log("onFinish" + data);
                },
                onUpdate: function (data) {
                    console.log("onUpdate");
                }
            });
    },
    content: function() {
      var $this = $(this);
      var cont = $this.data('toggle');
      return $('#'+cont).html();
    },
    trigger: 'manual'
  });

Acum sa vad cat de buna este varianta. Revin !

1 Like
13

Abordarea asta este mai buna. :wink:
https://jsfiddle.net/ZsharE/kvq0Lmgr/

2 Likes