Here is a nice little accordion I made as soon as I learned sass, enjoy!
A Pen by Scott Marshall on CodePen.
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'> | |
<div class="wrapper"> | |
<div class="accordian move"> | |
<ul class="first-menu"> | |
<h1 class="link">First Menu <span class="arrow"></span></h1> | |
<ul class="menu"> | |
<li><a href="#">List Item 1</a></li> | |
<li><a href="#">List Item 2</a></li> | |
<li><a href="#">List Item 3</a></li> | |
<li><a href="#">List Item 4</a></li> | |
</ul> | |
</ul> | |
</div> | |
<div class="accordian"> | |
<ul class="second-menu"> | |
<h1 class="link">Second Menu<span class="arrow"></span></h1> | |
<ul class="menu"> | |
<li><a href="#">List Item 1</a></li> | |
<li><a href="#">List Item 2</a></li> | |
<li><a href="#">List Item 3</a></li> | |
<li><a href="#">List Item 4</a></li> | |
</ul> | |
</ul> | |
</div> | |
<div class="accordian"> | |
<ul class="second-menu"> | |
<h1 class="link">Third Menu<span class="arrow"></span></h1> | |
<ul class="menu"> | |
<li><a href="#">List Item 1</a></li> | |
<li><a href="#">List Item 2</a></li> | |
<li><a href="#">List Item 3</a></li> | |
<li><a href="#">List Item 4</a></li> | |
</ul> | |
</ul> | |
</div> | |
<div class="accordian"> | |
<ul class="second-menu"> | |
<h1 class="link">Fourth Menu<span class="arrow"></span></h1> | |
<ul class="menu"> | |
<li><a href="#">List Item 1</a></li> | |
<li><a href="#">List Item 2</a></li> | |
<li><a href="#">List Item 3</a></li> | |
<li><a href="#">List Item 4</a></li> | |
</ul> | |
</ul> | |
</div> | |
<div class="accordian"> | |
<ul class="second-menu"> | |
<h1 class="link">Fifth Menu<span class="arrow"></span></h1> | |
<ul class="menu"> | |
<li><a href="#">List Item 1</a></li> | |
<li><a href="#">List Item 2</a></li> | |
<li><a href="#">List Item 3</a></li> | |
<li><a href="#">List Item 4</a></li> | |
</ul> | |
</ul> | |
</div> | |
</div> |
Here is a nice little accordion I made as soon as I learned sass, enjoy!
A Pen by Scott Marshall on CodePen.
$(".link").click(function(){ | |
if($(this).hasClass("active")){ | |
$(".link").removeClass("active"); | |
}else{ | |
$(".link").addClass("active"); | |
} | |
$(".menu").slideUp(); | |
if ($(this).next().is(":hidden")){ | |
$(this).next().slideDown(1000,'easeOutBounce'); | |
} | |
}); |
@import "compass"; | |
/****************************************************** | |
VARIABLES | |
******************************************************/ | |
$accoBG:#292929; /*Accordian menu color*/ | |
/****************************************************** | |
MIXINS | |
******************************************************/ | |
@mixin background{ | |
background-image: -ms-linear-gradient(top, #3D3D3D 0%, #212121 100%); | |
background-image: -moz-linear-gradient(top, #3D3D3D 0%, #212121 100%); | |
background-image: -o-linear-gradient(top, #3D3D3D 0%, #212121 100%); | |
background-image: | |
-webkit-gradient(linear, left top, left bottom, color-stop(0, #3D3D3D), color-stop(1, #212121)); | |
background-image: -webkit-linear-gradient(top, #3D3D3D 0%, #212121 100%); | |
background-image: linear-gradient(to bottom, #3D3D3D 0%, #212121 100%); | |
} | |
@mixin wrapper{ | |
width:400px; | |
margin:0 auto; | |
} | |
@mixin text{ | |
color:#FFF; | |
text-shadow:#000 0px 1px 2px; | |
font:12px Open Sans; | |
text-decoration:none; | |
} | |
@mixin arrow{ | |
content:""; | |
width: 0; | |
height: 0; | |
border-left: 5px solid transparent; | |
border-right: 5px solid transparent; | |
border-top: 5px solid #FFF; | |
position:absolute; | |
} | |
@mixin headertext{ | |
color:#FFF; | |
position:relative; | |
text-shadow:#000 0px 1px 2px; | |
font:13px Open Sans; | |
text-transform:uppercase; | |
padding:10px; | |
margin:0px; | |
@include background; | |
border-top:1px solid rgba(255,255,255,0.2); | |
} | |
/****************************************************** | |
BODY/HTML | |
******************************************************/ | |
html { | |
background-image: -ms-radial-gradient(center bottom, circle farthest-corner, #E6F1D2 0%, #2B8B9D 100%); | |
background-image: -moz-radial-gradient(center bottom, circle farthest-corner, #E6F1D2 0%, #2B8B9D 100%); | |
background-image: -o-radial-gradient(center bottom, circle farthest-corner, #E6F1D2 0%, #2B8B9D 100%); | |
background-image: -webkit-gradient(radial, center bottom, 0, center bottom, 561, color-stop(0, #E6F1D2), color-stop(1, #2B8B9D)); | |
background-image: -webkit-radial-gradient(center bottom, circle farthest-corner, #E6F1D2 0%, #2B8B9D 100%); | |
background-image: radial-gradient(circle farthest-corner at center bottom, #E6F1D2 0%, #2B8B9D 100%); | |
min-height:100%; | |
} | |
/****************************************************** | |
WRAPPERS | |
******************************************************/ | |
.wrapper{ | |
@include wrapper; | |
} | |
/****************************************************** | |
PAGE TEXT | |
******************************************************/ | |
h1{ | |
@include headertext; | |
} | |
/****************************************************** | |
ACCORDIAN MENU'S | |
******************************************************/ | |
.first-menu{ | |
width:400px; | |
padding:0px; | |
margin:0px; | |
border:1px solid #000; | |
background:$accoBG; | |
} | |
.second-menu{ | |
width:400px; | |
padding:0px; | |
margin:0px; | |
border-top:none !important; | |
border:1px solid #000; | |
background:$accoBG; | |
} | |
.menu{ | |
display:none; | |
list-style:none; | |
padding:0px; | |
li{ | |
padding:10px; | |
border-bottom:1px solid rgba(0,0,0,0.8); | |
border-top:1px solid rgba(255,255,255,0.1); | |
} | |
li:hover{ | |
@include background; | |
border-bottom:1px solid rgba(0,0,0,0.8); | |
} | |
li a{ | |
@include text; | |
} | |
li:first-child{ | |
border-top:1px solid #000; | |
} | |
li:last-child{ | |
border-bottom:none; | |
} | |
} | |
/****************************************************** | |
ACCORDIAN ARROWS | |
******************************************************/ | |
.arrow{ | |
top:18px; | |
left:370px; | |
@include arrow; | |
} | |
.arrow:hover{ | |
cursor:pointer; | |
} | |
/****************************************************** | |
ACCORDIAN ACTIVE STATE (OPTIONAL) | |
******************************************************/ | |
.active{ | |
//ADD STYLE HERE IF NEEDED | |
} | |
/****************************************************** | |
PLACEMENT FOR CODEPEN | |
******************************************************/ | |
.move{ | |
margin-top:50px; | |
} |