新規作成日 2017-02-08
最終更新日
サイトが、携帯端末からも閲覧されることから、グローバルメニューは、携帯端末から表示される際は、ボタンを押すとメニューが表示される、ボタンに格納するデザインにすると、情報を表示する領域を広く取ることができます。cssで実現する方法を確認します。
まず、最小サイズを想定した、メニューをcssで作成します。
Javascriptを使わずに、cssでメニューを作成しようと思います。
マウスホバーを使用したドロップダウンメニューを使用して、ボタンメニューを作成する
ドロップダウンメニューを使用して、ボタンメニューを作成しようと思います。この方法の問題は、iPhoneで使われているブラウザが、ホバー（カーソルをボタンの上に重ねる）動作に対応していないため、動作しないことです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="author" content="Horio Kazuhiko(kukekko)">
<title>Document</title>
<meta name="description" content="ページの内容の概要を記入します。">
<meta name="keywords" content="">
<link rel="stylesheet" href="css/normalize.css" type="text/css">
<link rel="stylesheet" href="css/style01.css" type="text/css">
<style type="text/css"><!--
body { padding-bottom: 300px; }
h3{ clear: both; padding: 50px 0 0; color: #333; text-align: center; }
.clear:before, .clear:after { content: ""; display: table; }
.clear:after { clear: both; }
.clear { *zoom: 1; }
/* スマホ用 メニュー */
.dropmenu{
*zoom: 1;
list-style-type: none;
/* ←変更点 width: 100%; */
margin: 5px auto 30px;
padding: 0;
}
.dropmenu:before, .dropmenu:after{
content: "";
display: table;
}
.dropmenu:after{
clear: both;
}
.dropmenu li{
position: relative;
width: 50px; /* 変更点 変更まえ 20% */
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.dropmenu li a{
display: block;
margin: 0;
padding: 15px 0 11px;
background: #8a9b0f;
color: #fff;
font-size: 14px;
line-height: 1;
text-decoration: none;
}
.dropmenu li ul{
list-style: none;
position: absolute;
width: 200px; /* 変更点 変更前なし*/
top: 100%;
left: 0;
margin: 0;
padding: 0;
}
.dropmenu li ul li{
width: 100%;
}
.dropmenu li ul li a{
padding: 13px 15px;
border-top: 1px solid #7c8c0e;
background: #6e7c0c;
text-align: left;
}
.dropmenu li:hover > a{
background: #6e7c0c;
}
.dropmenu li a:hover{
background: #616d0b;
}
#dropmenu { position: relative; z-index: 7; }
#dropmenu li ul li{
overflow: hidden;
height: 0;
transition: .2s;
}
#dropmenu li:hover ul li{
overflow: visible;
height: 38px;
}
/* スマホ用 メニュー ここまで*/
--></style>
</head>
<body>
<nav>
<ul id="dropmenu" class="dropmenu">
<li><a href="#">menu</a>
<ul>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
<li><a href="#">submenu</a></li>
</ul>
</li>
</ul>
</nav>
</body>
<footer>
<p>「掲載内容は私自身の見解であり、所属する組織を代表するものではありません。」</p>
<p>ご連絡の際は、お問い合わせページのURLの明記をお願いします。<address>xxxx＠xxxx.com</address></p>
<p>Copyright (C) 2011 Horio Kazuhiko(kukekko) All Rights Reserved.</p>
</footer>
</html>参考サイト
