つらい・・・

cssで作るプルダウンメニューについて

解決済

質問者：suzukasuzuka
質問日時：2019/12/19 14:35
回答数：1件

よろしくお願いいたします。
cssのみを使って下記の挙動のプルダウンメニューを作っています。ソースは後に記します。

１．「開くボタン」をクリックする
　　→プルダウンメニューが開く

２．メニューから選んでクリックする
　　→リンク先に飛ぶ

３．メニュー選択クリックか、「キャンセルボタン」クリックか、メニュー外の画面をクリック
　　→プルダウンメニューが閉じる

プルダウンメニューを消しておくために、opacityプロパティを利用したところ、一見良いのですが、見えていないだけで「開くボタン」の下の白紙の部分にカーソルをもっていくとリンクが存在していて、クリックするとリンク先が開いてしまいます。

そこで、opacityプロパティに併用してvisibilityプロパティを設定したところ、見えないリンクはなくなったものの、プルダウンメニューを開いてもリンクが存在していません。

ソースはその状態です。助けてください。

【html】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>gooへの質問です</title>

<link rel="stylesheet" href="./css/test.css">
</head>
<body>
<div id="all">
<div id="container">
<header itemscope itemtype="http://schema.org/WPHeader">
<h1>プルダウンメニューについて</h1>
<nav class="nav-menu-area">
<div class="menu-product-area">
<label id="menu_label_open" tabindex="0"><img src="開くボタン" width="252" height="60" alt="開くボタン"></label>
<label id="menu_label_close"><img src="閉じるボタン" width="252" height="60" alt="閉じるボタン"></label>
<ul id="menu-products-top">
<li><a itemprop="url" href="商品AページのURL" title="商品A"><img src="商品Aボタン" width="252" height="28" alt="商品Aボタン"></a></li>
<li><a itemprop="url" href="商品BページのURL" title="商品B"><img src="商品Bボタン" width="252" height="28" alt="商品Bボタン"></a></li>
<li><a itemprop="url" href="商品CページのURL" title="商品C"><img src="商品Cボタン" width="252" height="28" alt="商品Cボタン"></a></li>
<li><a itemprop="url" href="商品DページのURL" title="商品D"><img src="商品Dボタン" width="252" height="28" alt="商品Dボタン"></a></li>
<li><span><img src="キャンセルボタン" width="252" height="28" alt="キャンセル"></span></li>
</ul>
</div>
<ul class="menu">
<li><a itemprop="url" href="ページEのURL" title="ページE"><img src="ページEボタン" width="152" height="60" alt="ページE"></a></li>
<li><a itemprop="url" href="ページFのURL" title="ページF"><img src="ページFボタン" width="176" height="60" alt="ページF"></a></li>
<li><a itemprop="url" href="ページGのURL" title="ページG"><img src="ページGボタン" width="148" height="60" alt="ページG"></a></li>
</ul>
</nav>
</header>
<article itemscope itemtype="http://schema.org/Article" id="catch">
<p>よろしくお願いいたします。</p>
</article>
</div>
</div>
</body>
</html>

