HTML と SCSS でナビメニューを作っていますが、データの描き方と、紐付け方がわかりません。
なんとか動かしたいです。よろしくお願いいたします。
「HTML」
<nav> <ul id="main"> <li>Home</li> <li>About</li> <li>Skills <ul class="drop"> <div> <li>scss</li> <li>jquery</li> <li>html</li> </div> </ul> </li> <li>Contact</li> <div id="marker"></div> </ul> </nav>
「scss」
$min-width: 120px;
$maincolor: #6BBE92;
$secondarycolor: #3E8760;
@mixin transform($value){
-webkit-transform: ($value);
-moz-transform: ($value);
-ms-transform: ($value);
transform: ($value);
}
@mixin transition($value){
-webkit-transition: ($value);
-moz-transition: ($value);
-ms-transition: ($value);
transition: ($value);
}
*{
box-sizing: border-box;
}
body{
font-family: 'Open Sans', sans-serif;
background: #374954;
color: white;
text-align: center;
}
#main{
position: relative;
list-style: none;
background: $maincolor;
font-weight: 400;
font-size: 0;
text-transform: uppercase;
display: inline-block;
padding: 0;
margin: 50px auto;
li{
font-size: 0.8rem;
display: inline-block;
position: relative;
padding: 15px 20px;
cursor: pointer;
z-index: 5;
min-width: $min-width;
}
}
li{
margin: 0;
}
.drop{
overflow: hidden;
list-style: none;
position: absolute;
padding: 0;
width: 100%;
left: 0;
top: 48px;
div{
@include transform(translate(0,-100%));
@include transition(all 0.5s 0.1s);
position: relative;
}
li{
display:block;
padding: 0;
width: 100%;
background: $secondarycolor !important;
}
}
#marker{
height: 6px;
background: $secondarycolor !important;
position: absolute;
bottom: 0;
width: $min-width;
z-index: 2;
@include transition(all 0.35s);
}
@for $i from 1 through 4{
#main li:nth-child(#{$i}){
&:hover ul div{
@include transform(translate(0,0));
}
&:hover ~ #marker{
@include transform(translate(#{(-1+$i)*$min-width},0));
}
}
}
あなたの回答
tips
プレビュー