HTML Ultimo Item do menu influenciando na hover de todos os itens

admtwbful · 25 de outubro de 2023

Quando você passa o mouse em cima de qualquer item o ultimo item do menu fica abrindo sozinho

https://codepen.io/admtwbful/pen/bGzdMEB

CSS

<style>


  .wrapper{
  width: 100%;
padding: 5px;
  margin: 0 auto;
  clear: both;

  text-align: center;
  vertical-align: middle;
    display: flex;
  justify-content: center;
  align-items: center;
}
ul.menu{
  width: 100%; 
  margin: 0 auto;
  
}

 ul.menu li{
  cursor: pointer;
  float: left;
  height: 50px;
  list-style: none;
  position: relative;
  width: 60px;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
 


}

  li.menu a{
  display:inline;
  width: 60px;
  height: 50px;
  text-decoration: none;
  color: #fff;
  position: absolute;
  transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  text-align: center;
  vertical-align: middle;
  display: flex;
  justify-content: center;
  align-items: center;
}




  ul.menu:first-child a{

  background: #e8c813;

}

 ul.menu li:nth-child(2) a{
  background: #ad1515;
}

ul.menu li:nth-child(3) a{
  background: #15ad36;
}

ul.menu li:nth-child(4) a{
  background: #2112a8;
}

ul.menu li:nth-child(5) a{
  background: #157dad;
}

ul.menu li:nth-child(6) a{
  background: #000000;
}

ul.menu li:nth-child(7) a{
  background: #9f9f00;
}

 li.menu:first-child:hover {
  background: #e8c813;
}

 li.menu:nth-child(2):hover{
  background: #ad1515;
}

li.menu:nth-child(3):hover {
  background: #15ad36;
}

 li.menu:nth-child(4):hover {
  background: #2112a8;
}

 li.menu:nth-child(5):hover {
  background: #157dad;
}

li.menu:nth-child(6):hover {
  background: #000000;
}

li.menu:nth-child(7):hover {
  background: #9f9f00;

}




 ul.menu li:hover a{
  background-position:center;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}

 ul.menu li:hover {
    transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  width: 160px;

}

p.menu{
  color: #ffffff;
  font-size: 15px;
  height: 50px;
  width: 200px;
  letter-spacing: 0;
  text-align: center;
  margin: 0px auto;
  vertical-align: middle;
  display: flex;
  justify-content: center;
  align-items: center;
  display: none;
}

.menu:hover  p{
  color: #ffffff;
  font-size: 15px;
  height: 50px;
  width: 200px;
  letter-spacing: 0;
  text-align: center;
  margin: 0px auto;
  vertical-align: middle;
  display: flex;
  justify-content: center;
  align-items: center;

}




/*font-face*/
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 100;
  src: local('Lato Hairline'), local('Lato-Hairline'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/boeCNmOCCh-EWFLSfVffDg.woff) format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/KT3KS9Aol4WfR6Vas8kNcg.woff) format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/wkfQbvfT_02e2IWO3yYueQ.woff) format('woff');
}
                                    </style>

HTML

 <ul class="menu">
     <li class="menu">
       <a href="">A</a>
       <p class="menu"> ABBA </p>
     </li>
     
      <li class="menu">
       <a href="">V</a>
       <p class="menu"> VI </p>
     </li>
     
      <li class="menu">
       <a href="">M</a>
       <p class="menu"> Mukka </p>
     </li>
     
     <li class="menu">
       <a href="">U</a>
       <p class="menu"> Utility </p>
     </li>
     
     <li class="menu">
       <a href="">P</a>
       <p class="menu"> Pcs </p>
     </li>
     <li class="menu">
       <a href="">B</a>
       <p class="menu"> Biosho </p>
     </li>
     <li class="menu">
       <a href="">N</a>
       <p class="menu"> Notivi </p>
     </li>
  </ul>
</div>

Public2004 · 25 de outubro de 2023

7 horas atrás, admtwbful disse:

Quando você passa o mouse em cima de qualquer item o ultimo item do menu fica abrindo sozinho

Boas, na verdade em qq hover ele vai abrir todos os itens, mas o q dá pra ver é só o último... (sua declaração no css define esse comportamento).

Tá meio confuso seus códigos, está usando para elementos diferentes no html, classe de mesmo nome (não seria o ideal)... vejo tb float, position, o que seria desnecessário já que está a utilizar o flex... Não sei se é para aprendizado ou pra corrigir esse q postou, de qq forma dá pra melhorar, diga o q espera do resultado final, posicionamento, tamanho, etc...

Abs.

MailingTester · 26 de outubro de 2023

Na linha 128, especifique que é um elemento li
já que você usa a class menu, em <li> e em dentro das lis

admtwbful · 26 de outubro de 2023

@Public2004
fala meu caro, desde já obrigado pela resposta então é pra aprendizado é um projeto tambem próprio, caso tenha alguma solução que você possa ajudar, se puder documentar e explicar o que você mudaria eu agradeço.

@MailingTester já não está declarado ? achei que estava rsrs, obrigado pela resposta, se quiser dar uma sugestão de como melhorar o código eu agradeço.

Public2004 · 26 de outubro de 2023

@admtwbful Boas jovem. Segue um exemplo simples mas com mesmo resultado. CSS comentado para ajudar a esclarecer. Espero que seja útil. Abs.

CSS:

* {
	/* Zerando "margin" e "padding" para todos os elementos do html */
	margin: 0;
	padding: 0;
}

ul {
	/* Removendo o comportamento/estilo padrão do elemento "ul" */
	list-style: none;

	/* Definindo este elemento como "flex" */
	display: flex;

	/* Alinhamento Vertical para os elementos internos - no caso os "li's" */
	align-items: center;

	/* Alinhamento Horizontal */
	/* Obs. Para alinhar à esquerda, utilize: "start", para a direita: "end" e justificar + espaçar igualmente os "li's": "space-between" */
	justify-content: center;
}

ul li {
	/* Definindo os elementos "li" como flex e o alinhamento dos itens internos destes (mesmo conceito do bloco "ul" acima) */
	display: flex;
	align-items: center;
	justify-content: center;

	/* Definindo altura e largura inicial - e outros estilos apenas visualizar o comportamento */
	width: 100px;
	height: 100px;
	background: #f7f7f7;
	border: 1px solid #ddd;

	/* Alterar o cursor do mouse quando "hover" no elemento */
	cursor: pointer;

	/* Definindo uma transição suave quando "out hover" do elemento */
	transition: all .5s ease;
}

ul li span {
	/* Definindo que este elemento "span" é visível fora do "hover" */
	display: initial;
}

ul li p {
	/* Aqui o estado inicial (oculto) do elemento "p" fora do "hover" (auto-explicativo) */
	/* Obs. Se optar em ocultar utilizando "display: none", isso vai anular o efeito de transição */
	width: 0;
	opacity: 0;
	visibility: hidden;
	text-align: center;
}

ul li:hover {
	/* Muda a largura inicial do elemento "li" quando "hover" */
	/* Obs. Aqui você define o tamanho/largura expandido que deseja - pode usar medidas relativas também ( % ) */
	width: 200px;
}

ul li:hover span {
	/* Esconder este elemento "span" quando "hover" no seu repectivo elemento "li" */
	display: none;
}

ul li:hover p {
	/* Mostrar elemento "p" quando "hover" no respectivo elemento "li" + transição suave */
	/* Obs. Aqui deixamos a largura como "auto", pois a largura final/expansão já está definida acima no "ul li:hover" */
	width: auto;
	opacity: 1;
	visibility: visible;
	transition: all 1s ease;
}

HTML:

<ul>
	<li>
		<span>A</span>
		<p>First Element</p>
	</li>
	<li>
		<span>B</span>
		<p>Second Element</p>
	</li>
	<li>
		<span>C</span>
		<p>Third Element</p>
	</li>
	<li>
		<span>D</span>
		<p>Fourth Element</p>
	</li>
	<li>
		<span>E</span>
		<p>Fifth Element</p>
	</li>
	<li>
		<span>F</span>
		<p>Sixth Element</p>
	</li>
</ul>

admtwbful · 26 de outubro de 2023

@Public2004 rapaz um diagrama mesmo kkk, muito obrigado pelas explicações vou ler atentamente aprender um pouco mais.

Fala meu querido dei uma olhada aqui no exemplo que você fez

Seguindo este exemplo

<li> <span>A</span> <p>First Element</p> </li>

