1

Estou com um dificuldade para colocar alguns links dentro de outro link.

Por exemplo:

#menu_header_right{
float:right;
}
.dropdown{
	width:80px;
	position: relative;
    display: inline-block;}
    		
.dropdown-content {
	display: none;
    position: absolute;
    right:0px;
	top:55px;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}

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

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

.dropdown:hover .dropdown-content {
	display: block;}
<div id="menu_header_right">
	<a class="anunciar"   href="pg_anunciar.php"/>Anuciar Imóvel</a>
	<a class="entrar"     href="pg_logout.php"/>Logout</a>
	<a id="pg_inicial_perfil" href="pg_perfil.php"/></a>
	<a class="entrar"     href="pg_login.php"/>Login</a>
	<a class="criarconta" href="pg_cadastro_usuario.php"/>Criar Conta</a>
	<div class="dropdown">
	  <a class="menu_header_right"  href="pg_cadastro.php"/>Menu</a>
  	  <div class="dropdown-content">
  	  	<a href="#">Link 1</a>
	    <a href="#">Link 2</a>
	    <a href="#">Link 3</a>
	    
	  </div>
	</div>
</div>

A ideia é que ao redimensionar a tela todos os links fiquem dentro do link "menu" junto com os link1, link2 e link3. Agradeço qualquer ideia ou direção.

2
  • É um bootstrap? Quer fazer algum efeito? 18/08/2016 às 16:55
  • @WilliamAparecidoBrandino Não, não coisinha bem simples mesmo... só preciso fazer o movimento mesmo...Depois eu bolo uns efeitos....
    – MagicHat
    18/08/2016 às 17:25

1 Resposta 1

1

Pelo que entendi a unica coisa que lhe falta é aplicar a media-query, neste caso você pode usar um meria-query básico apenas para largura, no entanto é preciso escolher a "largura máxima" para aplicar o efeito (ou minima, depende da ordem desejada):

No caso vamos supor (pelo que testei) que a largura minima para usar a versão dropdown seria 360px (largura média do #menu_header_right), assim você pode usar algo como:

@media (max-width: 360px) {
    /* seu estilo aqui */
}

#menu_header_right{
    float:right;
}
#menu_header_right a {
     display: inline-block;
}
.dropdown{
    width:80px;
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    right:0px;
    top:55px;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

#menu_header_right .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
 }

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

.dropdown:hover .dropdown-content {
    display: block;
}

@media (max-width: 360px) {
    #menu_header_right{
        float: none;
    }
    #menu_header_right a{
        display: block;
    }

    .dropdown{
        width: auto;
        position: relative;
        display: block;
    }

    .dropdown-content {
         display: block;
         position: static;
    }

    #menu_header_right a.menu_header_right {
        display: none;
    }
}
<div id="menu_header_right">
	<a class="anunciar"   href="pg_anunciar.php"/>Anuciar Imóvel</a>
	<a class="entrar"     href="pg_logout.php"/>Logout</a>
	<a id="pg_inicial_perfil" href="pg_perfil.php"/></a>
	<a class="entrar"     href="pg_login.php"/>Login</a>
	<a class="criarconta" href="pg_cadastro_usuario.php"/>Criar Conta</a>
	<div class="dropdown">
	  <a class="menu_header_right"  href="pg_cadastro.php"/>Menu</a>
  	  <div class="dropdown-content">
  	  	<a href="#">Link 1</a>
	    <a href="#">Link 2</a>
	    <a href="#">Link 3</a>
	    
	  </div>
	</div>
</div>

Note que todos elementos dentro do media-query sobreescrevem as propriedades iniciais:

#menu_header_right{
    float: none;
}
#menu_header_right a{
    display: block;
}

.dropdown{
    width: auto;
    position: relative;
    display: block;
}

.dropdown-content {
     display: block;
     position: static;
}

E este é um caso "especial":

#menu_header_right a.menu_header_right {
    display: none;
}

Se usar somente:

.menu_header_right {
    display: none;
}

A regra #menu_header_right a terá prioridade, pois os IDs e regras mais descritivas geralmente tem uma prioridade maior na "cascata", então ou você usa mais descritivo #menu_header_right a.menu_header_right seguindo a regra de maior valor, ou usa !important.

No caso coloquei um display: none; pois se os links ficarem verticais e visíveis, o menu não será necessário.

Para entender mais sobre as prioridades recomendo estes links:

5
  • Então, eu tenho as mediaqueries configuradas aqui, o penalty está no display:none. Como dar um display none nos links Anunciar/Logar/Logout/CriarConta quando a media for atingida e jogar esses links junto com os links 1,2,3, ou seja eu quero que quando ficar mobile por exemplo só a pareça o link menu e dentro os outros, não sei se estou me expressando de foram a ser entendido...
    – MagicHat
    18/08/2016 às 19:12
  • Minha dúvida é se vou precisar outros "ids" para os mesmos links que estou a setar display:none, ou se tem alguma forma de fazer sem essa gambi... Sei lá com js ou php...
    – MagicHat
    18/08/2016 às 19:13
  • @MagicHat copia o HTML e CSS que postei, coloca em um novo arquivo html limpo, depois abra ele no browser e redimensione a largura da janela até ficar menor que 360px, é que no StackSnippet não tem como simular o efeito :/
    – Syzoth
    18/08/2016 às 19:13
  • Então, manow, está com o mesmo efeito quando se póe o snippet na tela cheia, ou seja, o link menu some, e os links hover ficam abertos automaticamente, mas não é esse o objetivo. O objetivo é sumir "Anunciar/Logar/Logout/CriarConta" e só ficar "Menu" e quando hover "Menu" abre com os links já dele mais os 4 que sumiram, saca?
    – MagicHat
    18/08/2016 às 19:37
  • @MagicHat aquele menu toggle?
    – Syzoth
    22/08/2016 às 15:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .