Meniu complex în Bootstrap

bootstrap

(Stefu Catalin) #1

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

, 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 !


#2

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


(Stefu Catalin) #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.


(Catalin Ionut Titov) #4

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


(Stefu Catalin) #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


(Eduard-Dan Stanescu) #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.


(Eduard-Dan Stanescu) #8

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


(Stefu Catalin) #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.


(Stefu Catalin) #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(),


(Eduard-Dan Stanescu) #11

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

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


(Stefu Catalin) #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 !


(Eduard-Dan Stanescu) #13

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