HTML:CSSで作成した多階層ドロップダウンメニュー

CSSだけで何階層でも可能なドロップダウンメニューを作成しました。また、transition を使って、アニメーション効果を出しています。 尚、作成に当たり下記のサイトを参考にさせて頂きました。ありがとうございました <(_ _)>

1.CSSだけで作る「多階層」なドロップダウンメニュー
2.シンプルなソース・CSSだけでアニメーション・ドロップダウンメニュー
3.アクセシビリティを考えたドロップダウンメニューを実装する
4.Bootstrap3のドロップダウンを多階層にする方法
5.すごく役立った!サイト制作でさりげなく使われているCSSテクニックまとめ

 

menu.htm

<html>
<head>
<link rel="stylesheet" type="text/css" href="menu.css"/>
</head>
<body>
<div class="menu">
  <ul>
    <li>
      <a href="#">main menu 1</a>
      <ul>
        <li><a href="#">submenu 1-1</a>
          <ul>
            <li><a href="#">submenu 1-1-1</a></li>
            <li><a href="#">submenu 1-1-2</a></li>
            <li><a href="#">submenu 1-1-3</a></li>
          </ul>
        </li>
        <li><a href="#">submenu 1-2</a>
          <ul>
            <li><a href="#">submenu 1-2-1</a></li>
            <li><a href="#">submenu 1-2-2</a></li>
            <li><a href="#">submenu 1-2-3</a></li>
          </ul>
        </li>
        <li><a href="#">submenu 1-3</a>
          <ul>
            <li><a href="#">submenu 1-3-1</a></li>
            <li><a href="#">submenu 1-3-2</a>
              <ul>
                <li><a href="#">submenu 1-3-2-1</a></li>
                <li><a href="#">submenu 1-3-2-2</a></li>
                <li><a href="#">submenu 1-3-2-3</a></li>
              </ul>
            </li>
            <li><a href="#">submenu 1-3-3</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">main menu 2</a>
      <ul>
        <li><a href="#">submenu 2-1</a></li>
        <li><a href="#">submenu 2-2</a>
          <ul>
            <li><a href="#">submenu 2-2-1</a></li>
            <li><a href="#">submenu 2-2-2</a></li>
            <li><a href="#">submenu 2-2-3</a></li>
          </ul>
        </li>
        <li><a href="#">submenu 2-3</a></li>
      </ul>
    </li>
    <li>
      <a href="#">main menu 3</a>
      <ul>
        <li><a href="#">submenu 3-1</a></li>
        <li><a href="#">submenu 3-2</a></li>
        <li><a href="#">submenu 3-3</a></li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>
 

 

menu.css

.menu {
  margin: 0 auto;
  width: 600px;  //メインの項目数×liのwidth;
}

.menu ul {
  margin: 0;
  padding: 0;
  z-index: 1000;
  list-style: none;
}

.menu ul li {
  position: relative;
  float: left;
  width: 200px;
  height: 30px;
  line-height: 30px;
  background: black;
}

.menu ul li a {
  display: block;
  color: white;
  font-family: 'MS Gothic';
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
}

.menu ul li:hover > a {
  color: gold;
  background: #303030;
}

.menu ul li ul {
  position: absolute;
}

.menu ul li ul li {
  overflow: hidden;
  height: 0;
  background: #505050;
}

.menu ul li:hover > ul > li {
  overflow: visible;
  height: 30px;
  transition: 0.5s;
}

.menu ul li ul li a {
  background: #505050;
}

.menu ul li ul li ul {
  top: 0;
  left: 100%;
}

.menu ul li ul li ul:before {
  position: absolute;
  top: 10px;
  left: -15px;
  content: "";
  border: 5px solid transparent;
  border-left-color: silver;
}
 

HTML:インラインフレーム

iframe(インラインフレーム)

Character Set を UTF-8 で指定した場合は、HTML ファイルを UTF-8 フォーマットで保存すること。

 

iframe.htm

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>
iframe
</title>
<link rel="stylesheet" type="text/css" href="iframe.css">
</head>
<body>
  <iframe src="header.htm" id="header"></iframe>
  <div id="frame">
    <iframe src="left.htm" id="left"></iframe>
    <div id="container">
      <iframe src="content.htm" id="content"></iframe>
    </div>
    <iframe src="right.htm" id="right"></iframe>
  </div>
  <iframe src="footer.htm" id="footer"></iframe>
</body>
</html>
 

 

iframe.css

body {
  margin: 0px;
  padding: 0px;
}

iframe {
  border: none
}

#header {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 50px;
}

#frame {
  position: absolute;
  top: 50px;
  bottom: 50px;
  width: 100%;
}

#left {
  position: absolute;
  left: 0px;
  width: 150px;
  height: 100%;
}

#container {
  position: absolute;
  left: 150px;
  right: 150px;
  height: 100%;
}

#content {
  width: 100%;
  height: 100%;
}

