Changing html hierarchy using jquery for responsive site

Question

Changing html hierarchy using jquery for responsive site

Navigation

#1 by (1 votes)

0

I'm making a responsive website when I came across a problem, in the tablet layout the menu gets hidden so when you press the button it appears by making a slide, but the client wants the logo to appear on top of the other menus. In the layout for pc the logo is the 3 list-has counting on item 0. I am wanting to change the hierarchy using jquery, but I am not getting it, could anyone help me? Thanks

HTML:

    <nav class="nav">
            <ul>
                <li><a href="#"><img class="lupa" src="img/lupa.png" alt="Pesquisar" onClick="MostrarCampoPesquisa()"></a>
                  <div id="caixaPesquisa">
                        <form id="formPesquisa" action="" method="get">
                            <input id="pesquisa" type="text" value="" maxlength="150" placeholder="Pesquisar..." onBlur="EsconderCampoPesquisa()">
                        </form>
                  </div>
                </li>
                <li><a href="#">Página Inicial</a></li>
                <li><a href="#">Produtos<img class="flechaVertical" src="img/flecha.png" alt="flecha"></a>
                    <ul>
                        <li><a href="#">Aparadores de Livros</a></li>
                        <li><a href="#">Caixinhas</a></li>
                        <li><a href="#">Chaveiros</a></li>
                        <li><a href="#">Decoração</a></li>
                        <li><a href="#">Pontos Turísticos</a></li>
                        <li><a href="#">Porta Celulares</a></li>
                        <li><a href="#">Porta Guardanapos</a></li>
                        <li><a href="#">Porta Retratos</a></li>
                        <li><a href="#">Relógios</a></li>
                        <li><a href="#">Topos De Bolos</a></li>
                        <li><a href="#">Veículos</a></li>
                    </ul>
                </li>
                <li><a href="#"><img id="navLogo" class="navLogo" src="img/logotipo.png" alt="Versatyll"></a></li>
                <li><a href="#">Sobre</a></li>
                <li><a href="#">Contato</a></li>
                <li><a href="#">Dúvidas</a></li>
            </ul>
        </nav>

CSS:

#caixaPesquisa{
    padding-left:15px;  
}

#pesquisa{
    width:160px;
    height:50px;
    margin-left:10px;
    display:none;
    position:absolute;
    text-align:center;
    border:1px solid #222222;   
}

/* -------------------------------*/

/* Navigation Menus */

.lupa{
    width:30px;
    height:30px;    
}

.flechaVertical{
    width:8px;
    height:8px;
    padding-left:5px;   
}

.navLogo{
    width:160px;
    height:90px;    
}

.nav{
    width: 100%;
    margin: 0;
    text-align: left;
    background-color: #FFFFFF;
    position: fixed;
}

.nav ul{    
    list-style:none;
    padding:0;
    margin:0;
    position:relative;
}

.nav ul li{
    display:inline-block;
}

.nav ul li a,visited{
    color:#000000;
    display:block;
    padding:10px;
    padding-left:85px;
    text-decoration:none;
}

.nav ul li a:hover{
    color:#990000;
    text-decoration:none;
}

javascript html jquery css

asked by anonymous 02.05.2016 / 20:19

1 answer

Select with Sql and Dynamic Input Compare 2 variables in a select with Angular

score 1 · Accepted Answer

You can manipulate the gift in this case by using remove () to remove the logo from third place and insertBefore to insert it again. To detect if you are being accessed from a mobile screen in your code, use the width method of the jQuery Window element.

I'll leave an example below, click run snippet of code, see full page and resize the screen to see its effect:

$logo = $("ul li").eq(3);
function positionLogo(){
  if($(window).width() < 480){ //se a tela for menor que 480 px
    $logo.remove().insertBefore("ul li:first-child"); //insiro logo no começo
  }
  else{                             //senão
    $logo.remove().insertAfter("ul li:nth-child(2)"); //insiro logo como terceiro item
  }
}
$(document).ready(positionLogo);
$(window).resize(positionLogo);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul><li>Item0</li><li>Item1</li><li>Item2</li><li>Logo<imgwidth="50"src="http://www.skrenta.com/images/stackoverflow.jpg"></li>
</ul>