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


広告

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

windowsタブレットのInternet Explorerでの方法は

aria-haspopup="true"プロパティを親ボックスに追加すれば追加したボックスだけに

マウス操作がエミュレート、シュミレートされるのでオーケーです。

 

 

広告

 

 



<style>
.menu {
position: relative;
}
.menu ul {
display: none;
}
.menu:hover ul{
display: block;
}

.menu a {
z-index: 1;
}
.menu span:nth-child(1) {
bottom: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
z-index: 10;
display: inline-block;

-webkit-transition: all 4s;
-moz-transition: all 4s;
-o-transition: all 4s;
transition: all 4s;

}

.menu:hover span:nth-child(1){
height: 0%;
}

.menu span:nth-child(2) {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
z-index: 10;
display: inline-block;

-webkit-transition: all 4s;
-moz-transition: all 4s;
-o-transition: all 4s;
transition: all 4s;

}

.menu:hover span:nth-child(2){
height: 0%;
}
</style>

 

<ul aria-haspopup="true">
<li class="menu"><a href="リンク先">メニュー1</a><span></span> <span></span>
<ul>
<li><a href="リンク先">メニュー1-1</a></li>
<li><a href="リンク先">メニュー1-2</li>
</ul>
</li>
<li><a href="リンク先">メニュー2</a></li>

</ul>

<span>が透明要素になってます。

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

で書いた様に<a>要素を一度使えなくしてます。

作成者 : 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
表示
スマホ
表示