O elemento "A" dentro do span tem que ser mostrado quando passa o mouse junto com o "First Element" ( A - First Element ) ( Quando passar o mouse ).

Quando passo o mouse está mostrando somente o "First Element"

Como vou ter outros menus junto com esse teria que colocar o nome da class dentro de cada elemento no css

.menu ul { 

}

Outra coisa que reparei também sumiu as cores, é importante cada item do menu ter uma cor diferente.

Se tiver alguma ideia de como me ajudar, te agradeço, muito obrigado.

Public2004 · 26 de outubro de 2023

1 hora atrás, admtwbful disse:
Seguindo este exemplo
<li> A First Element </li>
O elemento "A" dentro do span tem que ser mostrado quando passa o mouse junto com o "First Element" ( A - First Element ) ( Quando passar o mouse ).

Quando passo o mouse está mostrando somente o "First Element"

Fica meio redundante, mas para não quebrar a transição, pode fazer isso: <li> A A - First Element </li> (repetir no "p" o conteúdo do "span")

1 hora atrás, admtwbful disse:
Como vou ter outros menus junto com esse teria que colocar o nome da class dentro de cada elemento no css
.menu ul { 

}

Basta criar e definir uma classe para cada bloco ul.

No css:

ul.menu1{...}

ul.menu2{...}

...

e no Html

<ul class='menu1'>...

<ul class='menu2'>

...

1 hora atrás, admtwbful disse:

Outra coisa que reparei também sumiu as cores, é importante cada item do menu ter uma cor diferente.

Sim, eu só fiz um exemplo simples, para colorir os elementos, faça como antes declarando para cada item uma cor:

li:nth-child( li-number ) {background: your-color}

Abs.

admtwbful · 26 de outubro de 2023

@Public2004 vou tentar aqui qualquer dúvida, chamo aqui, muito obrigado pela atenção.

admtwbful · 3 de novembro de 2023

Olá, então estou encontrando alguns problemas para finalizar o menu, vou tentar explicar aqui qualquer dúvida só me pedir que tento melhor a explicação

CSS

ul.menu {
	/* Removendo o comportamento/estilo padrão do elemento "ul" */
	list-style: none;

	/* Definindo este elemento como "flex" */
	display: flex;

	/* Alinhamento Vertical para os elementos internos - no caso os "li's" */
	align-items: center;

	/* Alinhamento Horizontal */
	/* Obs. Para alinhar à esquerda, utilize: "start", para a direita: "end" e justificar + espaçar igualmente os "li's": "space-between" */
	justify-content: center;

}

ul.menu li {
	/* Definindo os elementos "li" como flex e o alinhamento dos itens internos destes (mesmo conceito do bloco "ul" acima) */
	display:initial;
	align-items: center;
	justify-content: center;

	/* Definindo altura e largura inicial - e outros estilos apenas visualizar o comportamento */
	width: 50px;

	background: #f7f7f7;
	border: 1px solid #ddd;

	/* Alterar o cursor do mouse quando "hover" no elemento */
	cursor: pointer;
	color:white;
	/* Definindo uma transição suave quando "out hover" do elemento */
	transition: all .5s ease;
}

ul.menu li span {
	/* Definindo que este elemento "span" é visível fora do "hover" */
	display: initial;
	align-items: center;
	justify-content: center;
	
}


ul.menu li p {
	/* Aqui o estado inicial (oculto) do elemento "p" fora do "hover" (auto-explicativo) */
	/* Obs. Se optar em ocultar utilizando "display: none", isso vai anular o efeito de transição */
	display:initial;
	width: 0;
	opacity: 0;
	visibility: hidden;
	text-align: center;
	
}

ul.menu li:hover {
	/* Muda a largura inicial do elemento "li" quando "hover" */
	/* Obs. Aqui você define o tamanho/largura expandido que deseja - pode usar medidas relativas também ( % ) */
	width: 200px;
}

ul.menu li:hover span {
	/* Esconder este elemento "span" quando "hover" no seu repectivo elemento "li" */
	display:initial;
	color:white;
	align-items: center;
	justify-content: center;
	text-align: center;
	
}



