"Twitter Responsive Tabview"
Bootstrap 3.3.0 Snippet by harryom

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="title">
🐦 <br/> Twitter Responsive Tabs
</div>
<div class="view">
<div class="bio">
<div class="bio--header">
<div class="bio--header-image-wrapper">
<img class="bio--header-image" src="https://pbs.twimg.com/profile_images/780306197610106880/YR1otDu7_400x400.jpg" alt="Lubos' picture" />
</div>
<div class="bio--header-buttons">
<a href="mailto:lmenus@lmen.us" title="Send me an email">Email</a>
<a href="https://twitter.com/lmenus" target="_blank" title="Go to my Twitter profile">Follow</a>
</div>
</div>
<h2>Lubos</h2>
<h3>@lmenus</h3>
<p>Chief Idea Officer. Blog <a href="https://bold.io/@lmenus" target="_blank">bold.io/@lmenus</a></p>
</div>
<div class="tabbar">
<ul class="tabbar--list">
<li class="tabbar--item">Tweets</li>
<li class="tabbar--item">Tweets et réponses</li>
<li class="tabbar--item">Médias</li>
<li class="tabbar--item">J'aime</li>
</ul>
<div class="tabbar--border"><span></span></div>
</div>
<div class="feed">
<h3>«<span class="js-view-name"></span>»</h3>
<p>Sweeet tab view animation 🍬</p>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$c-bg-bio: #1b2836 !default;
$c-bg-body: #eee !default;
$c-bg-feed: #141d26 !default;
$c-bg-tabbar: #243447 !default;
$c-text-body: #555 !default;
$c-text-feed-secondary: #8899a6 !default;
$c-text-tabbar: #8899a6 !default;
$c-text-tabbar-active: #1da1f2 !default;
$s-bio-border: 8px !default;
$s-bio-image: 120px;
$s-border-h: .2rem !default;
$border-radius: 8px;
$q: 640px !default;
*, *:after, *:before {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(#000, 0);
}
body {
align-items: center;
background-color: $c-bg-body;
color: $c-text-body;
display: flex;
flex-direction: column;
font-family: 'Dancing Script', cursive;
justify-content: center;
min-height: 100vh;
}
a {
color: inherit;
font-weight: 700;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
const TABBAR_BORDER_TRANSFORM_EASING = 'ease'
const TABBAR_BORDER_TRANSFORM_SPEED = 400
const TABBAR_ITEM_ACTIVE_CLASSNAME = 'active'
let _ActiveTabBarItemNode = null
let _ActiveTabBarItemIndex = -1
let _TabBarBorderNode = null
let _TabBarListNode = null
let _FeedViewName = null
const addTabBarItemProps = () => {
const items = _TabBarListNode.children
for (let i = 0; i < items.length; i++) {
const item = items[i]
item.style.transition = `color ${TABBAR_BORDER_TRANSFORM_SPEED}ms ${TABBAR_BORDER_TRANSFORM_EASING}`
item.addEventListener('click', () => setTabBarItemActive(i) )
}
}
const getNodeCenter = clientRect => {
return (clientRect.left + clientRect.right) / 2
}
const getTabBarItem = index => {
return index < _TabBarListNode.children.length ? _TabBarListNode.children[index] : false
}
const initTabBar = index => {
const node = document.getElementsByClassName('tabbar')[0]
const feedName = document.getElementsByClassName('js-view-name')[0]
if (_TabBarListNode || _TabBarBorderNode || !node) return
if (feedName) _FeedViewName = feedName
_TabBarListNode = node.children[0]
_TabBarBorderNode = node.children[1]
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: