vertical menu with select

Asked

Viewed 65 times

3

Could someone give me a north on how to display a vertical menu when the first items select is selected, I’m doing it in a very crude way, as they will notice that I put margin-top to move the element up the first element, since they are stacked. 

<script type="text/javascript">
      function optionCheck(){
        var opcaoModSelecionada = document.getElementById("tipoModalidadeEnsino").value;
        if(opcaoModSelecionada == "gra"){
          document.getElementById("primary-list-course").style.visibility = "visible";
          document.getElementById("secundary-list-course").style.visibility = "hidden";
          document.getElementById("third-list-course").style.visibility = "hidden";

        } else if (opcaoModSelecionada == "pgr"){
          document.getElementById("secundary-list-course").style.visibility = "visible";
          document.getElementById("primary-list-course").style.visibility = "hidden";
          document.getElementById("third-list-course").style.visibility = "hidden";

        } else if (opcaoModSelecionada == "ext"){
          document.getElementById("third-list-course").style.visibility = "visible";
          document.getElementById("primary-list-course").style.visibility = "hidden";
          document.getElementById("secundary-list-course").style.visibility = "hidden";
        }
      }
    </script>
@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');

body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}

.container {
  margin: 0 auto;
  text-align: center;
  width: 40%;
  height: auto;
  background-color: #ddd;
}

.course {
  margin: 0 auto;
  text-align: center;
  width: 40%;
  height: auto;
  background-color: bisque;
  visibility: hidden;
}

.secundary-list-course {
  margin-top: -25px;
}

.third-list-course {
  margin-top: -25px;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width-device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <link rel="stylesheet" href="css/style.css"/>
    <title>EXIBIÇÃO POR CAMPO SELECIONADO</title>
  </head>
  <body>

    <div class="container">
      <label for="tipModalidadeEnsino">Selecione a Modalidade</label>
      <select id="tipoModalidadeEnsino" name="tipoModalidadeEnsino" onchange="optionCheck()">
        <option value="0" selected>-- Selecione uma das opções --</option>
        <option value="gra">Graduação</option>
        <option value="pgr">Pós-graduação</option>
        <option value="ext">Extensão</option>
      </select>
    </div>

    <div class="primary-list-course course" id="primary-list-course">
      <label for="tipoCurso1"><span style="color:blueviolet">Cursos de Graduação</span></label>
      <select id="tipoCurso1" name="tipoCurso1">
        <option selected>-- Escolha o curso --</option>
        <option>Administração</option>
        <option>Direito</option>
        <option>Ciencias Biológica</option>
        <option>Sistemas de Informação</option>
      </select>
    </div>

    <div class="secundary-list-course course" id="secundary-list-course">
      <label for="tipoCurso2"><span style="color: blueviolet">Cursos de Pós-graduação</span></label>
      <select id="tipoCurso2" name="tipoCurso2">
        <option selected>-- Escolha o curso --</option>
        <option>Engenharia de Software</option>
        <option>Cyber  Security</option>
        <option>Física</option>
        <option>Psicologia</option>
      </select>
    </div>

    <div class="third-list-course course" id="third-list-course">
      <label for="tipoCurso3"><span style="color: blueviolet">Cursos de Extensão</</label>
      <select id="tipoCurso3" name="tipoCurso3">
        <option selected>-- Escolha o curso --</option>
        <option>Inglês</option>
        <option>Mecatrônica</option>
        <option>SegInfo</option>
      </select>
    </div>
  </body>
</html>

javascript html css front-end

3 answers

4


Use display: none instead of visibility: hidden. So the additional selects will always be below the main select, and will not need to use margin-top to position them. An element with display: none does not take up space in the layout, unlike visibility: hidden:

@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');

body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}

.container {
  margin: 0 auto;
  text-align: center;
  width: 40%;
  height: auto;
  background-color: #ddd;
}

