3

Dado o seguinte trecho de código:

  <div class="ui stackable inverted blue container menu">
    <a class="item" href="/menu">
        logo
    </a>
    <a class="item" href="/menu">
        <i class="large settings  icon"></i>
        <span>Distribui&ccedil;&atilde;o Autom&aacute;tica</span>
    </a>

     <a class="item disabled" href="#" >
        <i class="large options icon "></i>
        <span>Distribui&ccedil;&atilde;o Manual</span>
    </a>

    <a class="item" href="/users">
        <i class="large users icon"></i>
        <span>Usu&aacute;rios</span>
    </a>

    <a class="item" href="/pesquisar_acoes">
        <i class="large search icon"></i>
        <span>Pesquisar</span>
    </a>


    <div class="ui pointing dropdown link item">
        <span class="text"><i class="large line chart icon"></i>Relatórios</span>
        <i class="dropdown icon"></i>
        <div class="menu">
            {#<div class="header">Categories</div>#}

            <a class="item" href="/acoes_cadastradas">Ações Cadastradas</a>

            <div class="divider"></div>

            <a class="item" href="/relatorio_erros">Erros na Distribuição</a>
            <a class="item" href="/relatorio_distribuicao"> Processos Distribuídos</a>
        </div>
    </div>




    <a class="item" href="/desloga">
        <span class="ui teal button"><i class="sign out icon"></i> Sair</span></a>




</div>

Preciso que ao redimensionar a tela para um max-width = 792px, fique visível apenas a tag que contém a palavra LOGO. As demais devem ser ocultadas. Como fazer isso usando apenas css?

0

2 Respostas 2

2

Uma das soluções seria a seguinte :

Utilizando media queries e display:none em conjunto display:block.

Há varios caminhos usando os seletores do css, ai vai da criatividade.

<div class="ui stackable inverted blue container menu">
    <a class="item" href="/menu">
        logo
    </a>
    <a class="item" href="/menu">
        <i class="large settings  icon"></i>
        <span>Distribui&ccedil;&atilde;o Autom&aacute;tica</span>
    </a>

     <a class="item disabled" href="#" >
        <i class="large options icon "></i>
        <span>Distribui&ccedil;&atilde;o Manual</span>
    </a>

    <a class="item" href="/users">
        <i class="large users icon"></i>
        <span>Usu&aacute;rios</span>
    </a>

    <a class="item" href="/pesquisar_acoes">
        <i class="large search icon"></i>
        <span>Pesquisar</span>
    </a>


    <div class="ui pointing dropdown link item">
        <span class="text"><i class="large line chart icon"></i>Relatórios</span>
        <i class="dropdown icon"></i>
        <div class="menu">
            {#<div class="header">Categories</div>#}

            <a class="item" href="/acoes_cadastradas">Ações Cadastradas</a>

            <div class="divider"></div>

            <a class="item" href="/relatorio_erros">Erros na Distribuição</a>
            <a class="item" href="/relatorio_distribuicao"> Processos Distribuídos</a>
        </div>
    </div>
    <a class="item" href="/desloga">
        <span class="ui teal button"><i class="sign out icon"></i> Sair</span></a>
</div>

<style>
@media(max-width:792px){
	a, .pointing{display:none;}
	a:first-child{display: block;}
	
}
</style>

2

Pode usar o @media do CSS3 (http://www.w3schools.com/cssref/css3_pr_mediaquery.asp) para criar a regra de quando aplicar um certo estilo a determinado elemento, e aplicar

display: none;

para os elementos que devem ser escondidos caso a regra seja verdadeira.

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 .