Como por conteudo no menu dropdown e por a /

oi eu fiz um menu dropdown e gostaria de saber como posso por aquela / exemplo: https://mistobot.glitch.me/exemplo
e como posso por o conteudo que que quero nela nessa nova parte
obs:meu site é em html e css

Olá,
Não deu para entender muito bem o que você quer fazer, poderia explicar melhor colocando a exemplo o código referente a seu problema?


Você quer colocar conteúdo adicional no seu menu dropdown? Se for o que estou pensando, basta utilizar um simples código em javascript e selecionar o conteiner do seu menu e depois adicionar os elementos que precisar dentro dele.

Você pode criar uma barra com CSS3 utilizando o ::before e/ou ::after no elemento que você tem em foco aí basta colocar o conteiner deste elemento como position: relative ou position: absolute, e o item com ::before ou ::after como position: absolute e fazer as definições básicas para posicionar o mesmo aonde precisar.

Claro que essas dicas que dei foram bem genéricas mas, devido a falta de informações é isso que pude explicar por enquanto.

Espero ter lhe ajudado, até mais!

2 Curtidas

o que eu quero é que quando a pessoa clique no menu dropdown ela vai pra uma outra parte do site

Olá @Canal_Misto_JH,

Quando houver um click no botão dentro do menu dropdown? Se for basta adicionar um elemento tipo link com target="_blank" , exemplo em código:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }
        .navbar {
            display: flex;
            position: relative;
            width: 100vw;
            height: 50px;
            align-items: center;
            justify-content: center;
            background-color: #000000;
        }
        .navbar-item {
            display: flex;
            position: relative;
            width: 100px;
            height: 38px;
            align-items: center;
            justify-content: center;
        }
        .navbar-item > #button {
            width: 100%;
            height: 100%;
            background-color: #000000;
            color: #ffffff;
            border: 2px solid transparent;
            cursor: pointer;
            border-radius: 6px;
            transition: all 250ms 50ms ease;
        }
        .navbar-item > #button:hover {
            border: 2px solid white;
        }
        .navbar-item > .dropdown {
            display: block;
            position: absolute;
            top: 130%;
            width: 200px;
            height: 0px;
            padding: 0px;
            overflow: hidden;
            transition: all 100ms 50ms ease;
            border-radius: 6px;
        }
        .navbar-item > .dropdown[aria-hidden=false] {
            height: auto;
            padding: 12px 0px;
            background-color: #000000;
        }
        .navbar-item > .dropdown > .link {
            display: block;
            width: 100%;
            height: auto;
            padding: 6px;
            color: #ffffff;
            text-decoration: none;
            overflow: hidden;
            background-color: #000000;
            border-radius: 4px;
        }
        .navbar-item > .dropdown > .link:hover {
            text-decoration: underline;
            background-color: #1b1b1b;
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="navbar-item">
            <button id="button" type="button"> <span>MENU</span> </button>
            <div class="dropdown" aria-hidden="true">
                <a class="link" href="https://html.com/attributes/a-target/" target="_blank">HTML.com</a>
                <a class="link" href="https://www.w3schools.com/html/html_intro.asp" target="_blank">W3schools.com</a>
                <a class="link" href="https://plus.diolinux.com.br/t/como-por-conteudo-no-menu-dropdown-e-por-a/26129/2" target="_blank">Plus.Diolinux.com.br</a>
            </div>
        </div>
    </nav>
    <script>
        const button = document.querySelector('#button');

        button.addEventListener('click', () => {
            var dropdown = document.querySelector('.dropdown');
            if (dropdown.getAttribute('aria-hidden') == 'true') {
                dropdown.setAttribute('aria-hidden', 'false');
            }
            else {
                dropdown.setAttribute('aria-hidden', 'true');
            }
        });
    </script>
</body>
</html>

Obs. O código acima é apenas um exemplo para demonstrar como criar um menu dropdown com botões de redirecionamento para pagina de terceiro.

Espero ter lhe ajudado, até mais!

2 Curtidas

mas não quero que redirecione pra pagina de terceiros vo dar um exemplo tenho um site de culinarias você clica ali no menu dropdown chamado receitas e aparece minhas receitas

Olá @Canal_Misto_JH ,
Ok, se você quer mostrar mais um container/box com texto(receita) dentro você precisa definir se quer este container dentro do dropdown ou fora.

Se for dentro do dropdown poderia ser algo assim:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0px;
        margin: 0px;
        box-sizing: border-box;
      }
      .navbar {
        display: flex;
        position: relative;
        width: 100vw;
        height: 50px;
        align-items: center;
        justify-content: center;
        background-color: #000000;
      }
      .navbar-item {
        display: flex;
        position: relative;
        width: 100px;
        height: 38px;
        align-items: center;
        justify-content: center;
      }
      .navbar-item > #button {
        width: 100%;
        height: 100%;
        background-color: #000000;
        color: #ffffff;
        border: 2px solid transparent;
        cursor: pointer;
        border-radius: 6px;
        transition: all 250ms 50ms ease;
      }
      .navbar-item > #button:hover {
        border: 2px solid white;
      }
      .navbar-item > .dropdown {
        display: block;
        position: absolute;
        top: 130%;
        width: 300px;
        height: 0px;
        padding: 0px;
        overflow: hidden;
        transition: all 100ms 50ms ease;
        border-radius: 6px;
      }
      .navbar-item > .dropdown[aria-hidden="false"] {
        height: auto;
        padding: 12px 0px;
        background-color: #000000;
      }
      .navbar-item > .dropdown > .link {
        display: block;
        width: 100%;
        height: auto;
        padding: 6px;
        color: #ffffff;
        text-decoration: none;
        overflow: hidden;
        cursor: pointer;
        background-color: #000000;
        border-radius: 4px;
      }
      .navbar-item > .dropdown > .link:hover {
        text-decoration: underline;
        background-color: #1b1b1b;
      }
      .navbar-item > .dropdown > .innerDropdown {
        display: block;
        width: 90%;
        height: 0px;
        padding: 0px;
        overflow: hidden;
        transition: all 100ms 50ms ease;
        border-radius: 6px;
        margin: auto;
      }
      .navbar-item > .dropdown > .innerDropdown[aria-hidden="false"] {
        height: auto;
        padding: 12px 0px;
        background-color: #4e4e4e;
        margin: 12px auto;
        padding: 3px;
      }
      .navbar-item > .dropdown > .innerDropdown > p {
          color: white;
          text-align: start;
          word-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <nav class="navbar">
      <div class="navbar-item">
        <button id="button" type="button"><span>MENU</span></button>
        <div class="dropdown" aria-hidden="true">
          <a class="link" id="sub-button">Receitas</a>
          <div class="innerDropdown" aria-hidden="true">
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ab nisi
              adipisci quos minima, nam non laboriosam sed necessitatibus
              asperiores perspiciatis voluptate laborum at debitis maxime
              dolorum nemo cumque dolore molestias?
            </p>
          </div>
        </div>
      </div>
    </nav>
    <script>
      const button = document.querySelector("#button");
      const subbutton = document.querySelector("#sub-button");

      button.addEventListener("click", () => {
        var dropdown = document.querySelector(".dropdown");
        if (dropdown.getAttribute("aria-hidden") == "true") {
          dropdown.setAttribute("aria-hidden", "false");
        } else {
          dropdown.setAttribute("aria-hidden", "true");
        }
      });
      subbutton.addEventListener("click", () => {
        var innerDropdown = document.querySelector(".innerDropdown");
        if (innerDropdown.getAttribute("aria-hidden") == "true") {
          innerDropdown.setAttribute("aria-hidden", "false");
        } else {
          innerDropdown.setAttribute("aria-hidden", "true");
        }
      });
    </script>
  </body>
</html>

Se for fora do dropdown seria algo assim:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0px;
        margin: 0px;
        box-sizing: border-box;
      }
      .navbar {
        display: flex;
        position: relative;
        width: 100vw;
        height: 50px;
        align-items: center;
        justify-content: center;
        background-color: #000000;
      }
      .navbar-item {
        display: flex;
        position: relative;
        width: 100px;
        height: 38px;
        align-items: center;
        justify-content: center;
      }
      .navbar-item > #button {
        width: 100%;
        height: 100%;
        background-color: #000000;
        color: #ffffff;
        border: 2px solid transparent;
        cursor: pointer;
        border-radius: 6px;
        transition: all 250ms 50ms ease;
      }
      .navbar-item > #button:hover {
        border: 2px solid white;
      }
      .navbar-item > .dropdown {
        display: block;
        position: absolute;
        top: 130%;
        width: 300px;
        height: 0px;
        padding: 0px;
        overflow: hidden;
        transition: all 100ms 50ms ease;
        border-radius: 6px;
      }
      .navbar-item > .dropdown[aria-hidden="false"] {
        height: auto;
        padding: 12px 0px;
        background-color: #000000;
      }
      .navbar-item > .dropdown > .link {
        display: block;
        width: 100%;
        height: auto;
        padding: 6px;
        color: #ffffff;
        text-decoration: none;
        overflow: hidden;
        cursor: pointer;
        background-color: #000000;
        border-radius: 4px;
      }
      .navbar-item > .dropdown > .link:hover {
        text-decoration: underline;
        background-color: #1b1b1b;
      }
      .receitaBox {
        display: block;
        position: absolute;
        top: 50%;
        width: 80%;
        height: 0px;
        padding: 0px;
        overflow: hidden;
        transition: all 100ms 50ms ease;
        border-radius: 6px;
        margin: auto;
      }
      .receitaBox[aria-hidden="false"] {
        height: auto;
        padding: 12px 0px;
        background-color: #4e4e4e;
        margin: 12px auto;
        padding: 12px;
      }
      .receitaBox > p {
          color: white;
          text-align: start;
          word-wrap: break-word;
      }
    </style>
  </head>
  <body>
    <nav class="navbar">
      <div class="navbar-item">
        <button id="button" type="button"><span>MENU</span></button>
        <div class="dropdown" aria-hidden="true">
          <a class="link" id="sub-button">Receitas</a>
        </div>
      </div>
    </nav>
    <div class="receitaBox" aria-hidden="true">
        <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ab nisi
            adipisci quos minima, nam non laboriosam sed necessitatibus
            asperiores perspiciatis voluptate laborum at debitis maxime
            dolorum nemo cumque dolore molestias?
        </p>
    </div>
    <script>
      const button = document.querySelector("#button");
      const subbutton = document.querySelector("#sub-button");

      button.addEventListener("click", () => {
        var dropdown = document.querySelector(".dropdown");
        if (dropdown.getAttribute("aria-hidden") == "true") {
          dropdown.setAttribute("aria-hidden", "false");
        } else {
          dropdown.setAttribute("aria-hidden", "true");
        }
      });
      subbutton.addEventListener("click", () => {
        var receitaBox = document.querySelector(".receitaBox");
        if (receitaBox.getAttribute("aria-hidden") == "true") {
          receitaBox.setAttribute("aria-hidden", "false");
        } else {
          receitaBox.setAttribute("aria-hidden", "true");
        }
      });
    </script>
  </body>
</html>

Claro que isso são apenas exemplos de implementação, altere e adapte da forma que precisar.

Espero ter lhe ajudado, até mais!

1 Curtida