【CSS】フローティングウィンドウ・フローティングメニューを実装する方法

2020年7月7日CSS

フローティングウィンドウ・フローティングメニューを
実装する方法を解説していきます。

今回はふたつ
左側にバナーやメニューや
メッセージなど自由に設定出来ます。

一つは単純にフローティングウィンドウを表示
２つ目は、閉じるボタンを実装しているフローティングウィンドウ

1. 左エリアにフローティングウィンドウを表示
2. フローティングウィンドウを表示・閉じるボタンを実装

左エリアにフローティングウィンドウを表示

CSS

#test {
  float: left;
  width: 150px;
  position: fixed;
	top: 200px;
	left:10px;
	margin: 10px;
	border: 2px solid #CCFFCC;
	background-color: #fff;
	padding: 5px;
	z-index:99999;
}

HTML

<div id="test">
	MENU001
</div>

フローティングウィンドウを表示・閉じるボタンを実装

CSS

.btn {
    color: #000;
    background: rgba(204, 255, 204, .5);
    padding: .3em .5em;
    border-radius: .3em;
    text-align: center;
    display: table;
    cursor: pinter; 
}
.btn:hover {
    cursor: pinter; 
	  background: rgba(204, 230, 204, .5);
}
.btn:active {
    background: rgb(127, 194, 239);
}
.box {
  border: 2px solid #CCFFCC;
  border-radius: .3em;
  width: 150px;
  position: fixed;
	top: 200px;
	left:10px;
	margin: 10px;
	padding: 15px;
	z-index:9999;
	background-color: #fff;
}

/* close button */
.action-close {
    position: relative;
    margin-top: 2em;
}
.action-close .btn {
  position: fixed;
  left: 160px;
  top: 195px;
	z-index:99999;
}
.action-close .box {
    margin-bottom: 2em;
    border: 2px solid rgb(204, 255, 204);
}

/* checkbox non-display */
.add-control .checkbox {
    display: none;
}

/* close button's control */
.add-control .action-close #close:checked ~ .btn {
    display: none;
}
.add-control .action-close #close:checked ~ .box {
    display: none;
}

HTML

<div class="add-control">
<div class="action-close">
  <input id="close" class="checkbox" name="close" type="checkbox"><label class="btn" for="close">閉じる</label>
  <div class="box">閉じることができるコンテンツ</div>
</div></div>

是非、お試しください。

＜スポンサーリンク＞