How to make the drop-down not simply vertical?

Question

How to make the drop-down not simply vertical?

Navigation

#1 by (0 votes)

0

Good, I am doing an effect to make a series of selections that are filtering your search and that I have achieved.

The thing is that visually it is not what I want. Right now I'm showing all the options unfolding vertically.

How could I make it look like the drawing I made?

That is to say that his "sub-options" are displayed on the side.

Code:

$(document).ready(function() {

  $('#Btn-Selector-Rutina').click(function() {
    $('.Btn-Selector-PushPull').fadeOut();
    $('.Btn-Selector-Weider').fadeOut();
    $('.Btn-Subselector-Rutina').fadeToggle();
  });

  $('#Btn-Subselector-Rutina-PushPull').click(function() {
    $('.Btn-Selector-Weider').fadeOut();
    $('.Btn-Selector-PushPull').fadeToggle();
  });

  $('#Btn-Subselector-Rutina-Weider').click(function() {
    $('.Btn-Selector-PushPull').fadeOut();
    $('.Btn-Selector-Weider').fadeToggle();
  });
});

.Btn-Selector {
  height: auto;
  width: 200px;
  padding: 5px;
  text-align: center;
  margin: auto;
  border: solid 2px;
  border-color: #21211d;
  cursor: pointer;
}

.Btn-Subselector-Rutina {
  display: none;
  border-top-style: none;
}

.Btn-Selector-PushPull {
  display: none;
  border-top-style: none;
}

.Btn-Selector-Weider {
  display: none;
  border-top-style: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="Selector-Rutina">
  <p class="Btn-Selector" id="Btn-Selector-Rutina">Tipo de rutina</p>

  <p class="Btn-Selector Btn-Subselector-Rutina" id="Btn-Subselector-Rutina-Weider">Grupo muscular</p>
  <p class="Btn-Selector Btn-Subselector-Rutina" id="Btn-Subselector-Rutina-PushPull">Empuje - Tirón</p>


  <p class="Btn-Selector Btn-Selector-PushPull">Empuje</p>
  <p class="Btn-Selector Btn-Selector-PushPull">Tirón</p>

  <p class="Btn-Selector Btn-Selector-Weider">Abdomen</p>
  <p class="Btn-Selector Btn-Selector-Weider">Biceps</p>
  <p class="Btn-Selector Btn-Selector-Weider">Espalda</p>
  <p class="Btn-Selector Btn-Selector-Weider">Hombro</p>
  <p class="Btn-Selector Btn-Selector-Weider">Pectoral</p>
  <p class="Btn-Selector Btn-Selector-Weider">Piernas</p>
  <p class="Btn-Selector Btn-Selector-Weider">Triceps</p>
</div>

Thanks and best regards!

css

asked by NEA 21.10.2017 в 19:14

source

1 answer

Problems with ARRAY and FUNCTION in JAVASCRIPT Error Angularjs 1.6 with uibDatepicker using the template of a component

score 0 · Answer 1

You can create two divs wrappers with class = menu-wrapper .

These two divs wrap a menu item with its subitems with display:flex , so the subitems will be accommodated on the same line as the main item.

By removing the margin: auto you have enough space for the subitems to fit to the right of each parent item. (View in full screen)

$(document).ready(function() {

  $('#Btn-Selector-Rutina').click(function() {
    $('.Btn-Selector-PushPull').fadeOut();
    $('.Btn-Selector-Weider').fadeOut();
    $('.Btn-Subselector-Rutina').fadeToggle();
  });

  $('#Btn-Subselector-Rutina-PushPull').click(function() {
    $('.Btn-Selector-Weider').fadeOut();
    $('.Btn-Selector-PushPull').fadeToggle();
  });

  $('#Btn-Subselector-Rutina-Weider').click(function() {
    $('.Btn-Selector-PushPull').fadeOut();
    $('.Btn-Selector-Weider').fadeToggle();
  });
});

.Btn-Selector {
  height: auto;
  width: 200px;
  padding: 5px;
  border: solid 2px;
  border-color: #21211d;
  cursor: pointer;
  display: inline-block;
  margin: 0;
   text-align: center;

}

.Btn-Subselector-Rutina {
  display: none;
  border-top-style: none;
}

.Btn-Selector-PushPull {
  display: none;
  border-top-style: none;

}

.Btn-Selector-Weider {
  display: none;
  border-top-style: none;
}

.menu-wrapper{
  display: flex;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="Selector-Rutina">
  <p class="Btn-Selector" id="Btn-Selector-Rutina">Tipo de rutina</p>

<div class="menu-wrapper">
  <p class="Btn-Selector Btn-Subselector-Rutina" id="Btn-Subselector-Rutina-Weider">Grupo muscular</p>
  <p class="Btn-Selector Btn-Selector-Weider">Abdomen</p>
  <p class="Btn-Selector Btn-Selector-Weider">Biceps</p>
  <p class="Btn-Selector Btn-Selector-Weider">Espalda</p>
  <p class="Btn-Selector Btn-Selector-Weider">Hombro</p>
  <p class="Btn-Selector Btn-Selector-Weider">Pectoral</p>
  <p class="Btn-Selector Btn-Selector-Weider">Piernas</p>
  <p class="Btn-Selector Btn-Selector-Weider">Triceps</p>
</div>

<div class="menu-wrapper">
  <p class="Btn-Selector Btn-Subselector-Rutina" id="Btn-Subselector-Rutina-PushPull">Empuje - Tirón</p>
  <p class="Btn-Selector Btn-Selector-PushPull">Empuje</p>
  <p class="Btn-Selector Btn-Selector-PushPull">Tirón</p>
</div>

</div>






</div>