【test.css】
*
{margin:0;padding:0;border:0px;background-color:transparent;font-size:14px;-webkit-text-size-adjust:100%;letter-spacing:0.1em;line-height:18px;color:#000000;font-weight:normal;font-style:normal;text-decoration:none;list-style:none;}
img
{vertical-align:bottom;}
body
{font-family:"メイリオ","Hiragino Kaku Gothic Pro","sans-serif";}
div#all
{margin-left:auto;margin-right:auto;text-align:center;}
/*コンテンツ区切り */
article
{clear:both;}
/*大きさは含まれる最終要素まで */
article:after,
section:after,
header:after
{content:"";display:block;clear:both;}
/*オンカーソル時文字光る */
a:hover,
a span:hover,
a p:hover,
p#contacttel span span:hover
{color:#b3b2b1;}

/*共通 */
h1
{margin-top:20px;color:#aaaaaa;}
h2
{margin-top:20px;}
article#catch
{clear:both;margin-top:250px;}

/*プルダウンメニューレイアウト */
nav.nav-menu-area
{width:1280px;margin-top:100px;margin-left:auto;margin-right:auto;}
div.menu-product-area
{float:left;width:252px;height:90px;margin-left:200px;}
ul.menu
{float:left;}
ul.menu li
{float:left;width:252px;margin-left:20px;}

/*プルダウンメニュー */
label
{cursor:pointer;}
ul#menu-products-top
{position:relative;margin-top:-6px;visibility:hidden;opacity:0;cursor:pointer;}
label#menu_label_open:focus ~ ul#menu-products-top
{margin-top:6px;visibility:visible;opacity:1;transition: .3s ease-in-out;-webkit-transition-delay: .1s;transition-delay: .1s;}
label#menu_label_open:focus ~ label#menu_label_close
{display:block;}
label#menu_label_open:focus
{position:fixed;top:-100%;}
label#menu_label_close
{display:none;}
ul#menu-products-top li span,
ul#menu-products-top li a
{display:block;width:100%;}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： gura_
回答日時：2019/12/19 21:18

suzukasuzukaさん

>････プルダウンメニューを開いてもリンクが存在していません･･････････

→ 3.「閉じるボタン」で閉じる････ようにすると。↓

ご参考に↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

<style>
*
{margin:0;padding:0;border:0px;background-color:transparent;font-size:14px;-webkit-text-size-adjust:100%;letter-spacing:0.1em;line-height:18px;color:#000000;font-weight:normal;font-style:normal;text-decoration:none;list-style:none;}
img
{vertical-align:bottom;}
body
{font-family:"メイリオ","Hiragino Kaku Gothic Pro","sans-serif";}
div#all
{margin-left:auto;margin-right:auto;text-align:center;}
/*コンテンツ区切り */
article
{clear:both;}
/*大きさは含まれる最終要素まで */
article:after,
section:after,
header:after
{content:"";display:block;clear:both;}
/*オンカーソル時文字光る */
a:hover,
a span:hover,
a p:hover,
p#contacttel span span:hover
{color:#b3b2b1;}

/*共通 */
h1
{margin-top:20px;color:#aaaaaa;}
h2
{margin-top:20px;}
article#catch
{clear:both;margin-top:250px;}
/*プルダウンメニューレイアウト */
nav.nav-menu-area
{width:1280px;margin-top:100px;margin-left:auto;margin-right:auto;}
div.menu-product-area
{float:left;width:252px;height:90px;margin-left:200px;}
ul.menu
{float:left;}
ul.menu li
{float:left;width:252px;margin-left:20px; background:#efe;}

/*プルダウンメニュー
label{cursor:pointer;}
ul#menu-products-top{ position:relative;margin-top: 6px; cursor:pointer; }
label#menu_label_open:focus ~ ul#menu-products-top{margin-top:6px;transition: .3s ease-in-out; transition-delay: .1s;}
*/
.menu-product-area {
position:relative;
}
.menu-product-area>div {
position:absolute; top:0;
}
#cls {
display: block;
}
#opn {
1display: inline-block;
}
#opn li a{
background:#eee;
}
.menu-product-area div:target {
display: block;
}
.menu-product-area div:not(:target) {
display: none;
}
</style>
</head>
<body>
<div id="all">
<div id="container">
<header itemscope itemtype="http://schema.org/WPHeader">
<h1>プルダウンメニューについて</h1>
<nav class="nav-menu-area">
<div class="menu-product-area">
<a href="#opn">
<div id="cls">
<label id="menu_label_open" tabindex="0"><img src="https://oshiete.xgoo.jp/images/v2/common/profile … width="252" height="60" alt="開くボタン"></label>
</div>
</a>
<a href="#cls">
<div id="opn">
<label id="menu_label_close"><img src="https://oshiete.xgoo.jp/images/v2/common/profile … width="252" height="60" alt="閉じるボタン"></label>
<ul id="menu-products-top">
<li><a itemprop="url" href="https://oshiete.goo.ne.jp/" title="商品A"><img src="https://oshiete.xgoo.jp/images/v2/pc/qa/question … width="252" height="28" alt="商品Aボタン"></a></li>
<li><a itemprop="url" href="商品BページのURL" title="商品B"><img src="商品Bボタン" width="252" height="28" alt="商品Bボタン"></a></li>
<li><a itemprop="url" href="商品CページのURL" title="商品C"><img src="商品Cボタン" width="252" height="28" alt="商品Cボタン"></a></li>
<li><a itemprop="url" href="商品DページのURL" title="商品D"><img src="商品Dボタン" width="252" height="28" alt="商品Dボタン"></a></li>
 </ul>
</div>
</a>
</div>

<ul class="menu">
<li><a itemprop="url" href="ページEのURL" title="ページE"><img src="ページEボタン" width="152" height="60" alt="ページE"></a></li>
<li><a itemprop="url" href="ページFのURL" title="ページF"><img src="ページFボタン" width="176" height="60" alt="ページF"></a></li>
<li><a itemprop="url" href="ページGのURL" title="ページG"><img src="ページGボタン" width="148" height="60" alt="ページG"></a></li>
</ul>
</nav>
</header>
<article itemscope itemtype="http://schema.org/Article" id="catch">
<p>よろしくお願いいたします。</p>
</article>
</div>
</div>
</body>
</html>