"v4 - News Layout"
Bootstrap 3.3.0 Snippet by explotter

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='container-fluid'>
<div class='row'>
<nav class='col-xs-12'>
<div class='newsnav'>
<div id='recentnews'><i class="fa fa-newspaper-o"></i><span class='hidden-xxs'>RECENT NEWS</span></div>
<div class='search'><i class="fa fa-search"></i> ALL</div>
<ul class='newslinks'>
<a href='#' class='more-links'>
<li>MORE LINKS <i class="fa fa-chevron-down"></i></li>
</a>
<a href='#'>
<li>LIVE STEREAM</li>
</a>
<a href='#'>
<li>PROMOTE NEWS</li>
</a>
<a href='#'>
<li>EVENTS</li>
</a>
<a href='#'>
<li>CALENDAR</li>
</a>
<a href='#'>
<li>CONCORDIAN</li>
</a>
<a href='#'>
<li>CONTACT</li>
</a>
</ul>
</div>
</nav>
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
@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700);
@import url(https://fonts.googleapis.com/css?family=Abel);
body.opened, html.opened{
overflow:hidden;
position: relative;
height: 100%;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul.newslinks a {
text-decoration: none;
}
nav .newsnav {
height: 35px;
background: rgb(0, 85, 150);
}
nav .newsnav #recentnews {
font-family: 'Abel';
font-size: 20px;
height: 100%;
padding: 0 14px 0 8px;
background: #faA634;
color: #fff;
float: left;
}
nav .newsnav #recentnews i {
margin: 8px;
}
ul.newslinks {
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
$(function() {
$('.to-top').click(function() {
$('html,body').animate({
'scrollTop': 0
}, 500);
});
$('.newsnav .search').click(function() {
$('.searchnav, .archive, body, html').addClass('opened')
});
$('.searchnav .close-search').click(function() {
$('.searchnav, .archive, body, html').removeClass('opened')
});
$('img').load(function(){
$(this).addClass('show')
});
});
/*! Lazy Load 1.9.1 - MIT license - Copyright 2010-2013 Mika Tuupola */
! function(a, b, c, d) {
var e = a(b);
a.fn.lazyload = function(f) {
function g() {
var b = 0;
i.each(function() {
var c = a(this);
if (!j.skip_invisible || c.is(":visible"))
if (a.abovethetop(this, j) || a.leftofbegin(this, j));
else if (a.belowthefold(this, j) || a.rightoffold(this, j)) {
if (++b > j.failure_limit) return !1
} else c.trigger("appear"), b = 0
})
}
var h, i = this,
j = {
threshold: 0,
failure_limit: 0,
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: