Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI CodeMyUI/index.html
Created Aug 7, 2018

Embed
What would you like to do?
Morphing tab button with list
<div class="m-dropdown">
<div class="e-button open">
Click Me
<div class="e-burger">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<ul class="e-list">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</div>
$(".e-list").slideUp(function() {
$(".e-button").removeClass("open");
});
$(".e-button").on("click", function() {
if ($(this).hasClass("open")) {
$(".e-list").slideUp(function() {
$(".e-button").removeClass("open");
});
} else {
$(this).addClass("open");
setTimeout(function() {
$(".e-list").stop().slideDown();
}, 200);
}
});
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://use.fontawesome.com/b5bf1bd49e.js"></script>
$f-title:'Roboto', sans-serif;
$f-body:'Open Sans', sans-serif;
@mixin centre($axis: "both") {
position: absolute;
@if $axis == "y" {
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
@if $axis == "x" {
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
@if $axis == "both" {
top: 50%;
left: 50%;
-webkit-transform: translate(-51%, -50%);
-moz-transform: translate(-51%, -50%);
-ms-transform: translate(-51%, -50%);
-o-transform: translate(-51%, -50%);
transform: translate(-51%, -50%);
}
}
@mixin font-size($sizeValue: 1.6, $lineHeight: 2.4) {
font-size: ($sizeValue * 10) + px;
font-size: $sizeValue + rem;
line-height: ($lineHeight * 10) + px;
}
@mixin transition($property) {
-webkit-transition: $property;
-moz-transition: $property;
-ms-transition: $property;
-o-transition: $property;
transition: $property;
}
@mixin border-radius($radius) {
border-radius:$radius;
-moz-border-radius:$radius;
-webkit-border-radius:$radius;
-ms-border-radius: $radius;
}
html {
font-size: 62.5%;
}
body{
@include font-size(1.6, 2.2);
margin:0;
padding:0;
font-family:$f-body;
background:#333;
}
.m-dropdown{
margin:50px auto;
width:300px;
display:block;
.e-button{
@include transition(all .3s ease-in-out);
@include border-radius(20px);
@include font-size(1.4, 2);
padding: 8px 40px 8px 15px;
z-index: 900;
color: #fff;;
font-weight: 900;
position: relative;
border: 2px solid transparent;
margin-top: 2px;
font-family: $f-body;
z-index: 5;
display:block;
width:100px;
margin:0 auto;
background:#1b1b1b;
&:hover{
cursor:pointer;
box-shadow:0 3px 6px rgba(0,0,0,0.2);
color:#669999;
.e-burger{
span{
background:#669999;
}
}
}
&:after,
&:before {
display: block;
content: " ";
position: absolute;
top: 2px;
height: 100%;
width: 20px;
background: #333;
z-index: 0;
}
&:after {
left: 100%;
margin-left: 2px;
border-bottom-left-radius: 10px;
}
&:before {
right: 100%;
margin-right: 2px;
border-bottom-right-radius: 10px;
}
.e-burger {
@include transition(all .3s ease-in-out);
@include centre(y);
right: 15px;
width: 15px;
height: 14px;
transform-origin: center;
z-index: -1;
span {
@include transition(all .2s ease-in-out);
@include centre(y);
@include border-radius(2px);
width: 100%;
height: 2px;
background: #fff;
display: block;
left: 0;
transform-origin: center;
&:first-child {
top: 0;
transform: none;
}
&:last-child {
top: auto;
bottom: 0;
transform: none;
}
}
&:after {
@include transition(height .3s ease-in-out);
content: " ";
display: block;
position: absolute;
top: 12px;
right: -37px;
height: 0;
width: 199px;
left: auto;
z-index: -2;
background: #1b1b1b;
opacity: 0;
}
}
&.open {
border-color: transparent;
background: #1b1b1b;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
color:#669999;
.e-burger {
span {
background:#669999;
&:first-child {
opacity: 0;
}
&:nth-child(2) {
transform: translateY(-50%) rotate(-45deg);
}
&:nth-child(3) {
transform: translateY(-50%) rotate(45deg);
}
&:last-child {
opacity: 0;
}
}
&:after {
height: 15px;
opacity: 1;
}
}
}
}
.e-list{
@include border-radius(5px);
box-shadow:0 3px 6px rgba(0,0,0,0.2);
position:relative;
width:100%;
margin:0;
padding:0;
list-style:none;
background:#1b1b1b;
float:left;
overflow:hidden;
z-index:999;
li{
display:block;
width:100%;
float:left;
border-bottom:1px solid rgba(255,255,255,0.01);
box-sizing:border-box;
&:last-child{
border:none;
}
a{
@include transition(all .3s ease-in-out);
padding:15px;
float:left;
width:100%;
text-decoration:none;
color:#fff;
font-weight:600;
box-sizing:border-box;
&:hover{
background:#fff;
color:#111;
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.