A Pen by LukyVJ.

A-Pen-by-LukyVJ.markdown

A Pen by LukyVJ

A Pen by LukyVJ on CodePen.

License.

index.html

<header>
  <ul class="accounts">
    <li><img src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/64/profile/profile-80_1.jpg" alt="" /> <span>user</span> <a href="#" class="rmv">✖</a></li>
       <li><img src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/64/profile/profile-80_1.jpg" alt="" /> <span>user</span>  <a href="#" class="rmv">✖</a></li>
     
<li class="last">Add one +</li>
  </ul>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</header>

script.js

/**//*
$(document).ready(function(){
    var h1 = $(this).find('li'), //Find the LI
        h2 = h1.length, // Get how many LI stand in the ul 
        h3 = h1.height(), // Get their height (px)
        h4 = h3*h2,//Height of all the li combined 
        h5 = $(this).height(); //Get the height of the ul 
  $('header ul.accounts').click(function(){
 
        h1 = $(this).find('li'), //Find the LI
        h2 = h1.length, // Get how many LI stand in the ul 
        h3 = h1.height(), // Get their height (px)
        h4 = h3*h2,//Height of all the li combined 
        h5 = $(this).height(), //Get the height of the ul 
        h6 = $('header').height(); 
        
      $(this).css('height', h4 +'px').addClass('open');
        if(h5 == h4){
           $(this).css('height', h6 +'px').removeClass('open');
        }
  });
var t = '<li><img src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/64/profile/profile-80_1.jpg" alt="" /> <span>user</span>  <a href="#" class="rmv">✖</a></li>';
  $('header ul.accounts .last').on('click',function(){
    $('header ul.accounts').prepend(t);
     $('header ul.accounts li .rmv').on('click',function(){
    $(this).parent().remove();                           
  });
  }); 
  $('header ul.accounts li .rmv').on('click',function(){
    $(this).parent().remove();                           
  });
});
/**/

/**/
$(document).ready(function(){var e=$(this).find("li"),t=e.length,n=e.height(),r=n*t,i=$(this).height();$("header ul.accounts").click(function(){e=$(this).find("li"),t=e.length,n=e.height(),r=n*t,i=$(this).height(),h6=$("header").height();$(this).css("height",r+"px").addClass("open");if(i==r){$(this).css("height",h6+"px").removeClass("open")}});var s='<li><img src="http://s3-us-west-2.amazonaws.com/s.cdpn.io/64/profile/profile-80_1.jpg" alt="" /> <span>user</span>  <a href="#" class="rmv">✖</a></li>';$("header ul.accounts .last").on("click",function(){$("header ul.accounts").prepend(s);$("header ul.accounts li .rmv").on("click",function(){$(this).parent().remove()})});$("header ul.accounts li .rmv").on("click",function(){$(this).parent().remove()})})

/**/

style.scss

@import "compass";
@import url(http://fonts.googleapis.com/css?family=Roboto);

@mixin reset {
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  font-family:"Roboto",Helvetica, sans-serif;
}

@mixin high{
  -webkit-font-smoothing:antialiased;
  @include box-sizing(border-box);
}

$c-1:#747c8b;
$c-2:lighten($c-1,45%);
$c-3:#f4f4f4;
$c-4:darken($c-3,5%);
$c-5:darken($c-3,10%);
$c-6:#FF4351;
$c-7:lighten($c-6,10%);
$c-8:lighten($c-6,5%); 
$c-9:darken($c-3,20%);
$c-10:lighten($c-3,40%);
$c-11:darken($c-3,12%);


$s-1:4em;

*{
  @include high();
}
html,body{
  @include reset();
}

body{
  background:$c-1;
}

header{
  width:100%;
  height:$s-1;
  background:$c-2;
  float:left;
   a{
    display:block;
    width:10em;
    height:$s-1;
    float:left;
    border-right:1px solid $c-11;
    text-align:center;
    line-height:4.4;
    text-decoration:none;
    @include box-shadow(inset .1em 0 0 $c-10);
    &:nth-child(2){
        @include box-shadow(inset .1em 0 0 $c-11,inset .15em 0 0 $c-10);
    }
    color:$c-1;
}
  ul.accounts{
  display:block;
  width:10em;
  height:$s-1;
  overflow:hidden;
   float:left;
  padding:0 0;
  margin:0; 
  background:$c-2;
  @include transition(height .3s ease);

    &.open{
      height:auto;
     
       @include transition(height .3s ease);
      li{
        
        &:not(:first-child){
          &:hover{
          background:$c-5;
          }
        }
        
      }
    }
    li{
    display:block;
    float:left;
    width:100%;
    text-align:center;
    line-height:4.4;
    cursor:pointer;
    position:relative;
    z-index:5;
    height:$s-1;
     @include box-shadow(inset 0 -.1em 0 $c-9,inset 0 .1em 0 $c-10);
      &:first-child{z-index:30} 
     /* &:not(:nth-child(1)){
       height:0;
      overflow:hidden;
      }*/ 
       @include transition(height .3s ease);

      &:nth-child(even){background:$c-4;}
      &:nth-child(odd){background:$c-3;}
      img{
      display:block;
      width:2.6em;
      float:left;
      margin:.6em 0 1.5em .8em ;
      border-radius:6px;
      }
      a.rmv,span{
        display:block;
        float:left;
        width:32.9%;padding:0;
        float:inherit;
      }
      a.rmv{
        color:$c-7;
        text-shadow:0 1px 0 $c-8;
        border:0;
        @include box-shadow(0 0 0);
      }
      &:not(:first-child){
         a.rmv{
        }
      }
    }
  }
 
}


@media all and (max-width:30em){

  
  header{
         a{      
        width:5em; 
      }
    ul.accounts{
      width:4em;
 
      li{
      width:4em; 
       
        img{
          width:80%;
        margin:10% 10%;}
      }
    }
  }
  
}