Menu with dropdown doubt

Question

Menu with dropdown doubt

Asked 6 years, 9 months ago

Viewed 49 times

0

Guys, I made a menu with dropdown that gives a little problem. As soon as it opens, it stretches the line instead of being in a "box". Someone can help me -> http://marciabelmiro.com.br/tg18/ link to the menu.

<html>
<head>
<style>
width: 100%; 
height: 100%; 
position: absolute;
.container {
  display: inline-block;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  background-color: #000;
  margin: 6px 95px;
  transition: 0.4s;
}

.texto{
    margin: 0px 0px -45px 0px;
    font-size: 27px;
    font-family: "Raleway", Times, serif;
}


/* Rotate first bar */

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}


/* Fade out the second bar */

.change .bar2 {
  opacity: 0;
}


/* Rotate last bar */

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

.hide {
  display: none;
}
a:link 
{ 
 text-decoration:none; 
} 
</style>
<body>
  <h1>
    <div class="texto">MENU</div>
    <div class="container" onclick="myFunction(this)">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>

      <div id="myDropdown" class="dropdown-content hide">
        <a href="#"><font size="5" color="#97a2a7">TREINAMENTO</font></a>
        <br/>
        <a href="#"><font size="5" color="#97a2a7">PÚBLICO ALVO</font></a>
        <br/>
        <a href="#"><font size="5" color="#97a2a7">OPORTUNIDADE</font></a>
        <br/>
        <a href="#"><font size="5" color="#97a2a7">ESTRUTURA</font></a>
        <br/>
        <a href="#"><font size="5" color="#97a2a7">PALESTRANTES</font></a>
        <br/>
        <a href="#"><font size="5" color="#97a2a7">DEPOIMENTOS</font></a>
        <br/>
        <a href="#"><font size="5" color="#97a2a7">GALERIA DE FOTOS</font></a>
        <br/>
        <a href="#"><font size="5" color="#97a2a7">LOCAL</font></a>
        <br/>
        <a href="#"><font size="5" color="#97a2a7">IDEALIZADORES</font></a>
        <br/>
      </div>
    </div>
  </h1>

  <script>
    function myFunction(x) {
      x.classList.toggle("change");
      document.getElementById('myDropdown').classList.toggle("hide");
    }
  </script>
</body>
</head>
</html>

Menu code: lInk donwload

How so "he stretches the line instead of being in a "box"" I didn’t understand and I couldn’t visualize what you meant by that...

– hugocsl

2018/02/02 at 19:29
was upping the code here. What happens, as soon as I click on the menu it goes down the whole line, stretching it.

– Gabriel Ramalho Grotto

2018/02/02 at 19:33
Young put the code right in the question, avoid external links! I still can’t understand what you mean by "Stretch the line"... What rss line...

– hugocsl

2018/02/02 at 19:36
Friend I took a look at the site and did not see a problem with the menu , I did not understand what you wanted to happen with the menu

– Gabriel.H

2018/02/02 at 19:55

1 answer

Browser other questions tagged javascript html css menu

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

by Sam • **79,597** points · Answer 1 · 2018-02-02T21:20:21+00:00

When analyzing your code, I saw that you need to adjust the CSS for the menu. Since the site is responsive, the menu needs to be position: absolute; when you’re in mode desktop and position: relative; in the way mobile. I will list what must be done:

This below is the div menu:

/* MODO GERAL */
#le_body_row_1_col_3{
    z-index: 99;
    background: #fff;
}

These you include in your @media Rule in their respective ways:

/* MODO DESKTOP */
#le_body_row_1_col_3{
    position: absolute;
}

/* MODO MOBILE */
#le_body_row_1_col_3{
    position: relative;
}

This is the div menu contents (include in the general CSS) that will receive a spacing:

#myDropdown{
    padding: 10px; /* você pode alterar o valor que achar melhor*/
}

By making these inclusions, your menu will work independently and will not stretch the line. See how it looks: