プルダウンでページを切り替える流れをHTMLとCSSだけで整理してみました。今回は前回のJavaScript仕様版をベースにイラストで選択するインターフェースを整理しました。
前回の内容
page_01.html〜page_03.htmlは前回と全く同じです。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Dropdown Menu Redirect</title>
<style>
/* スタイル（css）設定 */
* {
margin: 0px;
padding: 0px;
}
div#mainbox {
width: 100px;
height: 50px;
margin: 50px auto;
text-align: center;
background-color: forestgreen;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: aquamarine;
min-width: 100px;
z-index: 1;
}
.dropdown-content img {
width: 100%;
height: auto;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body bgcolor="aquamarine">
<div id="mainbox">
<div class="dropdown">
<img src="links/menu.png" alt="fish picture menu">
<div class="dropdown-content">
<img src="links/fish_01s.png" alt="fish 01 picture"
onclick="redirectToPage('page_01.html')">
<img src="links/fish_02s.png" alt="fish 02 picture"
onclick="redirectToPage('page_02.html')">
<img src="links/fish_03s.png" alt="fish 03 picture"
onclick="redirectToPage('page_03.html')">
<!--
.dropdownクラスが親要素で画像とプルダウンメニューを含む。
.dropdown-contentクラスはプルダウンメニューのコンテンツを表し、
デフォルトでは非表示だが.dropdown要素にマウスを重ねると、
プルダウンメニューが表示される
-->
</div>
</div>
<script>
function redirectToPage(url) {
window.location.href = url;
}
</script>
</body>
</html>
<!-- index.html -->
<!-- page_01.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Blue Fish Image</title>
<style>
* {
margin: 0px;
padding: 0px;
}
a:link {
color: white;
}
a:visited {
color: white;
}
div#mainbox {
width: 800px;
height: 600px;
margin: 0px auto;
}
</style>
</head>
<body bgcolor="crimson">
<div id="mainbox">
<div class="container">
<img src="links/fish_01.png" alt="Blue Fish Image">
<a href="index.html">Go to Top Page</a>
</div>
</div>
</body>
</html>
<!-- page_01.html -->
<!-- page_02.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Yellow Fish Image</title>
<style>
* {
margin: 0px;
padding: 0px;
}
a:link {
color: white;
}
a:visited {
color: white;
}
div#mainbox {
width: 800px;
height: 600px;
margin: 0px auto;
}
</style>
</head>
<body bgcolor="mediumblue">
<div id="mainbox">
<div class="container">
<img src="links/fish_02.png" alt="Yellow Fish Image">
<a href="index.html">Go to Top Page</a>
</div>
</div>
</body>
</html>
<!-- page_02.html -->
<!-- page_03.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Green Fish Image</title>
<style>
* {
margin: 0px;
padding: 0px;
}
a:link {
color: white;
}
a:visited {
color: white;
}
div#mainbox {
width: 800px;
height: 600px;
margin: 0px auto;
}
</style>
</head>
<body bgcolor="darkorange">
<div id="mainbox">
<div class="container">
<img src="links/fish_03.png" alt="Green Fish Image">
<a href="index.html">Go to Top Page</a>
</div>
</div>
</body>
</html>
<!-- page_03.html -->
トップページ
［SELECT FISH］をクリックするとイラスト一覧が表示されます。
Blue Fish Page
Yellow Fish Page
Green Fish Page
