HTML - Buttom separation

Asked

Viewed 63 times

-1

I made the following HTML:

<p>
    <html>
        <head>
        </head>
        <body>

    <!-- Menu com Submenu -->        
<div class="dropdown">
<link rel="stylesheet" type="text/css" href="\Dropdown.css">
<script type="text/javascript" src="dropdown-content.js"></script>

  <button onclick="myFunction()" class="dropbtn">teste</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#">Treinamento 1</a>
    <a href="#">Treinamento 2</a>
    <a href="#">Treinamento 3</a>

    </body>
    </html>
</p>

JS: 

/* Quando o usuário clica no botão,
alternar entre ocultar e mostrar o conteúdo suspenso */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

// Fechar o menu suspenso se o usuário clicar fora dele
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

CSS:

/* Dropdown Button */
.dropbtn {
    background-color: #3498DB;
    color: white;
    padding: 9px 60px;
    font-size: 15px;
    font-weight: bold;
    border: none;
    cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 150px;
    box-shadow: 0px 15px 05px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 8px 8px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

Only I wanted several buttons with the same functionality, one below the other, and if I add one more, the submenu, opens on the first button, how do I separate a button from each other, is the id who defines who is who?

So according to our friend’s answer, I did this: didn’t work out:

<div class="dropdown">
<link rel="stylesheet" type="text/css" href="\\10.1.12.10\fabricas\Misael\Rodrigo_Ramos\Toodle\MenuTreinamento\Dropdown.css">
<script type="text/javascript" src="\\10.1.12.10\fabricas\Misael\Rodrigo_Ramos\Toodle\MenuTreinamento\dropdown-content.js"></script>

<button onclick="myFunction()" class="dropbtn">teste1</button><br>
<div id="myDropdown" class="dropdown-content">
<a href="#">Teste</a>
<a href="#">Treinamento 2</a>

<button onclick="myFunction()" class="dropbtn">teste2</button><br>
<div id="teste" class="dropdown-content">
<a href="#">Teste</a>

but it didn’t work out

javascript html css

  • Dude vc can’t have the same ID on more than one element this is your problem with this script...

  • Huuum, I imagined, is that I am testing but did not surtiu result... but I will try again. thanks

  • I left it like this, but it didn’t work:

  • if you are going to use code in the comment you have to put the code between these characters código aqui there it is like that <script>

  • <<button onclick="myFunction()" class="dropbtn">teste1</button><br> <div id="myDropdown" class="dropdown-content"> <a href="#">Test</a> <a href="#">Training 2</a> <onclickbutton="myFunction()" class="dropbtn">teste2</button><br> <div id="test" class=""dropdown-content"> <a href="#">Test</a> >

  • I have to change something else?

  • It’s bad, it’s just that I’m learning on my own " not counting on that kind of help"

  • I don’t have much knowledge of JS to help you, but soon someone comes along and gives you a strength.

  • Cara I don’t know if it’s your goal since you are studying JS, but if you are interested in an option with only CSS type a drop menu for these buttons tell me that I make an example for you.

Show 4 more comments

1 answer

0

Well, I made an example with jQuery just so you’d have an idea of how you’re going to do it. I commented on jQuery for better understanding.

Logic used

  1. by clicking the button, it stores in a variable which the occurrence button.
    Example: It has 3 buttons in html. By clicking on first, it stores 1 variable. By clicking on according to, it stores 2. And so on and so on
  2. The element with the class dropdown-content of the same occurrence receives (I from it is removed) the class show

$(".dropbtn").each(function() { // para cada elemento com a classe dropbtn
  $(this).on("click", function(event) { // quando clicado
    event.stopPropagation(); // previne a ativação de outro click
    var j = $(".dropbtn").index(this); // pega qual a ocorrencia do elemento
    $(".dropdown-content").eq(j).toggleClass("show"); // poe ou tira a classe show de acordo com a ocorrencia do elemento
  });
});

// fechar o dropdown quando clicado em qualquer outro elemento
$(window).click(function() {
  $(".dropdown-content").each(function() {
    $(this).toggleClass("show");
  });
});
/* Dropdown Button */

.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 9px 60px;
  font-size: 15px;
  font-weight: bold;
  border: none;
  cursor: pointer;
}


/* Dropdown button on hover & focus */

.dropbtn:hover,
.dropbtn:focus {
  background-color: #2980B9;
}


/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  display: inline-block;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 150px;
  box-shadow: 0px 15px 05px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}


/* Links inside the dropdown */

.dropdown-content a {
  color: black;
  padding: 8px 8px;
  text-decoration: none;
  display: block;
}


/* Change color of dropdown links on hover */

.dropdown-content a:hover {
  background-color: #ddd
}


/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */

.show {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
  <button class="dropbtn">teste1</button><br>
  <div class="dropdown-content">
    <a href="#">Teste</a>
    <a href="#">Treinamento 1</a>
    <button class="dropbtn">teste2</button>
    <div class="dropdown-content">
      <a href="#">Teste2</a>
      <a href="#">Treinamento2</a>
      <button class="dropbtn">teste3</button>
      <div class="dropdown-content">
        <a href="#">Teste</a>
      </div>
    </div>

  </div>

Browser other questions tagged javascript html css

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