#1
  1. No Profile Picture
    Super Moderator
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,563
    Rep Power
    112

    Materialize bi-menu issue


    Generally said, the below script works COMPLETELY, at first. The issue is, once hide-on-med-and-down class is added, the larger menu successfully hides, but the referenced drop-downs are no longer even accessible for the sidenav. It's the first set of items on the list that are also being hidden for some reason. Any ideas why?
    Using https://materializecss.com/
    Active page: BFD Scheduler Home
    Code:
        <UL id="plat1" class="dropdown-content">
          <LI><A href="?page=home&plat=1">Home</A></LI>
          <LI><A href="?page=calendar&plat=1">Calendar</A></LI>
          <LI><A href="?page=roster&plat=1">Roster</A></LI>
        </UL>
        <UL id="plat2" class="dropdown-content">
          <LI><A href="?page=home&plat=2">Home</A></LI>
          <LI><A href="?page=calendar&plat=2">Calendar</A></LI>
          <LI><A href="?page=roster&plat=2">Roster</A></LI>
        </UL>
        <UL id="plat3" class="dropdown-content">
          <LI><A href="?page=home&plat=3">Home</A></LI>
          <LI><A href="?page=calendar&plat=3">Calendar</A></LI>
          <LI><A href="?page=roster&plat=3">Roster</A></LI>
        </UL>
        <UL id="plat4" class="dropdown-content">
          <LI><A href="?page=home&plat=4">Home</A></LI>
          <LI><A href="?page=calendar&plat=4">Calendar</A></LI>
          <LI><A href="?page=roster&plat=4">Roster</A></LI>
        </UL>
        <UL class="sidenav" id="mobile-demo">
          <LI><A class="dropdown-trigger" href="#!" data-target="plat1">Platoon 1<I class="material-icons right">arrow_drop_down</I></A></LI>
          <LI><A class="dropdown-trigger" href="#!" data-target="plat2">Platoon 2<I class="material-icons right">arrow_drop_down</I></A></LI>
          <LI><A class="dropdown-trigger" href="#!" data-target="plat3">Platoon 3<I class="material-icons right">arrow_drop_down</I></A></LI>
          <LI><A class="dropdown-trigger" href="#!" data-target="plat4">Platoon 4<I class="material-icons right">arrow_drop_down</I></A></LI>
        </UL>
        <NAV>
          <DIV class="nav-wrapper red darken-2">
            <A href="#!" class="brand-logo">BFD Scheduler</A>
            <A href="#" data-target="mobile-demo" class="sidenav-trigger"><I class="material-icons">menu</I></A>
            <UL class="right hide-on-med-and-down">
            <UL class="right">
              <LI><A class="dropdown-trigger" href="#!" data-target="plat1">Platoon 1<I class="material-icons right">arrow_drop_down</I></A></LI>
              <LI><A class="dropdown-trigger" href="#!" data-target="plat2">Platoon 2<I class="material-icons right">arrow_drop_down</I></A></LI>
              <LI><A class="dropdown-trigger" href="#!" data-target="plat3">Platoon 3<I class="material-icons right">arrow_drop_down</I></A></LI>
              <LI><A class="dropdown-trigger" href="#!" data-target="plat4">Platoon 4<I class="material-icons right">arrow_drop_down</I></A></LI>
            </UL>
          </DIV>
        </NAV>
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  2. #2
  3. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,896
    Rep Power
    9646
    On Chrome, everything appears to be working correctly: on wide displays I see only the nav in the top-right, and on narrow displays I see only the menu in the top-left and it pops up the list on the left with items and subitems. Removing the hide-on-med-and-down makes the list appear even on narrow displays, which is a bad thing.

    Where's the problem, exactly?

    By the way, is that your actual markup? It's not quite what it should be. Couple errors. Like that ul.right being duplicated.
  4. #3
  5. No Profile Picture
    Super Moderator
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,563
    Rep Power
    112
    Well, I'm assisting one of the individuals I'm hosting for his project, so he is altering it as well.
    Code:
    <!-- Dropdown Structure -->
    <ul id="dropdown1" class="dropdown-content">
      <li><a href="#!">Home</a></li>
      <li><a href="#!">Calendar</a></li>
      <li><a href="#!">Roster</a></li>
    </ul>
    
    <ul id="dropdown2" class="dropdown-content">
      <li><a href="#!">Home</a></li>
      <li><a href="#!">Calendar</a></li>
      <li><a href="#!">Roster</a></li>
    </ul>
     <!--Header Nav Bar-->
    <nav>
      <div class="nav-wrapper red darken-2">
        <a href="#!" class="brand-logo">BFD Scheduler</a>
        <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
        <ul class="right hide-on-med-and-down">
          <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Platoon 1<i class="material-icons right">arrow_drop_down</i></a></li>
          <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Platoon 2<i class="material-icons right">arrow_drop_down</i></a></li>
          <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Platoon 3<i class="material-icons right">arrow_drop_down</i></a></li>
          <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Platoon 4<i class="material-icons right">arrow_drop_down</i></a></li>
        </ul>
      </div>
    </nav>
    
     <!--Mobile Menu Items-->
      <ul class="sidenav" id="mobile-demo">
          <li><a class="dropdown-trigger" href="#!" data-target="dropdown2">Platoon 1<i class="material-icons right">arrow_drop_down</i></a></li>
          <li><a class="dropdown-trigger" href="#!" data-target="dropdown2">Platoon 2<i class="material-icons right">arrow_drop_down</i></a></li>
          <li><a class="dropdown-trigger" href="#!" data-target="dropdown2">Platoon 3<i class="material-icons right">arrow_drop_down</i></a></li>
          <li><a class="dropdown-trigger" href="#!" data-target="dropdown2">Platoon 4<i class="material-icons right">arrow_drop_down</i></a></li>
      </ul>
    I figure this will work, but the 2 drop-down items are external in the script. In this example, a drop-down will appear for each menu since a separate one is made for each. If a separate set is required, I guess that is the way we'll go, but I was hoping, due to it initially being an externally referenced item to what is hidden in the first attempt, it wouldn't become hidden itself.

    Currently a "final", but I was hoping to cut it in half due to the menu items truly being the same, just a desktop/mobile version of such, but it seems when the desktop become hidden, it would apply to the options as well, so it seems there must be a duplicate set created, just to be independent.
    Code:
        <UL class="sidenav" id="mobile-demo">
          <LI><A class="mobile-dropdown-trigger" href="#!" data-target="mobile-plat1">Platoon 1<I class="material-icons right">arrow_drop_down</I></A></LI>
          <LI><A class="mobile-dropdown-trigger" href="#!" data-target="mobile-plat2">Platoon 2<I class="material-icons right">arrow_drop_down</I></A></LI>
          <LI><A class="mobile-dropdown-trigger" href="#!" data-target="mobile-plat3">Platoon 3<I class="material-icons right">arrow_drop_down</I></A></LI>
          <LI><A class="mobile-dropdown-trigger" href="#!" data-target="mobile-plat4">Platoon 4<I class="material-icons right">arrow_drop_down</I></A></LI>
        </UL>
        <UL id="mobile-plat1" class="dropdown-content">
          <LI><A href="?page=home&plat=1">Home</A></LI>
          <LI><A href="?page=calendar&plat=1">Calendar</A></LI>
          <LI><A href="?page=roster&plat=1">Roster</A></LI>
        </UL>
        <UL id="mobile-plat2" class="dropdown-content">
          <LI><A href="?page=home&plat=2">Home</A></LI>
          <LI><A href="?page=calendar&plat=2">Calendar</A></LI>
          <LI><A href="?page=roster&plat=2">Roster</A></LI>
        </UL>
        <UL id="mobile-plat3" class="dropdown-content">
          <LI><A href="?page=home&plat=3">Home</A></LI>
          <LI><A href="?page=calendar&plat=3">Calendar</A></LI>
          <LI><A href="?page=roster&plat=3">Roster</A></LI>
        </UL>
        <UL id="mobile-plat4" class="dropdown-content">
          <LI><A href="?page=home&plat=4">Home</A></LI>
          <LI><A href="?page=calendar&plat=4">Calendar</A></LI>
          <LI><A href="?page=roster&plat=4">Roster</A></LI>
        </UL>
        <NAV>
          <DIV class="nav-wrapper red darken-2">
            <A href="#!" class="brand-logo">BFD Scheduler</A>
            <A href="#" data-target="mobile-demo" class="sidenav-trigger"><I class="material-icons">menu</I></A>
            <UL class="right hide-on-med-and-down">
              <LI><A class="desktop-dropdown-trigger" href="#!" data-target="desktop-plat1">Platoon 1<I class="material-icons right">arrow_drop_down</I></A></LI>
              <LI><A class="desktop-dropdown-trigger" href="#!" data-target="desktop-plat2">Platoon 2<I class="material-icons right">arrow_drop_down</I></A></LI>
              <LI><A class="desktop-dropdown-trigger" href="#!" data-target="desktop-plat3">Platoon 3<I class="material-icons right">arrow_drop_down</I></A></LI>
              <LI><A class="desktop-dropdown-trigger" href="#!" data-target="desktop-plat4">Platoon 4<I class="material-icons right">arrow_drop_down</I></A></LI>
            </UL>
          </DIV>
        </NAV>
        <UL id="desktop-plat1" class="dropdown-content">
          <LI><A href="?page=home&plat=1">Home</A></LI>
          <LI><A href="?page=calendar&plat=1">Calendar</A></LI>
          <LI><A href="?page=roster&plat=1">Roster</A></LI>
        </UL>
        <UL id="desktop-plat2" class="dropdown-content">
          <LI><A href="?page=home&plat=2">Home</A></LI>
          <LI><A href="?page=calendar&plat=2">Calendar</A></LI>
          <LI><A href="?page=roster&plat=2">Roster</A></LI>
        </UL>
        <UL id="desktop-plat3" class="dropdown-content">
          <LI><A href="?page=home&plat=3">Home</A></LI>
          <LI><A href="?page=calendar&plat=3">Calendar</A></LI>
          <LI><A href="?page=roster&plat=3">Roster</A></LI>
        </UL>
        <UL id="desktop-plat4" class="dropdown-content">
          <LI><A href="?page=home&plat=4">Home</A></LI>
          <LI><A href="?page=calendar&plat=4">Calendar</A></LI>
          <LI><A href="?page=roster&plat=4">Roster</A></LI>
        </UL>
    Last edited by Triple_Nothing; September 25th, 2018 at 08:29 AM.
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  6. #4
  7. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,896
    Rep Power
    9646
    I'm still not clear on what problem you're trying to solve...
  8. #5
  9. No Profile Picture
    Super Moderator
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,563
    Rep Power
    112
    These are the drop-down items: (Intended total of 4)
    Code:
        <UL id="plat1" class="dropdown-content">
          <LI><A href="?page=home&plat=1">Home</A></LI>
          <LI><A href="?page=calendar&plat=1">Calendar</A></LI>
          <LI><A href="?page=roster&plat=1">Roster</A></LI>
        </UL>
    This is a full view of desktop initial list:
    Code:
            <UL class="right hide-on-med-and-down">
              <LI><A class="dropdown-trigger" href="#!" data-target="plat1">Platoon 1<I class="material-icons right">arrow_drop_down</I></A></LI>
              <LI><A class="dropdown-trigger" href="#!" data-target="plat2">Platoon 2<I class="material-icons right">arrow_drop_down</I></A></LI>
              <LI><A class="dropdown-trigger" href="#!" data-target="plat3">Platoon 3<I class="material-icons right">arrow_drop_down</I></A></LI>
              <LI><A class="dropdown-trigger" href="#!" data-target="plat4">Platoon 4<I class="material-icons right">arrow_drop_down</I></A></LI>
            </UL>
    Now, if the larger becomes hidden, it is ALSO hiding the referenced items, so when the following is the list present, it can't use the items since they must be getting passed hide-on-med-and-down from the larger UL, even though they are not WITHIN. (So I think)
    Code:
        <UL class="sidenav" id="mobile-demo">
          <LI><A class="dropdown-trigger" href="#!" data-target="plat1">Platoon 1<I class="material-icons right">arrow_drop_down</I></A></LI>
          <LI><A class="dropdown-trigger" href="#!" data-target="plat2">Platoon 2<I class="material-icons right">arrow_drop_down</I></A></LI>
          <LI><A class="dropdown-trigger" href="#!" data-target="plat3">Platoon 3<I class="material-icons right">arrow_drop_down</I></A></LI>
          <LI><A class="dropdown-trigger" href="#!" data-target="plat4">Platoon 4<I class="material-icons right">arrow_drop_down</I></A></LI>
        </UL>
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  10. #6
  11. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,896
    Rep Power
    9646
    The list items are moving, as in fully moving, between the two lists. The .hide-on-med-and-down on the desktop list itself will no longer affect the items once they've moved under the .sidenav.

    But my point is that I'm trying the site with Chrome and everything is working. What are you using to test? How is the page behaving?
  12. #7
  13. No Profile Picture
    Super Moderator
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,563
    Rep Power
    112
    Aight. I set it up as hoping for, so hopefully tests will show failures/issues. I am testing it via Edge, and don't have Chrome atm to swing that test. The prior setup worked for me as well, but included twice as much, due to the independent options instead of shared.

    The thing for me is, when the screen is smaller, the side menu will appear and show only the initial menu, not sub-menus. If the smaller menu is left open while enlarging the screen, the submenus will then, and only then, work for the mobile menu once the desktop menu also appears.

    When you look at the mobile menu on the side, will it now show its sub-menus in this version when desktop menu is hidden?
    BFD Scheduler
    And the 3 intended parts are...
    The sub-menus:
    Code:
        <UL id="plat1" class="dropdown-content">
          <LI><A href="?page=home&plat=1">Home</A></LI>
          <LI><A href="?page=calendar&plat=1">Calendar</A></LI>
          <LI><A href="?page=roster&plat=1">Roster</A></LI>
        </UL>
        <UL id="plat2" class="dropdown-content">
          <LI><A href="?page=home&plat=2">Home</A></LI>
          <LI><A href="?page=calendar&plat=2">Calendar</A></LI>
          <LI><A href="?page=roster&plat=2">Roster</A></LI>
        </UL>
        <UL id="plat3" class="dropdown-content">
          <LI><A href="?page=home&plat=3">Home</A></LI>
          <LI><A href="?page=calendar&plat=3">Calendar</A></LI>
          <LI><A href="?page=roster&plat=3">Roster</A></LI>
        </UL>
        <UL id="plat4" class="dropdown-content">
          <LI><A href="?page=home&plat=4">Home</A></LI>
          <LI><A href="?page=calendar&plat=4">Calendar</A></LI>
          <LI><A href="?page=roster&plat=4">Roster</A></LI>
        </UL>
    The mobile/side menu:
    Code:
        <UL class="sidenav" id="mobile-demo">
          <LI><A class="dropdown-trigger" href="#!" data-target="plat1">Platoon 1<I class="material-icons right">arrow_drop_down</I></A></LI>
          <LI><A class="dropdown-trigger" href="#!" data-target="plat2">Platoon 2<I class="material-icons right">arrow_drop_down</I></A></LI>
          <LI><A class="dropdown-trigger" href="#!" data-target="plat3">Platoon 3<I class="material-icons right">arrow_drop_down</I></A></LI>
          <LI><A class="dropdown-trigger" href="#!" data-target="plat4">Platoon 4<I class="material-icons right">arrow_drop_down</I></A></LI>
        </UL>
    The desktop menu:
    Code:
        <NAV>
          <DIV class="nav-wrapper red darken-2">
            <A href="#!" class="brand-logo">BFD Scheduler</A>
            <A href="#" data-target="mobile-demo" class="sidenav-trigger"><I class="material-icons">menu</I></A>
            <UL class="right hide-on-med-and-down">
              <LI><A class="dropdown-trigger" href="#!" data-target="plat1">Platoon 1<I class="material-icons right">arrow_drop_down</I></A></LI>
              <LI><A class="dropdown-trigger" href="#!" data-target="plat2">Platoon 2<I class="material-icons right">arrow_drop_down</I></A></LI>
              <LI><A class="dropdown-trigger" href="#!" data-target="plat3">Platoon 3<I class="material-icons right">arrow_drop_down</I></A></LI>
              <LI><A class="dropdown-trigger" href="#!" data-target="plat4">Platoon 4<I class="material-icons right">arrow_drop_down</I></A></LI>
            </UL>
          </DIV>
        </NAV>
    Last edited by Triple_Nothing; September 26th, 2018 at 08:22 AM.
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  14. #8
  15. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,896
    Rep Power
    9646
    Right. Now the hide-on-med-and-down matters because the submenus aren't being moved (like in the DOM) between the two menus. They remain under the desktop menu and are being positioned to show up in the mobile location.

    a) Whatever you just did to produce the problem, undo it. When the submenus were being physically moved between menus everything was fine, but now that they're being positioned (with CSS) to the desired place it won't work.
    b) Duplicate the submenus. In the markup, not with Javascript. One copy under the desktop menu, one copy under the mobile menu.

    Personally I prefer (b) because teleporting elements around the DOM makes my skin crawl.
  16. #9
  17. No Profile Picture
    Super Moderator
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,563
    Rep Power
    112
    No prob. (b) is the way I've had it to successfully work. My goal, if simple, was just to avoid the duplication. Creating 2 copies has always been the only way around. Just checking to see if anyone had a suggestion to create a single structure/option build, then just swap which display version displayed those options. (Mobile or Desktop)
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.
  18. #10
  19. Backwards Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,896
    Rep Power
    9646
    You should be able to pull it off.

    Take what you have now for the desktop version and discard the sidenav markup (except the icon). The desktop CSS does what it does now, and the mobile CSS shouldn't need much added so that the menu gets styled like the sidenav did. It doesn't have to move locations in the DOM for it to appear on the left side of the screen when opened. You wouldn't use hide-on-med-and-down because you don't want the stuff hidden anymore - you would change the appearance with one set of desktop/default CSS rules and another set of mobile rules.
  20. #11
  21. No Profile Picture
    Super Moderator
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Jun 2009
    Location
    Hartford, WI
    Posts
    1,563
    Rep Power
    112
    Well, the issue is me not being familiar with the Materialize styling, since I'm used to doing it from scratch, so I've currently got it built as so, and am going to check his input/acceptance of something more written from scratch that doesn't use Materialize.
    (Currently loaded as a preview/example, at this moment)
    Code:
        <LABEL for="show-menu" class="show-menu">Show Menu</LABEL>
        <INPUT type="checkbox" id="show-menu" role="button" />
        <UL id="menu">
          <LI><A href="?page=default">Home</A></LI>
          <LI>
            <A href="?page=home&plat=1">Platoon 1</A>
            <UL class="hidden">
              <LI><A href="?page=calendar&plat=1">Calendar</A></LI>
              <LI><A href="?page=roster&plat=1">Roster</A></LI>
            </UL>
          </LI>
          <LI>
            <A href="?page=home&plat=2">Platoon 2</A>
            <UL class="hidden">
              <LI><A href="?page=calendar&plat=2">Calendar</A></LI>
              <LI><A href="?page=roster&plat=2">Roster</A></LI>
            </UL>
          </LI>
          <LI>
            <A href="?page=home&plat=3">Platoon 3</A>
            <UL class="hidden">
              <LI><A href="?page=calendar&plat=3">Calendar</A></LI>
              <LI><A href="?page=roster&plat=3">Roster</A></LI>
            </UL>
          </LI>
          <LI>
            <A href="?page=home&plat=4">Platoon 4</A>
            <UL class="hidden">
              <LI><A href="?page=calendar&plat=4">Calendar</A></LI>
              <LI><A href="?page=roster&plat=4">Roster</A></LI>
            </UL>
          </LI>
        </UL>
    He who knows not that he knows not is a fool, ignore him. He who knows that he knows not is ignorant, teach him. He who knows not that he knows is asleep, awaken him. He who knows that he knows is a leader, follow him.

IMN logo majestic logo threadwatch logo seochat tools logo