メディア画面の応答メニューの課題

Question

メディア画面でthe menu of my blogの何が問題なのかを見つけるのに苦労しています。モバイルでの訪問者の50％が、これは大きな懸念事項です。私は多くの記事を読んでいますが、私は自分で問題を解決することはできません。

問題は基本的に、メディア画面上でカテゴリをクリックできないため、メニューは本質的に役に立たないということです。

メニューのCSSはこのように見えますが、基本的にはリンクがブロック形式で表示されるフライアウトメニューと似ているはずです。画面内のスペースを犠牲にすることなく、サブナビゲーション要素へのアクセスを許可する各内部ドロップダウンメニューも切り替えられます。

#nav 
{ 
list-style-type: none; 
height: 60px; 
width: 1000px; 
float:left; 
} 
#nav > a 
{ 
    display: none; 
} 

#nav li 
{ 
position: relative; 
float: left; 
list-style: none; 
left: 0; 
position: relative; 
z-index:1; 
} 

/* first level */ 

#nav > ul 
{ 
height: 3em; 
-moz-transition: opacity .5s ease .1s; 
-webkit-transition: opacity .5s ease .1s; 
-o-transition: opacity .5s ease .1s; 
-ms-transition: opacity .5s ease .1s; 
transition: opacity .5s ease .1s; 

} 
#nav > ul > li 
    { 
height: 100%; 
float: left; 
-webkit-transition: all .5s linear; 
-moz-transition: all .5s linear; 
transition: all .5s linear; 
    } 

/* second level */ 

#nav li ul 
{ 
    display: none; 
    opacity: 0; 
    position: absolute; 
    top: 100%; 

/* TRY */ 
-moz-transition: opacity .5s ease .1s; 
-webkit-transition: opacity .5s ease .1s; 
-o-transition: opacity .5s ease .1s; 
-ms-transition: opacity .5s ease .1s; 
transition: opacity .5s ease .1s; 
background: #ffffff; 
} 
#nav li:hover ul 
    { 
    display: block; 
    opacity: 1; 

/* TRY */ 
-webkit-transition: all .5s linear; 
-moz-transition: all .5s linear; 
transition: all .5s linear; 
text-decoration:none; 
/* TRY */ 
-moz-transition: height .5s ease .1s; 
-webkit-transition: height .5s ease .1s; 
-o-transition: height .5s ease .1s; 
-ms-transition: height .5s ease .1s; 
transition: height .5s ease .1s; 
    } 

/* ADDED BY ME */ 
#nav li ul a { 
margin: 0 0 0 0; 
letter-spacing: 2px; 
width: 120px; 
text-align:left; 
text-transform:uppercase; 

} 


@media only screen and (max-width: 40em) /* 640 */ 
    { 
     html 
     { 
      font-size: 75%; /* 12 */ 
     } 

     #nav 
     { 
      position: relative; 
      top: auto; 
      left: auto; 
     } 
      #nav > a 
      { 
       width: 3.125em; /* 50 */ 
       height: 3.125em; /* 50 */ 
       text-align: left; 
       text-indent: -9999px; 
       background-color: #000000; 
       position: relative; 
      } 
       #nav > a:before, 
       #nav > a:after 
       { 
        position: absolute; 
        border: solid 2px #FFF; 
        top: 35%; 
        left: 25%; 
        right: 25%; 
        content: ''; 
       } 
       #nav > a:after 
       { 
        top: 60%; 
       } 

      #nav:not(:target) > a:first-of-type, 
      #nav:target > a:last-of-type 
      { 
       display: block; 
      } 


     /* first level */ 

     #nav > ul 
     { 
      height: auto; 
      display: none; 
      position: absolute; 
      left: 0; 
      right: 0; 
     } 
      #nav:target > ul 
      { 
       display: block; 

      } 
      #nav > ul > li 
      { 
       width: 40%; 
       float: none; 
      } 

       #nav > ul > li > a 
       { 
        height: auto; 
        text-align: left; 
         background-color: #FFF; 

       } 
        #nav > ul > li:not(:last-child) > a 
        { 
         border-right: none; 
                border-top: none; 
         border-bottom: none; 


        } 


      /* second level */ 

      #nav li ul 
      { 
       position: static; 

      } 

#nav li ul a { 
margin: 0 0 0 0; 
letter-spacing: 2px; 
background-color: #FFF; 
text-align:left; 
text-transform:uppercase; 
width: 20em; 

} 
    } 

Answer 1

あなたが抱えている問題は、あなたのメニューヘッダ（アジア、太平洋、など）は、リンク（<a>タグ）であるということです。デスクトップブラウザでは、これらのリンクにマウスを移動すると、aria-haspopupを介してトリガーが発生し、その下にサブメニューが表示されます。

モバイルデバイスでは、クリックすることはできませんが、クリックする必要がありますが、<a>タグをクリックすると、それを受信して​​URLにアクセスしようとしたときに処理されます。 javascriptを使用して、クリックがドロップダウンメニューを起動するか（携帯でも同じように）、ルートカテゴリに移動する必要があるかどうかを判断する必要があります。