javascript - Mover links para menu list quando o tamanho da mediascreen for alterado - Stack Overflow em Português
Mover links para menu list quando o tamanho da mediascreen for alterado
Estou com um dificuldade para colocar alguns links dentro de outro link.
#menu_header_right{
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);}
background-color: #f1f1f1;}
<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>
<a class="menu_header_right"  href="pg_cadastro.php"/>Menu</a>
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.
editada 18/08/16 às 18:13
perguntada 18/08/16 às 16:18
É um bootstrap? Quer fazer algum efeito? – William Aparecido Brandino 18/08/16 à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/16 às 17:25
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:
#menu_header_right a {
#menu_header_right .dropdown-content a {
#menu_header_right a{
#menu_header_right a.menu_header_right {
Note que todos elementos dentro do media-query sobreescrevem as propriedades iniciais:
E este é um caso "especial":
Se usar somente:
.menu_header_right {
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:
https://pt.stackoverflow.com/a/143893/3635
respondida 18/08/16 às 18:12
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/16 à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/16 à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 :/ – Guilherme Nascimento 18/08/16 à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/16 às 19:37