<!-- MENU Acordeon -->
<div class="accordian"><!-- Profile 1 -->
<ul><!-- we will keep this LI open by default -->
<li class="active">
<h3><span class="icon-user"></span>Sayato</h3>
<ul>
<!--
<img class="picstyle" src="https://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" alt="name this picture" width="240" height="180" border="0" />
-->
<div class="pix"><div class="pixglass"></div></div>
<div class="col1">
<li><b>Nickname :</b></li>
<li>From :</li>
<li>Sayato</li>
<li>France</li>
</div>
</ul>
<li>
<h3><span class="fa fa-tachometer fa-3x"></span>Dashboard</h3>
<ul>
<li><div class="loader progress red"></div><a href="#top">Reports</a></li>
<li><div class="loader progress blue"></div><a class="loader blue" href="#">Search</a></li>
<li><div class="loader progress green"></div><a class="loader blue" href="#">Graphs</a></li>
<li><div class="purple">|</div><a class="loader blue" href="#">Settings</a></li>
</ul>
</li>
<li>
<h3><span class="fa fa-cog fa-spin fa-3x"></span>Tasks</h3>
<ul>
<li><a href="#">Today's tasks<div class="progress red"></div></a></li>
<li><a href="#">Urgent<div class="progress red"></div></a></li>
<li><a href="#">Overdues<div class="progress red"></div></a></li>
<li><a href="#">Recurring<div class="progress red"></div></a></li>
<li><a href="#">Settings<div class="progress red"></div></a></li>
</ul>
</li>
<li>
<h3><span class="fa fa-calendar"></span>Calendar</h3>
<ul class="rota-anim">
<li><a class="rota-anim" href="#">Current Month<div class="progress purple"></div></a></li>
<li><a href="#">Current Week<div class="progress purple"></div></a></li>
<li><a href="#">Previous Month<div class="progress purple"></div></a></li>
<li><a href="#">Previous Week<div class="progress purple"></div></a></li>
<li><a href="#">Next Month<div class="progress purple"></div></a></li>
<li><a href="#">Next Week<div class="progress purple"></div></a></li>
<li><a href="#">Team Calendar<div class="progress purple"></div></a></li>
<li><a href="#">Private Calendar<div class="progress purple"></div></a></li>
<li><a href="#">Settings<div class="progress purple"></div></a></li>
</ul>
</li>
<li>
<h3><span class="fa fa-heart-o"></span>Favourites</h3>
<ul>
<li><a href="#">Global favs<div class="progress green"></div></a></li>
<li><a href="#">My favs<div class="progress green"></div></a></li>
<li><a href="#">Team favs<div class="progress green"></div></a></li>
<li><a class="loader green" href="#">Settings<div class="progress green"></div></a></li>
<li><a href="#">|<div class="progress green"></div></a></li>
<li><a class="red" href="#">Settings 2<div class="green"></div></a></li>
<li><a href="#">|<div class="progress green"></div></a></li>
</ul>
</li>
<li>
<h3><span class="fa fa-flask fa-5x"></span>Test</h3>
<ul>
<li><div class="purple">INDEX</div><a class="loader blue gneon" href="/index.html">INDEX<div class="progress green"></div></a></li>
<li><div class=""></div><a class="loader blue gneon" href="#top">top<div class="progress green"></div></a></li>
<li><div class=""></div><a class="blue gneon" href="#part1">Section1<div class="progress green"></div></a></li>
<li><div class=""></div><a class="gneon" href="#part2">Section2<div class="progress green"></div></a></li>
<li><div class="loader red"></div><a class="loader blue" href="#part3">Section3</a></li>
<li><div class="loader red"></div><a class="loader blue" href="#part4">Section4</a></li>
<li><div class="loader red"></div><a class="loader blue" href="#">Graphs</a></li>
<li><div class="purple">|</div><a class="loader blue" href="#">Settings</a></li>
</ul>
</li>
</ul>
</div>
<div id="container">
<div id="ex2">
<img src="https://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" alt="name this picture" width="240" height="180" border="0" />
</div>
</div>
<div id="ex3">hover me
<img src="https://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" alt="name this picture" width="240" height="180" border="0" />
</div>
<div id="ex4">
<img src="https://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" alt="name this picture" width="240" height="180" border="0" />
</div>
<div id="ex5">
<img src="https://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" alt="name this picture" width="240" height="180" border="0" />
</div>body {
background-color: #525A73;
/*color: #fff;*/
}
/* BEGIN Menu acordeon class */
.accordian {
margin: 0;
padding: 0;
float: left;
/* oldbackground: #004050; */
background:rgba(11, 0, 77, 0.51);
/*background-color: #525A73;*/
width: 450px;
/*margin: 0px auto 0 auto; */
color: white;
/*Some cool shadow and glow effect*/
box-shadow:
0 5px 15px 1px rgba(0, 0, 0, 0.6),
0 0 200px 1px rgba(255, 255, 255, 0.5);
}
/*heading styles*/
.accordian h3 {
margin: 0;
padding: 0;
/* font-size: 12px; */
line-height: 34px;
padding: 0 10px;
cursor: pointer;
/*fallback for browsers not supporting gradients*/
/* background: #003040;
/background: linear-gradient(#003040, #002535); */
background:linear-gradient(rgba(0, 61, 255, 0.39), #002535);
}
/*heading hover effect*/
.accordian h3:hover {
text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);
background: -webkit-linear-gradient(#0080ff, #0099ff);
background: -webkit-gradient(linear, 0 0, 0 100%, from(#0080ff), to(#0099ff));
background: -moz-linear-gradient(#0080ff, #0099ff);
background: -o-linear-gradient(#0080ff, #0099ff);
background: linear-gradient(#0080ff, #0099ff);
-webkit-box-shadow: 0 0 20px #0080ff;
-moz-box-shadow: 0 0 20px #0080ff;
box-shadow: 0 0 20px #0080ff
}
/*iconfont styles*/
.accordian h3 span {
font-size: 16px;
margin-right: 10px;
}
.accordian ul {
margin: 0;
padding: 0;
}
/*list items*/
.accordian li {
list-style-type: none;
}
/*links*/
.accordian ul ul li a {
color: white;
text-decoration: none;
/* font-size: 11px; */
line-height: 27px;
display: block;
padding: 0 5px;
/*transition for smooth hover animation*/
transition: all 0.15s;
}
/*hover effect on links*/
.accordian ul ul li a:hover {
/* background: #003545; */
background:rgba(11, 0, 77, 0.51);
border-left: 5px solid lightgreen;
}
/*Lets hide the non active LIs by default*/
.accordian ul ul {
display: none;
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
background: linear-gradient(
170deg,
rgba(255,255,255,0.9) 0%,
rgba(255,255,255,0.7) 20%,
rgba(255,255,255,0.2) 55%,
rgba(0,0,0,0.0) 56%,
rgba(0,0,0,0.0) 100%
);
border-color: rgba(255, 255, 255, 0.2);
border-image: none;
border-style: groove;
/*border-width: 3px;
border-bottom-width: 2px;*/
border-top:0px;
border-left:0px;
}
/*.accordian li:nth-child(3n+0) {
background: #ff0000;
}*/
/*.accordian ul ul :nth-child(even) {
background: #0000ff;
}*/
.accordian li.active ul {
display: block;
}
.col1 {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
/*-webkit-column-gap: 2px;
-moz-column-gap: 2px;
column-gap: 2px;*/
}
/*.picstyle {
display: none;
} */
.pixglass {
/*border: 3px inset #999;*/
/*background-color: black;*/
/*position:absolute;*/
zindex:10;
width: 221px;
height: 181px;
background: linear-gradient(
170deg,
rgba(255,255,255,0.9) 0%,
rgba(255,255,255,0.7) 20%,
rgba(255,255,255,0.2) 55%,
rgba(0,0,0,0.0) 56%,
rgba(0,0,0,0.0) 100%
);
border-color: rgba(255, 255, 255, 0.2);
border-image: none;
border-style: groove;
border-top:0px;
border-left:0px;
/*border-width: 3px;
border-bottom-width: 2px;*/
}
.pix {
display: inline-block;
background: url('https://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg') no-repeat;
width: 240px;
height: 180px;
/*-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;*/
}
/*.accordian h3{
border: 0px solid #ccc; margin: 0px; -webkit-transition: margin 0.5s ease-out; -moz-transition: margin 0.5s ease-out; -o-transition: margin 0.5s ease-out;
}
.accordian h3:hover {
margin-top: 5px;
}*/
#container { width: 300px; margin: 0 auto; } #ex2 img{ height: 100px; width: 300px; margin: 15px 0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; } #ex2 img:hover { height: 133px; width: 400px; margin-left: -50px; }
#ex3 { width: 730px; height: 133px; line-height: 0px; color: transparent; font-size: 50px; font-family: “HelveticaNeue-Light”, “Helvetica Neue Light”, “Helvetica Neue”, Helvetica, Arial, sans-serif; font-weight: 300; text-transform: uppercase; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } #ex3:hover { line-height: 133px; color: #575858; } #ex3 img{ float: left; margin: 0 15px; }
#ex4 { width: 800px; margin: 0 auto; } #ex4 img { margin: 20px; border: 5px solid #eee; -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; } #ex4 img:hover { -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); }
#ex5 { width: 700px; margin: 0 auto; min-height: 300px; } #ex5 img { margin: 25px; opacity: 0.8; border: 10px solid #eee; /*Transition*/ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; /*Reflection*/ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1))); } #ex5 img:hover { opacity: 1; /*Reflection*/ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4))); /*Glow*/ -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); box-shadow: 0px 0px 20px rgba(255,255,255,0.8); }/* jQuery time accordian */
$(document).ready(function(){
$(".accordian h3").click(function(){
//slide up all the link lists
$(".accordian ul ul").slideUp();
//slide down the link list below the h3 clicked - only if its closed
if(!$(this).next().is(":visible"))
{
$(this).next().slideDown();
}
})
})
External CSS
This Pen doesn't use any external CSS resources.