解決したいこと
ヘッダーメニューです。
リストがありその中に文字が書いてあり、そのにリンクを入れたいのでaタグを入れたいのですが、aタグは空白にしたくてどうすればうまくいくか教えて欲しいです。
最初は文字が書いてない円４つがあり
ホバーするとメニューが縦にビヨンと展開され、
文字が出てきます。
しかしaタグを入れると、どうしてもホバー後の文字がズレるのでそれを解決したいです。
よろしくお願いします。
HTML
<ul>
<li><a href="#firstPage" class="nav_btn"></a>Top</li>
<li><a href="#secondPage" class="nav_btn"></a>Product</li>
<li><a href="#3rdPage" class="nav_btn"></a>Price</li>
<li><a href="#4thpage" class="nav_btn"></a>Contact</li>
</ul>
css
$size: 50px;
$offsetAmount: 1.1;
$transitionTime: 0.12s;
ul{
display: block;
margin-right: 10px;
width: $size;
height: $size;
padding-top: 90px;
// position: relative;
float: right;
z-index: 1;
}
li {
display: block;
width: $size;
height: $size;
background-color: $blue;
border-radius: 50%;
opacity: 0.6;
mix-blend-mode: screen;
position: absolute;
top: -73;
right: 1;
// float: right;
transition: transform $transitionTime ease-out, opacity $transitionTime ease-out, color $transitionTime ease-out;
cursor: pointer;
text-align: center;
line-height: $size;
color: $blue;
color: transparent;
}
/*
li:after{
content: "";
display: block;
bottom: 100%;
left: 50%;
height: ($offsetAmount*100%)-100;
margin-left: -1px;
position: absolute;
width: 4px;
background-color: inherit;
opacity: 0;
transition: opacity $transitionTime ease-out;
}
*/
li:first-child:after{
display: none;
}
$offset:20%;
$colors: $blue, $blue, $blue, $blue;
$transforms: translate(0,-$offset),
translate($offset,0),
translate(0,$offset),
translate(-$offset,0);
@for $i from 1 through 4{
li:nth-child(#{$i}){
background-color: nth($colors, $i);
transform: nth($transforms, $i);
z-index: 4 - $i;
transition-duration: $transitionTime * $i;
}
}
ul:hover{
height: (4*$offsetAmount) * $size;
li {
color: white;
}
@for $i from 1 through 4{
li:nth-child(#{$i}){
transform: translate(0, ($i - 1)*($offsetAmount*100%));
&:hover{
opacity: 1;
transition-timing-function: cubic-bezier(.5,0,.5,1);
transform: translate(0, ($i - 1)*($offsetAmount*100%)) scale(1.15, 1.15);
transition-duration: $transitionTime*2;
}
}
li:nth-child(#{$i}):after{
opacity: 1;
transition-delay: ($transitionTime/1.5) * $i;
}
}
}
