responsive menu with jQuery and css

Asked

Viewed 488 times

-2

Galera I set up a menu that appears when placing the cursor over the letter B.

The problem is that when it is aligned to the left the menu disappears in the corner of the page.

If I remove the line (margin: 0px 0 0 -225px;) The problem is solved, however if I align the menu on the right the problem returns.

Is there any way jQuery can 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>

javascript jquery html css

  • Your questions are hard to understand. Words exchanged, lack of agreement. So it is difficult to understand and help you. I suggest you explain better, review your question slowly and see if you understand it yourself. It’s a suggestion. Now, there’s a CSS property in your code that’s hiding your menu. margin: 0px 0 0 -225px; It’s this -225px.

  • Well sorry, I wrote the question very quickly. I will try to explain it better. If I remove the line (margin: 0px 0 0 -225px;) the menu works, the problem and that when it is aligned to the right of the screen, it will hide. What I had in mind was to make jQuery check if the menu is in the middle of hers and help the line (margin: 0px 0 0 -225px;) automatically.

  • You are doing some kind of responsive menu for when the screen is smaller the menu go right?

  • That’s right buddy, you know how I can do that?

  • Already tried to use @media queries?

  • there is no example?

  • This menu is very dry, just a letter in the corner of the screen to access the menu, it will be just like that?

  • not that’s just an example

Show 3 more comments

3 answers

1

With media queries 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 getting adjusted with the menu that will now be on the right.

  • I tried that but it didn’t work out. just look at it: https://jsfiddle.net/8ae7ty4c/1/ Where the letters to it should change the menu.

  • kkk sorry but I think you expressed yourself wrong when you told me you wanted to make a responsive menu. Take a look at my project http://www.engatevolpato.com.br/new/ . When Oce resizes the browser screen and the menu items start to tighten they adapt to the size of the screen by turning that 'hamburger' button as it is known not to overlap with the logo on smaller screens. That which is responsive menu, already what you are trying to do I still don’t have a kk name.

  • By chance what would all these menus and sub-menus?

  • This is an example I used, but it will look like this: https://jsfiddle.net/8ae7ty4c/3/ where (registrations, products, orders) will be left aligned, and configuration will be right aligned. Got it?

1


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

$(Document). ready(Function() { $(". menu2"). onMouseEnter(test(this)); });

Function teste(el) { // I’m terrible at naming functions so I always leave a test()

largTela = $(window). width(); telaMeio = largTela / 2; // Divides the screen size by two

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

if(posElemento > telaMeio) { $(el). find(".Link2"). addClass("right"); } Else { $(el). find(". Link2"). addClass("left"); }

}

When you mouse the element with the class .menu2 he will call the function teste() which calculates the screen size divided by two, and checks whether the child element of .menu2 with class .link2 is positioned to the left greater than half of the screen. If it is, add the class .direita but the class .esquerda.
In css the only thing that changes is that instead of you putting the sub-menu position in the class .link2 you put in the classes .direita and .esquerda. For example: 


.direita {
 ... css para quando o menu estiver na direita
}
.esquerda {
 ... css para quando o menu estiver na esquerda
}

0

Then use a separate css only in that menu:


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

.Link2.right { margin-left: -260px; }

.right . sub_menu_arrow::after { left:280px; }

And just add the right class in the right class settings ul="Link2 right"

  • yes I thought about this solution, but wanted to make jQuery change the style according to the menu position. For example if I have several menus. If the menu passes from the middle of screen jQuery changes the css understood.

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.