[3d Mega Menu] – Layout Bug?

This is a PRIVATE forum for verified users only, to view all replies/answers, you must be logged in!

Status: resolved
Viewing 8 reply threads
  • Author
    Posts
    • #2416

      JTAtkins
      Member

      Greetings,

      I have been doing some additional browser and device testing on my site and I ran into a weird layout bug on tablets or mid size browser windows.  The menu works great on full size windows and mobile phone screens, but on my iPad the menu gets all jumbled and displays at the bottom of the vertical layout.  See attached image for an example of what I am seeing.  Tested in Chrome (latest),  Bootstrap 2.3.2, and Safari (ipad).

      Here is how I have the menu setup

      <script>
          $(document).ready(function () {
              $(‘#menuMega’).menu3d({ “skin”: “skin-red-dark”, “vertical”: true});
          });
      </script>
      <div id=”menuMega” class=”menu3dmega”>
          
         

             
                @foreach (var department in ViewBag.Departments)
                {
                    if (department.Visible)
                    {    
                        <li class=”full-width” style=”float: none; display: block;”>
                            @department.Name
                            <div animate-in=”slideDown” animate-out=”bounceOut” class=”dropdown-menu row-fluid” style=”z-index: 1; display: none; -webkit-animation: 300ms ease both;”>
                                <!– Container 4 columns starts here –>
                                <div class=”content”>
                                    @foreach (var merchandiseClass in ViewBag.Classes)
                                    {
                                        if (merchandiseClass.Visible)
                                        {
                                            foreach (var merchandiseClassParent in merchandiseClass.AssociatedMerchandiseHierarchyGroupParents)
                                            {
                                                if (merchandiseClassParent.ParentMerchandiseHierarchyGroupId == department.MerchandiseHierarchyGroupId)
                                                { 
                                                    <div class=”span3″>
                                                        @merchandiseClass.Name
                                                       
                                                            @foreach (var subClass in ViewBag.SubClasses)
                                                            {
                                                                foreach (var subClassParent in subClass.AssociatedMerchandiseHierarchyGroupParents)
                                                                {
                                                                    if (subClassParent.ParentMerchandiseHierarchyGroupId == merchandiseClass.MerchandiseHierarchyGroupId)
                                                                    {
                                                                        foreach (var serviceItem in ViewBag.ServiceItems)
                                                                        {
                                                                            //Service items are primary items and are displayed on the SubClass Menu
                                                                            if (serviceItem.AuthorizedForSaleFlag)
                                                                            {
                                                                                if (serviceItem.MerchandiseHierarchyGroup.Equals(subClass))
                                                                                {
                                                                                   

      •                                                                                 @serviceItem.Name    
                                                                                   
      •                                                                         }
                                                                            }
                                                                        }
                                                                    }
                                                                }
                                                            }

                                                            @foreach (var subClass in ViewBag.SubClasses)
                                                            {
                                                                if (subClass.Visible)
                                                                {
                                                                    foreach (var subClassParent in subClass.AssociatedMerchandiseHierarchyGroupParents)
                                                                    {
                                                                        if (subClassParent.ParentMerchandiseHierarchyGroupId == merchandiseClass.MerchandiseHierarchyGroupId)
                                                                        {
                                                                           

      •                                                                         @subClass.Name
                                                                           
      •                                                                 }
                                                                    }
                                                                }
                                                            }
                                                       

                                                  </div>
                                              }
                                          }
                                      }

                                  }
                                  <div class=”clearfix”>
                                      <div class=”span12″>
                                          <hr />
                                         
                                      </div>
                                  </div>
                              </div>
                          </div>
                     
                  }
              }
         
      </div>

    • #2417

      JTAtkins
      Member

      Image size exceeded.  trying again…

    • #2418

      JTAtkins
      Member

      100kb limit on image size.  Here is a link. to it.

    • #2421

      Hey there, You must be logged in to view this reply!

      Login | Register | Forgot Password?

    • #2422

      Hey there, You must be logged in to view this reply!

      Login | Register | Forgot Password?

    • #2424

      JTAtkins
      Member

      Hey Rooney.  Thanks for looking.  Do you have an iPad or Tablet you can look at by chance.  That is where I see it consistently.  

      The containing <div> that contains the sidebar is pretty simple.  I’ve also removed the noise of the razor code and removed any put it back to a basic menu according to the documentation (no additional styles or animations) just the mega menu, full-width vertical layout and the dropdown-menu class for the 4 column submenu layout.

      Any advice is appreciated.  I’m going to try to put in a menu from the samples as a test.

      <div class=”container”>
              <br/>
              <div class=”row”>
                  <div class=”span3″>
                      @Html.Partial(“_SidebarPartial”)
                  </div>

      Boiled down layout:

      <div id=”menuMega” class=”menu3dmega”>
          
         

             
            <li class=”full-width” style=”float: none; display: block;”>
                @department.Name
                        <div animate-in=”slideDown” animate-out=”bounceOut” class=”dropdown-menu row-fluid” style=”z-index: 1; display: none; -webkit-animation: 300ms ease both;”>
                        <!– Container 4 columns starts here –>
                                <div class=”content”>
                                <div class=”span3″>
                                      @merchandiseClass.Name
                                       
                                               

      •                                                 @serviceItem.Name    
                                                       
      •        
                                               

                                    </div>
                               
                                    <div class=”clearfix”>
                                      <div class=”span12″>
                                          <hr />
                                         
                                      </div>
                                    </div>
                              </div>
                </div>
               
         
      </div>

    • #2425

      Hey there, You must be logged in to view this reply!

      Login | Register | Forgot Password?

    • #2432

      JTAtkins
      Member

      Unfortunately it didnt work.  🙁  I’ll keep playing around to see if I can get it to stop, or even collapse like the mobile menu does.  Any other advice is very much appreciated.  

      Thanks,
      Jay

    • #2434

      JTAtkins
      Member

      I went back to basics and removed all of my code to create a basic test page and was able to get it working on tablets so there must be a bug in my code somewhere.  I will keep digging.  Thanks for the assist.  I will mark as solved.

      Thanks,
      Jay

Viewing 8 reply threads
  • You must be logged in to reply to this topic.

This is a PRIVATE forum for verified users only, to view all replies/answers, you must be logged in!

© Copyright 2020 by wpthms.com. All Rights Reserved.