ul.menu li:hover p {
	/* Mostrar elemento "p" quando "hover" no respectivo elemento "li" + transição suave */
	/* Obs. Aqui deixamos a largura como "auto", pois a largura final/expansão já está definida acima no "ul li:hover" */
	width: auto;
	opacity: 1;
	visibility: visible;
	transition: all 1s ease;
	color:white;
	
}



li.menu:first-child {
  background: #e8c813;
}

 li.menu:nth-child(2){
  background: #ad1515;
}

li.menu:nth-child(3) {
  background: #15ad36;
}

 li.menu:nth-child(4) {
  background: #2112a8;
}

 li.menu:nth-child(5) {
  background: #157dad;
}

li.menu:nth-child(6) {
  background: #000000;
}

li.menu:nth-child(7) {
  background: #9f9f00;

}

HTML

<ul class="menu">
	<li class="menu">
	<a href="?fotos"><span><i class="fa-solid fa-image" style="color:black;font-size:18px;"></i></span></a>
		<p> Foto </p>
	</li>

	<li class="menu">
		<a href="?videos"><span><i class="fa-solid fa-camera-movie" style="color:black;font-size:18px;"></i></span></a>
		<p> Vídeos </p>
	</li>

	<li class="menu">
		<a href="?musica"><span><i class="fa-solid fa-music" style="color:black;font-size:18px;"></i></span></a>
		<p> Música </p>
	</li>

	<li class="menu">
		<a href="?usuarios"><span><i class="fa-solid fa-users" style="color:black;font-size:18px;"></i></span></a>
		<p> Usuários </p>
	</li>

	<li class="menu">
		<a href="?pcs"><span><i class="fa-solid fa-computer" style="color:black;font-size:18px;"></i></span></a>
		<p> Computadores </p>
	</li>
	<li class="menu">
		<a href="?pcs"><span><i class="fa-solid fa-microchip-ai" style="color:white;font-size:18px;"></i></span></a>
		<p> BIOS </p>
	</li>

</ul>

Agora aqui em baixo vou postar alguns prints de como esta ficando.

No print fechado é mais para conseguir entender como está ficando resultado final.

No Print de BIOS(Fundo Preto ) e Print de Foto ( Fundo Amarelo ) Preciso de ajuda com 3 coisas ( Que na verdade todas as outras cores vão seguir o mesmo padrão )

Primeira coisa é uma dúvida de quando eu coloco <a href="foto"> por exemplo quando eu clico no botão amarelo por exemplo ele não manda para o link, nem mostra o link se quiser na barra de endereços em baixo, só mostra e redireciona quando clica especificamente em cima do icone de foto.

Tem alguma maneira de deixar o botão todo clica-vel ?

Segunda questão sobre o LINK seria quando usuários estiver na página ?foto ficar aberto o botão Amarelo

Terceira dúvida seria como faço para não ter um tamanho fixo por botão ? exemplo cada botão se esticar devido ao tamanho que está dentro da TAG Usuários por exemplo

Desde já obrigado pela ajuda pessoal.

Aba de Foto Aberta

Aba de BIOS Aberta

Todas as Abas fechadas esperando passar o mouse.

washalbano · 4 de novembro de 2023

Bom, pelo que pude perceber, você não precisa de uma lista.
Então segue sugestão usando nav, com php:

<?php
$menu = [
  [
    'icon'  => 'fa-image',
    'link'  => 'foto',
    'label' => 'Foto',
  ],
  [
    'icon'  => 'fa-Vídeo',
    'link'  => 'videos',
    'label' => 'Vídeos',
  ],
  [
    'icon'  => 'fa-music',
    'link'  => 'musica',
    'label' => 'Música',
  ],
  [
    'icon'  => 'fa-users',
    'link'  => 'usuarios',
    'label' => 'Usuários',
  ],
  [
    'icon'  => 'fa-computer',
    'link'  => 'pcs',
    'label' => 'Computadores',
  ],
  [
    'icon'  => 'fa-microchip',
    'link'  => 'BIOS',
    'label' => 'BIOS',
  ],
];
$page = $_GET['p'] ?? 'BIOS'
?>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>admtwbful menu buttons</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
  <?php
  $navigator = '<nav>';
