Tabs for recent news / articles

Installation

  1. Upload files to your server
  2. Include jQuery and recent-tabs.js to your template 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="recent-tabs.js"></script>
  3. Include recent-tabs.css to your template
  4. create HTML Markup
  5. call the plugin 
    <script>
    $(function () {
        $('#YOUR_UNIQUE_ID').recentTabs();
    });
</script>

Options

  • define the height of the widget
    height: 500 (integer) 
    $('#ID').recentTabs({
    height: 200
});
  • define the height of the navigation
    navHeight: 200 (integer) 
    $('#ID').recentTabs({
    navHeight: 200
});
  • define the width of the widget
    width: 'auto' (integer) or (string)
    you can set a fixed width in px or use 'auto' for full width of the parent element 
    $('#ID').recentTabs({
    width: 'auto'
});
  • define your colors for the navigation, each [ hexcode, hexcode ] stand for each navigation
    colors: [ ['#231133', '#2F6692'], ['#a32bae', '#567cc2'], ['#df5c34', '#a449cb'], ['#d0b212', '#ff4b11'], ['#b0ff13', '#dbd420'], ['#c4fff7', '#45ff26'] ] 
    $('#ID').recentTabs({
    colors: ['#231133', '#2F6692'],
    ['#a32bae', '#567cc2'],
    ['#df5c34', '#a449cb'],
    ['#d0b212', '#ff4b11'],
    ['#b0ff13', '#dbd420'],
    ['#c4fff7', '#45ff26']
});

Markup

for each <li></li> in your navigation, you need the same count <article> </article> 
<div id="YOUR_UNIQUE_ID" class="tabs-container">
    <div class="tabs-nav-gradient"></div>
    <nav class="tabs-nav">
        <ul class="tabs-nav-items">
           <li class="tabs-nav-item">
                <div class="tabs-nav-item-title">
                    <span>Sport</span>
                </div>
           </li>
           <li class="tabs-nav-item">
                <div class="tabs-nav-item-title">
                    <span>People</span>
                </div>
           </li>
        </ul>
    </nav>
    <div class="tabs-articles">
         <article class="article">
            <div class="article-item">
                <div class="article-thumb"><img src="holder.png" alt=""/></div>
                <div class="article-headline">
                    <a href="#">The Untapped Gold Mine Of Custom That Virtually No One Knows About</a>
                    <span class="article-meta">
                    10k views, 1.7k likes, 3 days ago
                </span>
                </div>
            </div>
            <div class="article-item">
                <div class="article-thumb"><img src="holder.png" alt=""/></div>
                <div class="article-headline">
                    <a href="#">Essential Custom Smartphone Apps</a>
                    <span class="article-meta">
                    10k views, 1.7k likes, 3 days ago
                </span>
                </div>
            </div>
        </article>
        <article class="article">
            <div class="article-item">
                <div class="article-thumb"><img src="holder.png" alt=""/></div>
                <div class="article-headline">
                    <a href="#">The Untapped Gold Mine Of Custom That Virtually No One Knows About</a>
                    <span class="article-meta">
                    10k views, 1.7k likes, 3 days ago
                </span>
                </div>
            </div>
            <div class="article-item">
                <div class="article-thumb"><img src="holder.png" alt=""/></div>
                <div class="article-headline">
                    <a href="#">Essential Custom Smartphone Apps</a>
                    <span class="article-meta">
                    10k views, 1.7k likes, 3 days ago
                </span>
                </div>
            </div>
        </article>
    </div>
</div>