.course {
  margin: 0 auto;
  text-align: center;
  width: 40%;
  height: auto;
  background-color: bisque;
  display: none;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width-device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <link rel="stylesheet" href="css/style.css"/>
    <title>EXIBIÇÃO POR CAMPO SELECIONADO</title>
  </head>
  <body>

    <div class="container">
      <label for="tipModalidadeEnsino">Selecione a Modalidade</label>
      <select id="tipoModalidadeEnsino" name="tipoModalidadeEnsino" onchange="optionCheck()">
        <option value="0" selected>-- Selecione uma das opções --</option>
        <option value="gra">Graduação</option>
        <option value="pgr">Pós-graduação</option>
        <option value="ext">Extensão</option>
      </select>
    </div>

    <div class="primary-list-course course" id="primary-list-course">
      <label for="tipoCurso1"><span style="color:blueviolet">Cursos de Graduação</span></label>
      <select id="tipoCurso1" name="tipoCurso1">
        <option selected>-- Escolha o curso --</option>
        <option>Administração</option>
        <option>Direito</option>
        <option>Ciencias Biológica</option>
        <option>Sistemas de Informação</option>
      </select>
    </div>

    <div class="secundary-list-course course" id="secundary-list-course">
      <label for="tipoCurso2"><span style="color: blueviolet">Cursos de Pós-graduação</span></label>
      <select id="tipoCurso2" name="tipoCurso2">
        <option selected>-- Escolha o curso --</option>
        <option>Engenharia de Software</option>
        <option>Cyber  Security</option>
        <option>Física</option>
        <option>Psicologia</option>
      </select>
    </div>

    <div class="third-list-course course" id="third-list-course">
      <label for="tipoCurso3"><span style="color: blueviolet">Cursos de Extensão</label>
      <select id="tipoCurso3" name="tipoCurso3">
        <option selected>-- Escolha o curso --</option>
        <option>Inglês</option>
        <option>Mecatrônica</option>
        <option>SegInfo</option>
      </select>
    </div>
    <script>
function optionCheck(){
        var opcaoModSelecionada = document.getElementById("tipoModalidadeEnsino").value;
        if(opcaoModSelecionada == "gra"){
          document.getElementById("primary-list-course").style.display = "block";
          document.getElementById("secundary-list-course").style.display = "none";
          document.getElementById("third-list-course").style.display = "none";

        } else if (opcaoModSelecionada == "pgr"){
          document.getElementById("secundary-list-course").style.display = "block";
          document.getElementById("primary-list-course").style.display = "none";
          document.getElementById("third-list-course").style.display = "none";

        } else if (opcaoModSelecionada == "ext"){
          document.getElementById("third-list-course").style.display = "block";
          document.getElementById("primary-list-course").style.display = "none";
          document.getElementById("secundary-list-course").style.display = "none";
        }
      }

    </script>
  </body>
</html>

  • Exactly what did you need, but what would xmargin-top be? I would edit my answer because I was giving Uncaught Referenceerror: Function is not defined, I see you fixed that too in your reply. What have you done?

  • xmargin-top It’s typo, it’s just margin-top.

  • 2

    @Lucasinácio It’s because I forgot to delete where it has xmargin-top... The error in the snippet was because you put the tags <script type="text/javascript"> within the Javascript code.

  • Right, but I’m trying to load this script and it’s not going (I’m clicking above the body tag closure), but it triggers the same error..

  • @I changed the answer. Take a look.

  • I saw here, just one more question, I noticed that your select was below the label, but you didn’t use hr or anything, so what you did?

  • @Lucasinácio I didn’t do anything. The select goes under the label when the screen is small mt. Run the above snippet in full screen and select will be next to the label.

Show 2 more comments

3

One option is to put position:absolute courses, and clocar left and right with 0. You don’t need to use the margin-top, because they will already be superimposed. 

<!DOCTYPE html>
<html>
<head>
    <style>
    @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');

body {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}

.container {
margin: 0 auto;
text-align: center;
width: 40%;
height: auto;
background-color: #ddd;
}

.course {
    position: absolute;
    right: 0;
    left: 0;
    
margin: 0 auto;
text-align: center;
width: 40%;
height: auto;
background-color: bisque;
visibility: hidden;
}

.secundary-list-course {
/* margin-top: -25px; */
}

.third-list-course {
/* margin-top: -25px; */
}
    </style>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width-device-width, initial-scale=1.0"/>
  <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
  <link rel="stylesheet" href="css/style.css"/>
  <title>EXIBIÇÃO POR CAMPO SELECIONADO</title>
</head>
<body>

  <div class="container">
    <label for="tipModalidadeEnsino">Selecione a Modalidade</label>
    <select id="tipoModalidadeEnsino" name="tipoModalidadeEnsino" onchange="optionCheck()">
      <option value="0" selected>-- Selecione uma das opções --</option>
      <option value="gra">Graduação</option>
      <option value="pgr">Pós-graduação</option>
      <option value="ext">Extensão</option>
    </select>
  </div>

  <div class="primary-list-course course" id="primary-list-course">
    <label for="tipoCurso1"><span style="color:blueviolet">Cursos de Graduação</span></label>
    <select id="tipoCurso1" name="tipoCurso1">
      <option selected>-- Escolha o curso --</option>
      <option>Administração</option>
      <option>Direito</option>
      <option>Ciencias Biológica</option>
      <option>Sistemas de Informação</option>
    </select>
  </div>

  <div class="secundary-list-course course" id="secundary-list-course">
    <label for="tipoCurso2"><span style="color: blueviolet">Cursos de Pós-graduação</span></label>
    <select id="tipoCurso2" name="tipoCurso2">
      <option selected>-- Escolha o curso --</option>
      <option>Engenharia de Software</option>
      <option>Cyber  Security</option>
      <option>Física</option>
      <option>Psicologia</option>
    </select>
  </div>

  <div class="third-list-course course" id="third-list-course">
    <label for="tipoCurso3"><span style="color: blueviolet">Cursos de Extensão</span></label>
    <select id="tipoCurso3" name="tipoCurso3">
      <option selected>-- Escolha o curso --</option>
      <option>Inglês</option>
      <option>Mecatrônica</option>
      <option>SegInfo</option>
    </select>
  </div>


  <script type="text/javascript">
    function optionCheck(){
      var opcaoModSelecionada = document.getElementById("tipoModalidadeEnsino").value;
      if(opcaoModSelecionada == "gra"){
        document.getElementById("primary-list-course").style.visibility = "visible";
        document.getElementById("secundary-list-course").style.visibility = "hidden";
        document.getElementById("third-list-course").style.visibility = "hidden";

      } else if (opcaoModSelecionada == "pgr"){
        document.getElementById("secundary-list-course").style.visibility = "visible";
        document.getElementById("primary-list-course").style.visibility = "hidden";
        document.getElementById("third-list-course").style.visibility = "hidden";

      } else if (opcaoModSelecionada == "ext"){
        document.getElementById("third-list-course").style.visibility = "visible";
        document.getElementById("primary-list-course").style.visibility = "hidden";
        document.getElementById("secundary-list-course").style.visibility = "hidden";
      }
    }
  </script>
</body>
</html>

  • I’m doing as @sam suggested, but I learned this new way that you passed that I didn’t know yet, although I know very little about css, thanks!

  • @Lucasinasius without problems, my dear. This is just an alternative, but position:Absolute has some rather boring implications to address... for this particular little model there could be an option. And study yes CSS, it is fundamental. It was worth the strength.

  • 1

    I’m falling on my head, really digging in, it’s just that I’m a little premature at this, thanks a lot!

0

Question: Always keep sub-items(sub-category) at the top after choosing the category.

Solution: CSS Grid Layout

Codepen: View the code/example here

Obs: Avoid using display:none when an Handler(event handler) can occur many times on your page. This generates reflows in render Tree unnecessary, impairing the performance of your web application.
If you want to know more about reflows and Javascript performance: read this article

Code snippets:

  • Markup(Pug)
- const diet = { lifeStyle:['vegetarian','vegan','common'], vegetables:['tomato','onion','broccoli',], proteins:['egg','cheese','tofu'], meat:['bovine','fish','sea'] }
section.bc-form
  form.bc-form__container
    div(class=`bc-form__field  life-style`)
      select(class=`bc-form__controller_select`)
        each type,ind in diet.lifeStyle
          option(class=`bc-form__controller` label=`${type}`)= type
    div(class=`bc-form__field  vegetables  has-selected`)
      select(class=`bc-form__controller_select`)
        each type,ind in diet.vegetables
         option(class=`bc-form__controller` label=`${type}`)= type
    div(class=`bc-form__field  proteins`)
      select(class=`bc-form__controller_select`)
        each type,ind in diet.proteins
         option(class=`bc-form__controller` label=`${type}`)= type
    div(class=`bc-form__field  meats`)
      select(class=`bc-form__controller_select`)
        each type,ind in diet.meat
         option(class=`bc-form__controller` label=`${type}`)= type
  • Style(Sass)
.bc
  &-form
    &__container
      display: grid
    &__field
      padding: .3125rem
.vegetables,
.proteins,
.meats
  visibility: hidden
.has-selected
  grid-row: 2
  visibility: visible
  • JS(Vanilla)
const all_fields = document.querySelectorAll(`.bc-form__field`)
const selection_field_vegetables = document.querySelector(`.vegetables`)
const selection_field_proteins = document.querySelector(`.proteins`)
const selection_field_meats = document.querySelector(`.meats`)
const controller_select_lifeStyle = document.querySelector(`.life-style`).children[0]

const setClass = (elem)=>elem.classList.add(`has-selected`)

const resetDefaultClassToAllFields = (event) =>{
  const targert = event.currentTarget
  all_fields.forEach((elem,ind)=>elem.classList.remove(`has-selected`))
  manageToFieldsSelected(targert)
}

const manageToFieldsSelected = (target)=>{
  switch(target.value){
    case `vegetarian`:
      setClass(selection_field_vegetables)
      break
    case `vegan`:
      setClass(selection_field_proteins)
      break
    case `common`:
      setClass(selection_field_meats)
      break
    default:
      setClass(selection_field_vegetables)
  }
}
controller_select_lifeStyle.addEventListener('change',resetDefaultClassToAllFields,false)

  • Guy copy code from Codepen and paste here is not answer the question

  • Make sense?! rs

Browser other questions tagged javascript html css front-end

You are not signed in. Login or sign up in order to post.