I did a Laravel dynamic mega menu everything is fine but in mobile version some subcategory is preloading how can I get rid of it


here is preloading sob category/subcategoryI did a Laravel dynamic mega menu everything is fine but in mobile version some subcategory is preloading how can I get rid of it.

<div class="navbar-mega" id="mynavbar-mega">
 <div class="dropdown-mega">       
    <button class="dropbtn-mega" style="padding-top: 6px;padding-bottom: 0px;"><a href="https://new.monowamart.com"><i class="fa fa-home" aria-hidden="true"></i></a></button>
    <a href="javascript:void(0);" style="font-size:20px;margin-left:18.5rem;color:#73499d;" class="icon" onclick="myFunction()">☰</a>
    </div> 


  @php
                $categories = AppModelsCategory::where('parent_id', 0)->orderBy('order_level','ASC')->get();
             @endphp

@foreach ($categories as $item)

id}}” class=”dropbtn-mega toggle-day” data-target=”#{{$item->id}}” > {{$item->name}} + –

id}}” class=”dropdown-content-mega panel-collapse collapse in”>
@if($item->name==’Footwear’)

@php
$subcategories = AppModelsCategory::where(‘parent_id’,
$item->id)->orderBy(‘order_level’,’ASC’)->get();
@endphp
@foreach ($subcategories as $subcategory)

slug}}”>{{$subcategory->name}}

@php
$Subsubcategories = AppModelsCategory::where(‘parent_id’,
$subcategory->id)->orderBy(‘order_level’,’ASC’)->get();
@endphp
@foreach ($Subsubcategories as $Subsubcategory)
slug}}”>{{$Subsubcategory->name}}
@endforeach

@endforeach

@elseif($item->name==’Clothes’)

@php
$subcategories = AppModelsCategory::where(‘parent_id’,
$item->id)->orderBy(‘order_level’,’ASC’)->get();
@endphp
@foreach ($subcategories as $subcategory)

slug}}”>{{$subcategory->name}}

@php
$Subsubcategories = AppModelsCategory::where(‘parent_id’,
$subcategory->id)->orderBy(‘order_level’,’ASC’)->get();
@endphp
@foreach ($Subsubcategories as $Subsubcategory)
slug}}”>{{$Subsubcategory->name}}
@endforeach

@endforeach

@else

                @php
                $subcategories = AppModelsCategory::where('parent_id',
                $item->id)->orderBy('order_level','ASC')->get();
                @endphp

                @foreach ($subcategories as $subcategory)
                    <div class="column-mega">
                        <h3><a href="https://new.monowamart.com/category/{{$subcategory->slug}}">{{$subcategory->name}}</a></h3>
                @php
                $Subsubcategories = AppModelsCategory::where('parent_id',
                $subcategory->id)->orderBy('order_level','ASC')->get();
                @endphp
                @foreach ($Subsubcategories as $Subsubcategory)
                        <a class="link" href="https://new.monowamart.com/category/{{$Subsubcategory->slug}}">{{$Subsubcategory->name}}</a>
                        @endforeach
                    </div>
                @endforeach
            </div>
            @endif
        </div>
        
    </div>
    @endforeach   
</div>



Js and Jquery

<

script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script>
        function myFunction() {
        var x = document.getElementById("mynavbar-mega");
        if (x.className === "navbar-mega") {
            x.className += " responsive";
        } 
        else {
            x.className = "navbar-mega";
            }
        }
</script>



<script>
    jQuery(document).ready(function(){
    var windowWidth = jQuery(window).width();
    if(windowWidth <= 768) //for iPad & smaller devices
        jQuery('.panel-collapse').removeClass('in');
        
        jQuery('.toggle-day').click(function(){
        // get this data-target
            var target = $(this).data("target");
            $(".in").not(target).removeClass("in");
            $(target).toggleClass('in');
            $(this).closest(".day-header").find(".minus,.plus").toggle();
        });
    });
</script>

responsive css

    @media screen and (max-width: 600px) {
        .dropbtn-mega {
             pointer-events: auto !important;
           }
        .navbar-mega.responsive {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
    }
    
      .navbar-mega.responsive .icon {
        position: absolute;
        right: 17px;
        top: 5px;
      }
      .navbar-mega.responsive a {
        float: none;
        display: block;
        text-align: left;
      }
      .navbar-mega.responsive .dropdown-mega {float: none;}
      .navbar-mega.responsive .dropdown-content-mega {position: relative;}
      .navbar-mega.responsive .dropdown-mega .dropbtn-mega {
        display: block;
        width: 100%;
        text-align: left;
      }
      .dropbtn-mega{
          color: black !important;
      }
      .navbar-mega{
          background-color: #d5e7f1 !important;
      }
      .icon{
            display:block;
           }
    .toggle-day {
        cursor: pointer;
    }
    .collapse.in {
    
        display: block !important;
    }
    
     .collapse {
        display: none !important; 
    }
    .top-navbar{
        display: none;
    }
    
    .help{
        text-align: center;
    }
    .plus{
        font-weight: 600;
        display: inline;
    }
    .minus{
        font-weight: 600;
        display: inline;
    }
    .navbar-mega{
        padding: 5px 0px !important;
    }
    a:hover, .dropdown-mega:hover .dropbtn-mega {
        background-color: transparent !important;
        }
.navbar-mega.responsive {
        position: relative;
    }
    .navbar-mega.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .navbar-mega.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
    .navbar-mega.responsive .dropdown {
        float: none;
    }
    .navbar-mega.responsive .dropdown-content {
        position: relative;
    }
    .topnav.responsive .dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: left;
    }
    }

Source: CSS – Stack Overflow

November 25, 2021
Category : News
Tags: css | html | jquery | laravel

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.