主にオリジナルホームページやWEBサイトの作成、構築のデザインや各種ITを扱っています。


広告

全てのタブレットでcssのみでアコーディオン、ドロップダウンメニュー~透明要素法~

MY2 マイツー HP ホームページ 制作 岐阜県 大垣市 デザイン 作成 WEB ウェブ ホムペ

iphone.ipad.android.windows のタブレットでのドロップダウン、プルダウン、アコーディオンメニューを作るとクリックと同時にリンクされドドロップダウン、プルダウン、アコーディオンメニューが開きます。

リンクされちゃうのでドロップダウンメニューが使えません。これはタブレットにhoverの定義がないからです。

だからjqueryで作るのが普通ですがどうしてもcssだけで作りたかったので考えてみました。

 

 

広告

 

 

それは<li>の要素の中の<a>要素を空の透明のタグ(<span>)などで隠す(透明要素がz-index上)方法です。<a>要素を使えなくして透明要素をhover 時に消える(display:noneよりwidth: 0%;のtransition: all 4s;)様にしてリンクさせずにhover を実行させればドロップダウンメニューが現れるという事です。

パソコンではhover の時透明要素は消えるのでいつもどうり動きますがタブレットでは1タップでhover の動作が実行され(透明要素は消え、ドロップダウンメニューは現れる)ので2タップしてリンクされます。

その為メニューボタンは全部2タップになりますがタブレット対応のドロップダウン、プルダウン、アコーディオンメニューはオーケーです。

また詳しく書きます。

windowsタブレットのInternet Explorer 以外すべてオーケーでした。

作成者 : MY2 マイツー HP ホームページ 制作 岐阜県 大垣市 デザイン 作成  WEB ホムペ

広告

広告
広告


阿里巴巴(アリババ1688)代行はじめました。

  個人輸入代行、阿里巴巴(アリババ1688)代行はじめました。 ・手数料 商品代金の5%から 中国国内送料 国際送料 基本1kg110元から ・すべて中国元での料金ですのでその時のレートで金額かわります。 ・基本はチャット、メール、電話での取引になります。 ・OEM(オリジナル商品)も承ります。 ・工場への見学や通訳もできます。 アリババサイトはこちら 取引先の中国サプライヤーは信用があるため不良品は本当にすくないです。  

Read More

スマホ対応

スマホ対応ページもプラス30000円 〜

Read More

オプション

オプション20000円分無料です。

Read More

ショッピングサイトも。。

ショッピングサイトもできます。。

Read More

制作事例もみてね^^

制作事例もみてね^^

Read More


広告



©MY2 HP (マイツー ホームページ) WEBサイト。制作。オリジナルデザイン。作成 。構築。各種IT All Rights Reserved.

PC
表示
スマホ
表示