foreach ($menu as $item) {
  $active = $item['link'] === $page ? ' class="active"' : '';
  $navigator .= "<a href='?p=$item[link]'$active>"
  ."<div class='icon'><i class='fa-solid $item[icon]'></i></div>"
  ."<span>$item[label]</span>"
  .'</a>';
}
echo $navigator.'</nav>';
?>
</body>

</html>

:root {
  --size: 50px;
}
* {
  box-sizing: border-box;
}
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans',
    'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  background-color: #7f7f7f;
}
nav {
  /* Definindo este elemento como "flex" */
  display: flex;

  /* Alinhamento Vertical para os elementos internos - no caso os "li's" */
  align-items: center;

  /* Alinhamento Horizontal */
  /* Obs. Para alinhar à esquerda, utilize: "start", para a direita: "end" e justificar + espaçar igualmente os "li's": "space-between" */
  justify-content: center;
  gap: 4px;
}

nav a {
  /* Definindo os elementos "li" como flex e o alinhamento dos itens internos destes (mesmo conceito do bloco "ul" acima) */
  display: flex;
  align-items: center;

  /* Definindo altura e largura inicial - e outros estilos apenas visualizar o comportamento */
  max-width: var(--size);
  height: var(--size);

  /* border: 1px solid #ddd; */
  box-shadow: inset 0 0 0 1px #ddd;

  /* Alterar o cursor do mouse quando "hover" no elemento */
  color: white;
  /* Definindo uma transição suave quando "out hover" do elemento */
  transition: all 0.5s ease;
  text-decoration: none;
  overflow: hidden;
  padding-right: 24px;
}

nav a span {
  opacity: 0;
  transition: all 0.5s ease;
}

nav a:hover,
nav a.active {
  /* Muda a largura inicial do elemento "li" quando "hover" */
  /* Obs. Aqui você define o tamanho/largura expandido que deseja - pode usar medidas relativas também ( % ) */
  max-width: 300px;
  transition: max-width 1.75s ease;
}
nav a:hover span,
nav a.active span {
  opacity: 1;
}

nav a:hover .icon,
nav a.active .icon {
  border-top: 3px solid #157dad;
}

nav a:first-child {
  background: #e8c813;
}

nav a:nth-child(2) {
  background: #ad1515;
}

nav a:nth-child(3) {
  background: #15ad36;
}

nav a:nth-child(4) {
  background: #2112a8;
}

nav a:nth-child(5) {
  background: #157dad;
}

nav a:nth-child(6) {
  background: #000000;
}

nav a:nth-child(7) {
  background: #9f9f00;
}

nav .icon {
  border: 3px solid transparent;
  min-width: var(--size);
  height: var(--size);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

screenshot de botão foto ativado
+ hover sobre o botão Computadores

Public2004 · 6 de novembro de 2023

@washalbano Boa sugestão. Atende as questões do último post do @admtwbful, não sei quanto ao conhecimento dele em php, mas seria também a minha sugestão para a necessidade, php ou js.

Abs.

admtwbful · 6 de novembro de 2023

@Public2004 Obrigado pela ajuda.

@washalbano Olá meu amigo já consegui implementar o código que passou acima porém tenho algumas dúvidas.

No caso uma pergunta como eu faria caso precisasse colocar um dos links do menu externamente ? exemplo http://www.google.com.br

Penso que poderia adicionar o ?p= dentro do array no indice link 'item', pois quando não quisesse passar parametro nenhum no caso um site externo somente não colocaria o ?p, certo ?

Então eu preciso colocar uma class dentro do nav no css e no codigo html

poderia fazer assim ?

em todos os itens css poderia utilizar assim ?

CSS

nav.menu .icon {

}

HTML

 $navigator = '<nav class="menu"> ';

poderia ser assim ?

Muito obrigado pela ajuda.

washalbano · 12 de novembro de 2023

Em 06/11/2023 às 13:06, admtwbful disse:

como eu faria caso precisasse colocar um dos links do menu externamente ? exemplo http://www.google.com.br

passe o link inteiro. ex.:

'link' => '?p=foto'

ou:

'link' => 'https://google.com'

sugiro passar até mais um atributo:

'target' => '_blank'

e ao montar o menu:

$navigator .= "<a href='$item[link]' target='$item[target]' $active>"

Entrar

HTML Ultimo Item do menu influenciando na hover de todos os itens

Posts recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Quem está navegando aqui 0 usuários estão online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais