Kabataslak aşağıdaki şekilde kullanabilirsiniz. Linklerin genişliklerini % olarak ayarladım yalnızca arkaplan renklerini kullanacağınız alana göre düzenlemeniz gerekir. Onun dışında bir sorun çıkmayacaktır diye düşünüyorum. Ayrıca sayfada FontAwesome zaten yüklüyse <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> bunu eklemenize gerek yoktur.

  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <style>
/* açıklamaların arasında kalan kısmı kullanmayın */
body {
    background:#ddd;
}
/* açıklamaların arasında kalan kısmı kullanmayın */
  .sm-links {
    margin:0;
    padding:0;
    display:block;
    height:50px;
    overflow:hidden;
    background:#fff;
    transition:all .2s ease-in-out;
}
.sm-links li {
    list-style:none;
    padding:2px 5px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    transition:all .2s ease-in-out;
}
.sm-links li:nth-child(odd) {
    float:left;
    width:49%;
    transition:all .2s ease-in-out;
}
.sm-links li:nth-child(even) {
    float:right;
    width:49%;
    transition:all .2s ease-in-out;
}
.sm-links li a {
    display:block;
    color:#000;
    font-size:13px;
    text-decoration:none;
    font-family: Arial;
    transition:all .2s ease-in-out;
}
.sm-links li a:before {
    content: "\f111";
    font-family: FontAwesome;
    font-size:6px;
    float:left;
    margin:5px 5px 0 0;
}
.sm-toggle {
    height:auto !important;
    transition:all .2s ease-in-out;
}
.sm-button {
    width:100%;
    margin-top:-50px;
    position:relative;
    z-index:1000;
    transition:all .2s ease-in-out;
    height:50px;
    cursor:pointer;
    padding-top:10px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#dddddd+0,dddddd+100&0+0,1+100 */
    background: -moz-linear-gradient(top, rgba(221,221,221,0) 0%, rgba(221,221,221,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(221,221,221,0) 0%,rgba(221,221,221,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(221,221,221,0) 0%,rgba(221,221,221,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00dddddd', endColorstr='#dddddd',GradientType=0 ); /* IE6-9 */
    text-align:center;
}
.sm-button-cur {
    margin-top:0;
    height:30px;
    transition:all .2s ease-in-out;
}
.sm-button span:before {
    display:inline-block;
    content:"\f063";
    transition:all .2s ease-in-out;
    padding-top:0 !important;
    font-family: FontAwesome;
    font-size:15px;
    color:#498eee;
}
.sm-button-cur span:before {
    content: "\f062";
    transition:all .2s ease-in-out;
}
  </style>
   
  <div class="show-more-links">
    
    <ul class="sm-links">
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
        <li><a href="" title="">Lorem ipsum dolor sit</a></li>
    </ul>
    <div class="cle"></div>
    <div class="sm-button"><span></span></div>
</div>
   
  <script>
$(function(){
    var a = 0;
    $('.sm-button').click(function(){
        $('.sm-button').toggleClass('sm-button-cur');
    });
});
  $(function(){
    var a = 0;
    $('.sm-button').click(function(){
        $('.sm-links').toggleClass('sm-toggle');
    });
});
</script>