How can know select a element which has moved bellow the first line of elements

pierrot10 0
Viewed 25

Good day, I am building a horizontal menu with several levels At the end (right side) I have a hidden hamburger.

Here is the demo

As you can see, actually, there is an hamburger drop down menu. It will be hidden, but I kept it displayed for the explication.

Scenario If you resize the windows to make it smaller (width), at some point, the li goes at the second line because of flex-wrap: wrap;

nav.e-panel-row ul{
    
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    margin: 0 auto;
    list-style: none;
    box-sizing: border-box;
    padding: 0px;
}

I would like to know if I can marked the li which go at the second line.

My idea is, when one of more are not at the first line, jQuery move it to the hamburger

<li id="hamburger" class="hasChildren">
                        <div>
                            <a href="#" class="dropdown-toggle" aria-expanded="false">
                                <span class="fa fa-navicon"></span>
                            </a>
                        </div>
                        <ul class="sub-menu">
                            <!-- the li of the second line must be append here
                        </ul>
                    </li>

when, jquety detect a li between the ul.sub-menu

if($("#hamburger ul li").length >= 1){
            console.log("hambuger contain frite");
            $("#hamburger").show();
        }
        else
        {
            $("#hamburger").hide();
        }

the hamburger is display at the first line.

I can change my html code, to have two nav. One for the menu, and one for the hamburger, to make sure that the hamburger stay at first left, at right side.

My worries is how to detect a li, on the second line, as the container nav.e-panel-row ulremind the same.

Should I check the y position of the element, and when is bellow the first li, I move it?

What would be your recommendation?

flexbox drop-down-menu jquery javascript css
1 Answers

I could do some thing interesting but not completely success.

I used an offset to check the top position of each li at the first level. I save the level if the first li and I compared the other li. If one of them has/have a different top position, I add a class red

Here is the idea

var firstTop
    $(window).resize(function() {
        $('nav#menu ul').first().children('li').each(function(index){
            
            if($(this).is(":first-child")){
                console.log("name: ", $(this).find('a').html());
                firstTop = $(this).offset().top;
            }
            else
            {
                console.log("First offset top: ", firstTop);
                console.log("offset top: ", $(this).offset().top);
                if($(this).offset().top > firstTop){
                    $(this).addClass('red');
                    $(this).appendTo("#hamburger ul.submenu");
                }
                else
                {
                    $(this).removeClass('red'); 
                }

            }
        });
})

here is the demo

I can now use

$(this).appendTo("#hamburger ul.submenu");

to move the element to the hamburger.

Before solving the actual problem of drop down/up of the menu, how would you do, to move back to its original position if they are not in the menu container any more???

I mean, if they are not in menu container, flex-wrap: wrap; will not consider its, do you see?

pierrot100
Related