<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<!-- 矢印に変化 -->
<a href="#" class="circle" id="id1">
<span class="circle-icon" id="icon1"></span>
</a>
<!-- クローズボタンに変化 -->
<a href="#" class="circle" id="id2">
<span class="circle-icon" id="icon2"></span>
</a>
<!-- ホバーアイテム -->
<p>
<nav class="items">
<a href="#" class="test-circle"><i class="fa fa-bars fa-2x"></i></a>
<a href="#" class="test-circle"><i class="fa fa-code fa-2x"></i></a>
<a href="#" class="test-circle"><i class="fa fa-tag fa-2x"></i></a>
<a href="#" class="test-circle"><i class="fa fa-html5 fa-2x"></i></a>
<a href="#" class="test-circle"><i class="fa fa-css3 fa-2x"></i></a>
</nav>
</p>
*, *::before, *::after {
box-sizing: border-box;
}
body {
background: #222;
}
/* ================
サークル部分
================ */
.circle {
display: block;
position: relative;
width: 40px;
height: 40px;
/* margin: 20px 0 10px; */
margin: 10px 0;
border-radius: 50%;
background: #fff;
}
.circle:hover {
background: #fafafa;
}
/* ================
アイコン部分
================ */
.circle-icon {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 2px;
/* 上に(height / 2), 左に(width / 2) */
margin: -1px 0 0 -7px;
background: #2196F3;
}
.circle-icon::before,
.circle-icon::after {
display: block;
content: "";
position: absolute;
top: 50%;
left: 0;
width: 14px;
height: 2px;
background: #2196F3;
transition: 0.3s;
}
.circle-icon::before {
margin-top: -6px;
}
.circle-icon::after {
/* 幅分下に行っているので6pxではなく4px */
margin-top: 4px;
}
/* ================
クローズアイコンへ変化
================ */
.circle .close {
background: transparent;
}
.circle .close::before,
.circle .close::after {
margin-top: 0;
}
.circle .close::before {
transform: rotate(135deg);
}
.circle .close::after {
transform: rotate(225deg);
}
/* ================
アローアイコンへ変化
================ */
.circle .arrow::before,
.circle .arrow::after {
width: 8px;
}
.circle .arrow::before {
transform: translate(0, 2px) rotate(-45deg);
}
.circle .arrow::after {
transform: translate(0, -2px) rotate(45deg);
}
/* ================
ホバーでメニューがでてくるやつ
================ */
.test-circle {
display: inline-block;
width: 50px;
height: 50px;
background: white;
border-radius: 50%;
transition: 0.3s;
font-size: 1rem;
text-align: center;
}
.test-circle i {
line-height: 1.62; /* 勘 */
}
.test-circle + .test-circle:hover {
background: #999;
}
.test-circle + .test-circle {
opacity: 0;
/* width分のmarginを減らす */
margin: 0 0 0 -50px;
}
.items {
display: inline-block;
transition: 0.3s;
font-size: 0;
border: solid red;
}
.items .test-circle:first-child {
cursor: default;
}
.items:hover .test-circle + .test-circle {
margin: 0 0 0 10px;
opacity: 1;
position: relative;
}
.items:hover .test-circle:first-child {
transform: rotate(270deg);
}
$(document).ready(function() {
$("#id1").click(function() {
$("#icon1").toggleClass("arrow");
return false;
});
$("#id2").click(function() {
$("#icon2").toggleClass("close");
return false;
});
});
Also see: Tab Triggers