#right {
  position: absolute;
  right: 0px;
  width: 150px;
  height: 100%;
}

#footer {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 50px;
}
 

 

header.htm

<html lang="ja">
<head>
<meta charset="utf-8">
<title>
header
</title>
<link rel="stylesheet" type="text/css" href="header.css">
</head>
<body>
<h1>
header
</h1>
</body>
</html>
 

 

header.css

body {
  text-align: center;
  background: #888fff;
  overflow: hidden;
}
 

 

left.htm

<html lang="ja">
<head>
<meta charset="utf-8">
<title>
left
</title>
<link rel="stylesheet" type="text/css" href="left.css">
</head>
<body>
<h1>
left
</h1>
<div id="sidemenu">
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
<li><a href="#">メニュー5</a></li>
</ul>
</div>
</body>
</html>
 

 

left.css

body {
  text-align: center;
  background: #555fff;
  overflow: hidden;
}

#sidemenu ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

#sidemenu li a {
  display: block;
  margin: 0px;
  padding: 0px;
  width: 130px;
  height: 25px;
  color: #000000;
  font-family: 'MS Gothic';
  font-size: 20px;
  font-weight: bold;
  text-align: left;
  text-decoration: none;
  background: gold;
  border: 1px solid black;
}

#sidemenu li a:hover {
  background: silver;
}
 

 

content.htm

<html lang="ja">
<head>
<meta charset="utf-8">
<title>
content
</title>
<link rel="stylesheet" type="text/css" href="content.css">
</head>
<body>
<h1>
content
</h1>
<p>
本文<br>
本文<br>
本文<br>
本文<br>
本文<br>
</p>
</body>
</html>
 

 

content.css

body {
  //text-align: center;
  //background: #888fff;
}
 

 

right.htm

<html lang="ja">
<head>
<meta charset="utf-8">
<title>
right
</title>
<link rel="stylesheet" type="text/css" href="right.css">
</head>
<body>
<h1>
right
</h1>
</body>
</html>
 

 

right.css

body {
  text-align: center;
  background: #555fff;
  overflow: hidden;
}
 

 

footer.htm

<html lang="ja">
<head>
<meta charset="utf-8">
<title>
footer
</title>
<link rel="stylesheet" type="text/css" href="footer.css">
</head>
<body>
<h1>
footer
</h1>
</body>
</html>
 

 

footer.css

body {
  text-align: center;
  background: #888fff;
  overflow: hidden;
}
 

 


参考サイト

 

HTML:ヘッダーとサイドバーを固定するためのCSS

ヘッダーとサイドバーを固定するためのCSSを紹介します。

 

sample.htm

<html>
<head>
<link rel="stylesheet" type="text/css" href="sample.css"/>
</head>
<body>
<div id="header">
header
</div>
<div id="sidebar">
sidebar
<p>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
</p>
</div>
<div id="content">
content
<p>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
Hello!<br>
</p>
</div>
</body>
</html>
 

 

sample.css

body {
  margin: 0px;
  padding: 0px;
  color: black;
  font-family: 'Consolas','Verdana','Times New Roman','MS Gothic','Meiryo';
  font-size: 11pt;
  line-height: 150%;
  text-align: center;
  background-color: #888fff;
}

#header {
  position: fixed;
  width: 100%;
  height: 70px;
  margin: -111px 0px 0px;
  padding: 20px 0px;
  border: 1px solid royalblue;
  border-radius: 10px;
  background-color: blue;
  z-index: 1000;
}

#sidebar {
  position: fixed;
  width: 100px;
  margin: 0px;
  padding: 20px 50px;
  border: 1px solid royalblue;
  border-radius: 10px;
}

#content {
  position: relative;
  width: auto;
  margin: 111px 0px 0px 201px;
  padding: 20px 50px;
  border: 1px solid royalblue;
  border-radius: 10px;
  text-align: left;
}
 

参考サイト

HTML:inurlを使ったサイト内検索

Googleのinurl(URLに含まれる文字列)を使ったサイト内検索方法です。

 

search.htm

<html>
<body>
<form action="http://www.google.com/search" target="_blank">
<input type="hidden" name="hl" value="ja">
<input type="text" name="hq" value="inurl" size="50">
<input type="text" name="q" value="keyword" size="50">
<input type="submit" value="search">
</form>
</body>
</html>
 

 

〈使い方〉
一つ目のテキストフィールドにinurl(例えば、xxxxx.hatenablog.com/)を入力し、二つ目のテキストフィールドに検索したいキーワードを入力します。


参考サイト

 

css

body {
  color: #252525;
  font-family: 'Verdana','MS PGothic','Courier','Lucida Grande','Times New Roman','Consolas','Meiryo','MS Gothic';
  font-size: 13pt;
  line-height: 150%;
  letter-spacing: 1px;
  background-color: #888fff;
  margin: 20px 50px 20px 50px;
}