<!-- 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.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js