jQueryを用いてSNS風のコンテンツを作る

タイトルの通り、jQueryを用いてSNS風のコンテンツを作成します。
完成品はこちらです。

See the Pen Untitled by 910qdo (@910qdo) on CodePen.

まずはHTML/CSSでユーザー情報の設定を行います。

ユーザー名・ユーザーID・説明文を設定してください。
デフォルトでは三人になっていますが、liタグを複製しクラス名を「user+数字」の形にすることで増やすことができます。

<div class="sns_menu--list">
  <p class="sns_menu--list_ttl">ユーザー一覧</p>
  <ul id="userData" class="sns_menu--list_data">
    <li class="user1">
      <div class="sns_menu--list_data_icon">
        <div class="sns_icon"></div>
      </div>
      <div class="sns_menu--list_data_text">
        <div class="sns_menu--list_data_text01">
          <p class="userName">ユーザー1</p>
          <p class="userId">@user1</p>
        </div>
        <p class="sns_menu--list_data_text02">おはようございます。</p>
      </div>
    </li>
    ～～～ 省略 ～～～
  </ul>
</div>

各ユーザーのアイコンを設定します。
画像を使用する場合はbackground-imageプロパティで設定してください。

.user1 .sns_icon {
  background-color: red;
}

表示したい投稿内容をHTMLに記入してください。
liタグにはユーザーに対応したクラス名を「user+数字」の形で設定してください。

<ul class="sns_page">
  <li class="user1"><p>サンプルサンプル</p></li>
  <li class="user2"><p>テキストテキストテキスト</p></li>
  <li class="user3"><p>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</p></li>
  ～～～ 省略 ～～～
</ul>

ここからJSの説明に入ります。
まずはじめにタイムライン部分の整形を行います。
これでブラウザで実行した時に、アイコンやユーザー名が表示されるようになります。

$('.sns_page > li').prepend('<div class="sns_page--icon"><div class="sns_icon"></div></div>');
$('.sns_page > li').append('<div class="sns_page--favorite js__sns_page--favorite"></div>');
$('.sns_page > li > p').addClass('sns_page--text_main');
$('.sns_page > li > p.sns_page--text_main').wrap('<div class="sns_page--text"></div>');
var userLength = $('#userData li').length;
for(var i=1;i<userLength+1;i++){
  var userName = $('#userData li.user' + i + ' .userName').text();
  var userId = $('#userData li.user' + i + ' .userId').text();
  $('.sns_page > li.user' + i + ' .sns_page--text').prepend('<div class="sns_page--text_user"><p class="sns_page--text_user_name">' + userName + '</p><p class="sns_page--text_user_id">' + userId + '</p></div>');
}

メニューの開閉を設定します。
開く時はアイコンを、閉じる時はアイコンか背景をクリックすると実行されます。

$('.js__sns_header--menu').click(function(){
  $('.sns_inner--menu').fadeIn(100);
  $('.sns_menu--list').addClass('on');
});
$('.js__sns_menu--close').click(function(){
  $('.sns_inner--menu').fadeOut();
  $('.sns_menu--list').removeClass('on');
});

メニュー開閉時のスライドはCSS側で設定しています。
初期状態ではメニューは左側に隠れていますが、sns_menu--listクラスにonクラスが付与されると、左からスライドされます。

.sns_menu--list {
  position: relative;
  left: -250px;
  width: 250px;
  height: 100%;
  padding: 60px 15px 15px;
  background-color: #ffffff;
  border-right: 1px solid #000000;
  box-sizing: border-box;
  transition: 0.2s;
}
.sns_menu--list.on {
  left: 0;
}

タブの切り替えを設定します。
ホームからお気に入り（☆マーク）に設定しておくと、お気に入りタブを開いた時に該当の投稿のみが表示されるようになります。

$('.sns_page > li').addClass('disp');
$('.sns_page > li.disp:last').css({'border-bottom': 'none'});
$('.js__sns_header--list > li').click(function(){
  $('.js__sns_header--list > li.on').removeClass('on');
  $(this).addClass('on');
  $('.sns_page > li.disp').removeClass('disp');
  $('.sns_page > li').removeAttr('style');
  if($(this).attr('class') == 'snsListHome on'){
    /* すべて表示 */
    $('.sns_page > li').addClass('disp');
  }else if($(this).attr('class') == 'snsListFavorite on'){
    /* お気に入りに登録した投稿のみ表示 */
    $('.sns_page > li.favo').addClass('disp');
  }
  $('.sns_page > li.disp:last').css({'border-bottom': 'none'});
});

先述したお気に入りの登録処理です。

$('.js__sns_page--favorite').click(function(){
  $(this).toggleClass('on');
  $(this).parent().toggleClass('favo');
});

これで完成です。