0
ul{
listy-style-type: none;
margin: 0;
padding: 0;
width: 100%;
text-align: center;
}
.an{
width: 300px;
}
ul li{
display: inline-block;
padding: 14px 16px;
color: #f0f;
border-bottom: 1px solid #f0f;
transition: .2s;
border-radius: 5%;
width: 10%;
}
ul li:hover{
background: linear-gradient(to top, #ff00ff -4%, #3366cc 28%);
color: #00ff00;
padding: 10px 16px;
}<ul>
<li>Jquery</li>
<li>HTML 5</li>
<li>JavaScript</li>
<li>CSS 3</li>
<li>PHP</li>
<li>C#</li>
</ul>
<br ><br ><br >
<ul class='an'>
<li>Jquery</li>
<li>HTML 5</li>
<li>JavaScript</li>
<li>CSS 3</li>
<li>PHP</li>
<li>C#</li>
</ul>Guys look at these 2 menus, the first works banaca all right and ok!
But when we limit the space it occupies either by setting a specific width less than necessary or when we resize the screen, this 'line break happens'.
Is there any way I can detect this line break before it even happens?
For example: If I am resizing the screen and the line break happens I can call a function that will solve the problem.
NOTE: It is possible to do this by setting @medias(CSS) or by innerWidth(JS) but I need to know the exact position in which it will break and put in the code. If it were possible, I would like to be able to do this without knowing the point where it breaks.
Face this part of layout is usually done in css with "media queries". I don’t know any event that identifies that there will be line breaking in your layout. And even if there was, you’d be doing it in a bad way! The best would be to lock your menu to not break or have a layout version of it for smaller screens!
– alan
Yes, I already do the menus or other elements with @medias, and the menu also adapts to the smaller screen easily. The problem is that my menu is dynamic, and the amount of items present will depend on the user. Thus it is difficult to define an efficient break, since the menu can have from 1 to numerous items.
– Bsalvo
In this case this type of menu does not seem to be the most appropriate. But in case you want to detect the line break. You can give a fixed size to your <li> with this, when the page loads just you take the page size and check if the <li> number exceeds that size. But I would avoid using a menu that way. Because it goes that the user registers 50 items. It would completely break your layout!
– alan
The problem is that you are defining ul with fixed size px and li with variable size in percentage. What you can do is set the li with a max-width taking into account the biggest word and leave without declaring width.
– Leonorris
Alan, this structure I put together was just to show you what the problem is. I would like a resolution to be tabled that adapts independently of the type of structure. Leonorris, if I set I think it makes no difference to set the max-width, if I set width 100% for example, even then there will come a time when the menu will be broken.
– Bsalvo