[3d Mega Menu] – Layout Bug?

This topic is: Resolved

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

This topic contains 8 replies, has 2 voices, and was last updated by  JTAtkins 2 years, 7 months ago.

  • Author
    Posts
  • #2416

    JTAtkins
    Member
    Post count: 5

    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
    Post count: 5

    Image size exceeded.  trying again…

  • #2418

    JTAtkins
    Member
    Post count: 5

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

  • #2421

    Rooney boy
    Staff
    Post count: 50

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

    Login | Register | Forgot Password?

  • #2422

    Rooney boy
    Staff
    Post count: 50

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

    Login | Register | Forgot Password?

  • #2424

    JTAtkins
    Member
    Post count: 5

    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

    Rooney boy
    Staff
    Post count: 50

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

    Login | Register | Forgot Password?

  • #2432

    JTAtkins
    Member
    Post count: 5

    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
    Post count: 5

    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

You must be logged in to reply to this topic.

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