Jump to content

.London Domains - £4
Photo

Drop-down menu not working on android...

css android mobile navigation

  • Please log in to reply
1 reply to this topic

#1 notxalckram

notxalckram
  • Member
  • Newbie
  • 135 posts

Posted 11 May 2018 - 09:57

Hi!

 

I've developed a navigation for our company website and it's working great on every device except Android. 

 

On iOS it uses the first touch to open the drop-down menu, and the second touch to go to the link. But on Android is skips the first touch and does both at the same time, the drop-down menu opens and then takes the user to the page. 

 

I'm struggling to find a working fix online. Below is the code:

 

The HTML is a basic representation of our navigation. 

<nav>
 <ul>
  <li><a href="page1.html">Link 01</a></li>
  <li><a href="page2.html">Link 02</a>
   <ul>
    <li><a href="page3.html">Link 03</a></li>
    <li><a href="page4.html">Link 04</a></li>
    <li><a href="page5.html">Link 05</a>
     <ul>
      <li><a href="page6.html">Link 06</a>
     </ul>
    </li>
   </ul>
  <li>
 </ul>
</nav>
.navigation{
  @include global-transition;
  flex-grow: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  @include for-tablet-landscape-up{
    padding-left: 50px;
    height: 100px;
  }
  nav{
    display: none;
    @include for-tablet-landscape-up{
      display: block;
    }
    > ul{
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      @include for-tablet-landscape-up{
        flex-direction: row;
      }
      > li{
        position: relative;
        margin-bottom: 10px;
        @include for-tablet-landscape-up{
          margin-left: 30px;
          margin-bottom:0;
          &:first-child{
            margin-left: 0;
          }
        }
        a{
          font-family: "open-sans", sans-serif;
          text-transform: uppercase;
          @include font-size(14);
          font-weight: 500;
          letter-spacing: 1px;
          padding:0;
          line-height: 2rem;
          color: $grey;
          opacity: 1;
          height: 40px;
          display: flex;
          justify-content: center;
          align-items: flex-start;
          flex-direction: column;
          text-decoration: none;
          @include global-transition;
          padding: 5px 20px;
          @include for-tablet-landscape-up{
            padding:0;
            height: 50px;
            color: white;
          }
          &:hover{
            opacity: .7;
          }
          small{
            text-transform: uppercase;
            color: $midgrey;
            @include font-size(9);
            line-height: normal;
            font-weight: 600;
          }
        }
        &:nth-child(2), 
        &:nth-child(3){
          > a{
            background: url('../../images/nav-arrow.png') no-repeat;
            background-size: 12px;
            background-position: 90% center;
            @include for-tablet-landscape-up{
              padding-right: 20px;
              background: url('../../images/nav-arrow.png') no-repeat;
              background-position: right center;
              background-size: 12px;
            }
          }
        }
        > ul, ul{
          display: none;
          
          @include for-tablet-landscape-up{
            background: white;
          }
        }
        &:hover,
        &:focus{
          background:black(0.02);
          margin-bottom: 15px;
          @include for-tablet-landscape-up{
            padding-bottom: 0;
            margin-bottom: 0;
            background: transparent;
          }
          > ul{
            display: flex;
            flex-direction: column;
            width: 100%;
            @include for-tablet-landscape-up{
              position: absolute;
              z-index: 9991;
              top: 50px;
              width: auto;
              padding-left: 0;
              &:before{
                content: '';
                border-left: 8px solid transparent;
                border-right: 8px solid transparent;
                border-bottom: 8px solid white;
                position: absolute;
                top: -8px;
                left: 20px;
              }
            }
            > li{
              display: flex;
              flex-direction: column;
              position: relative;
              a{
                white-space: nowrap;
                color: $grey;
                padding:5px 20px 5px 35px;
                width: 100%;
                height: auto;
                font-weight: 600;
                letter-spacing: 0.5px;
                @include font-size(13);
                @include for-tablet-landscape-up{
                  padding:10px 20px 10px 10px;
                }
                &:hover,
                &:focus{
                  background: black(0.05);
                  opacity: 1
                }
              }
              
              &:hover,
              &:focus{
                @include for-tablet-landscape-up{
                  padding-bottom: 0;
                }
                > ul{
                  display: flex;
                  flex-direction: column;
                  padding-left: 15px;
                  background:black(0.5);
                  > li{
                    > a{
                      color: white;
                      @include for-tablet-landscape-up{
                        color: $grey;
                      }
                    }
                  }
                  @include for-tablet-landscape-up{
                    padding-left: 0;
                    position: absolute;
                    left: 100%;
                    z-index: 9992;
                    background: white;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  &.open{
    nav{
      @include size(100%, 100%);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: white;
      display: block;
      padding: 100px 15px 0 15px;
    }
  }
}

Edited by notxalckram, 11 May 2018 - 10:52.

  • 0

#2 Renaissance-Design

Renaissance-Design
  • Global Mod
  • Code Poet
  • 1,567 posts

Posted 11 May 2018 - 11:19

I don't see any JS there, which means you're relying on built-in browser behaviour intended to make hoverable dropdowns more accessible to touch devices. Best not to do that and write your own touch handling, it's even a win on desktop because hover is a really bad paradigm for menus, clicking is much less error prone.


  • 0

Chris Cox is a freelance web designer & developer based in Bridgend, South Wales. You should definitely follow @RenaissDesign on Twitter.

Need a blank theme for a WordPress project? Check out Tabula Rasa. Was this post helpful? Buy me a beer.






Also tagged with one or more of these keywords: css, android, mobile, navigation

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users