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
Este tópico foi fechado automaticamente 3 dias depois da última resposta. Novas respostas não são mais permitidas.