responsive menu with jQuery and css

Navigation
-2

Galera I mounted a menu that appears when placing the cursor on the letter B.

The problem is that when it is left-aligned the menu disappears at the corner of the page.

If I remove the line (margin: 0px 0 0 -225px;) The problem is solved, but if I align the menu to the right the problem comes back.

Is there any way for jQuery to do this automatically?

Follow the ready menu: 

.menu2 {
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 2px 5px;
  height: 25px;
}

.link2 {
  margin: 0px 0 0 -225px;
  padding: 0;
  position: absolute;
  top: 28px;
  width: 260px;
  visibility: hidden;
  z-index: 5;
}

.sub_menu2_inicio {
  border-top: 1px solid #ffffff;
}

.sub_menu2 {
  padding: 10px 8px;
  cursor: pointer;
  display: block;
  color: #ffffff;
  background: #484848;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
}

.sub_menu2_fim {
  border-bottom: 1px solid #ffffff;
}

.sub_menu2:hover {
  background: #1E90FF;
}

.menu2:hover ul {
  display: block;
  visibility: visible;
  left: 0;
}

.sub_menu_seta {
  padding: 10px 8px;
}

.sub_menu_seta::after {
  content: '';
  width: 0px;
  height: 0px;
  display: block;
  position: absolute;
  margin: auto;
  left: 225px;
  right: 0;
  top: 7px;
  border-bottom: 7px solid #484848;
  border-right: 7px solid rgba(0, 0, 0, 0);
  border-left: 7px solid rgba(0, 0, 0, 0);
  border-top: 7px solid rgba(0, 0, 0, 0);
}
<li class="menu2">

  <i>B</i>

  <ul class="link2">
    <div class='sub_menu_seta'></div>

    <li class='sub_menu2 sub_menu2_inicio'>Sobre</li>

    <li class='sub_menu2 sub_menu2_fim'><b>Feedback</b></li>
  </ul>
</li>
    
asked by anonymous 21.03.2016 / 14:48

3 answers

1

I was able to think of an example using the .offset() property of jquery, following the example: 




$(document).ready(function() {
 $(".menu2").onMouseEnter(teste(this));
});



function teste(el) { // Sou péssimo em nomear funções então sempre deixo teste()



largTela = $(window).width();
telaMeio = largTela / 2; // Divide o tamanho da tela por dois



posElemento = $(el).offset().left();



if(posElemento > telaMeio) {
 $(el).find(".link2").addClass("direita");
}
else {
 $(el).find(".link2").addClass("esquerda");
}



}

When you hover over the element with the .menu2 class it will call the teste() function that calculates the screen size divided by two, and verifies that the child element of .menu2 with class .link2 is positioned to the left larger than half the screen. If it is, add the class .direita if not the class .esquerda . In css the only thing that changes is that instead of placing the sub-menu in the .link2 class, you put it in the .direita and .esquerda classes. For example: 


.direita {
 ... css para quando o menu estiver na direita
}
.esquerda {
 ... css para quando o menu estiver na esquerda
}
    
21.03.2016 / 20:39
1

With average queries it would look something like this: 


... Seu estilo normal
.link2 {
  margin: 0px 0 0 0; // Para se ajustar quando o menu estiver na esquerda
  padding: 0;
  position: absolute;
  top: 28px;
  width: 260px;
  visibility: hidden;
  z-index: 5;
}

@media only screen and (max-width: 800px) {
 .link2 {
   margin: 0px 0 0 0 -225px !important;
 }
}

In this code when the screen is less than 800px (assuming that from this screen size or smaller your menu will be direct) the menu goes to -225px the left being adjusted with the menu that would now be on the right.

    
21.03.2016 / 18:02
0

Then use a separate css only on that menu: 


css:
...
.link2 {... Seu estilo normal aqui}


.link2.direita {
  margin-left: -260px;
}



.direita .sub_menu_seta::after {
  left:280px;
}

And just add the right class in ul of the settings class="link2 right"

    
21.03.2016 / 19:34
Querys MYSQL PERTENCE Chat with PHP, AJAX and MySQL