<div class="c-nav-banner c-nav-banner__success">
<a class="c-nav-banner__link" href="#">You have items in your shopping cart. Click here to checkout.</a>
</div>
<header class="c-header c-header-wrap">
<nav role="navigation" class="c-nav c-nav--primary">
<div class="c-nav__left u-pull-left">
<a class="c-nav__icon" href="#"></a>
</div>
<div class="c-nav__middle u-pull-left">
<i class="c-icon icon-search-1"></i>
<input class="c-nav__search" type="text" name="search" placeholder="Search..">
</div>
<div class="c-nav__right u-pull-right">
<ul class="c-nav__items">
<li class="c-nav__item"><a class="c-nav__link" href="#"><span class="c-nav__link-text">Invest</span><i class="c-icon icon-invest"></i></a>
<div class="dropdown-content">
<a href="#">Explore</a>
<a href="#">Search</a>
<a href="#">My Portfolio</a>
<a href="#">Newsfeed</a>
</div>
</li>
<li class="c-nav__item"><a class="c-nav__link" href="#"><span class="c-nav__link-text">Fundraise</span><i class="c-icon icon-fundraise"></i></a>
<div class="dropdown-content">
<a href="#">My Proposals</a>
<a href="#">Investor Search</a>
<a href="#">My Investors</a>
<a href="#">Newsfeed</a>
</div>
</li>
<li class="c-nav__item"><a class="c-nav__link" href="#"><span class="c-nav__link-text">Messages </span><i class="c-icon icon-message"></i></a></li>
<li class="c-nav__item"><a class="c-nav__link" href="#"><span class="c-nav__link-text">Help </span><i class="c-icon icon-help"></i></a>
<div class="dropdown-content">
<a href="#">Fundraise FAQs </a>
<a href="#">Investor FAQs </a>
<a href="#">Learn </a>
<a href="#">Blog </a>
<a href="#">Our Rates </a>
<a href="#">Refunds </a>
</div>
</li>
<li class="c-nav__item"><a class="notification-indicator-user-avatar" href="#"><span class="notification-indicator"></span>
<div class="user-avatar"></div></a>
<div class="dropdown-content">
<a href="#">Alerts</a>
<a href="#">My Profile</a>
<a href="#">Account Settings</a>
<a href="#">Switch network</a>
<a href="#">Add Proposal</a>
<a href="#">Log Out</a>
</div>
</li>
</ul>
<ul class="dropdown-menu">
<li class="dropdown-menu__item">
<a class="dropdown-menu__link notification-indicator-user-avatar" href="#">
<span class="notification-indicator"></span>
<div class="user-avatar"></div>
</a>
<div class="dropdown-content">
<section class="ac-container">
<div>
<input id="ac-11" name="accordion-1" type="checkbox" checked="">
<label class="no-border-top" for="ac-11">Invest<i class="i-chevron-down"></i></label>
<article class="ac-small">
<ul>
<li><a href="#">Explore</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">My Portfolio</a></li>
<li><a href="#">Newsfeed</a></li>
</ul>
</article>
</div>
<div>
<input id="ac-12" name="accordion-1" type="checkbox">
<label for="ac-12">Fundraise<i class="i-chevron-down"></i></label>
<article class="ac-large">
<ul>
<li><a href="#">My Proposals</a></li>
<li><a href="#">Investor Search</a></li>
<li><a href="#">My Investors</a></li>
<li><a href="#">Newsfeed</a></li>
<li><a href="#">Buy Nudges</a></li>
</ul>
</article>
</div>
<div>
<input id="ac-13" name="accordion-1" type="checkbox">
<label class="ac-container no-border-bottom"><a class="top-level" href="#">Messages</a></label>
</div>
<div>
<input id="ac-14" name="accordion-1" type="checkbox">
<label for="ac-14">Help<i class="i-chevron-down"></i></label>
<article class="ac-large">
<ul>
<li><a href="#">Fundraise FAQs</a></li>
<li><a href="#">Investor FAQs</a></li>
<li><a href="#">Learn</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Our Rates</a></li>
<li><a href="#">Refunds</a></li>
</ul>
</article>
</div>
<div>
<input id="ac-15" name="accordion-1" type="checkbox">
<label for="ac-15">Account<i class="i-chevron-down"></i></label>
<article class="ac-large">
<ul>
<li><a href="#">Alerts</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Account Settings</a></li>
<li><a href="#">Switch Network</a></li>
<li><a href="#">Log Out</a></li>
</ul>
</article>
</div>
</section>
</div>
</li>
</ul>
</div>
</nav>
<div class="c-nav c-nav--secondary">
<div class="o-wrap cf">
<div class="u-pull-left">
<ul class="c-nav__items">
<li class="c-nav__item"><a href="#" class="c-nav__link-accent active"><span class="">My Proposals</span></a></li>
<li class="c-nav__item"><a href="#" class="c-nav__link-accent"><span class="">Investor Search</span></a></li>
<li class="c-nav__item"><a href="#" class="c-nav__link-accent"><span class="">My Investors</span></a></li>
<li class="c-nav__item"><a href="#" class="c-nav__link-accent"><span class="">Newsfeed</span></a></li>
</ul>
</div>
<div class="u-pull-right">
<div class="nudges">
<span class="nudges-count">10 Nudges remaining</span>
<button class="Button Button--primary Button--s">Buy Nudges</button>
</div>
</div>
</div>
</div>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- filter scripts -->
<script src="http://www.harrycresswell.co.uk/client/ain/bricktribe-filters/js/nouislider.min.js"></script>
<!-- /filter scripts -->
<div class="Filter">
<div class="Container">
<div class="Filter-item mr2">
<button class="Button Button--tertiary Button--s js-FilterPopup-trigger">Property Types</button>
<div class="FilterPopup FilterPopup--property">
<div class="Checkbox-parent Accordion mt2">
<input class="material-icons" type="checkbox">
<label>Residential</label>
</div>
<div class="Accordion-panel">
<ul class="Checkbox-child">
<li>
<input class="material-icons" type="checkbox">
<label>Single</label>
</li>
<li>
<input class="material-icons" type="checkbox">
<label>Multi Unit</label>
</li>
</ul>
</div>
<div class="Checkbox-parent Accordion">
<input class="material-icons" type="checkbox">
<label>Commercial</label>
</div>
<div class="Accordion-panel">
<ul class="Checkbox-child">
<li>
<input class="material-icons" type="checkbox">
<label>Hotels</label>
</li>
<li>
<input class="material-icons" type="checkbox">
<label>Restaurants</label>
</li>
<li>
<input class="material-icons" type="checkbox">
<label>Factories</label>
</li>
<li>
<input class="material-icons" type="checkbox">
<label>Warehouses</label>
</li>
<li>
<input class="material-icons" type="checkbox">
<label>Workshops</label>
</li>
<li>
<input class="material-icons" type="checkbox">
<label>Shops</label>
</li>
<li>
<input class="material-icons" type="checkbox">
<label>Offices</label>
</li>
<li>
<input class="material-icons" type="checkbox">
<label>Shopping Centers</label>
</li>
</ul>
</div>
<div class="Checkbox-parent">
<input class="material-icons" type="checkbox">
<label>Land</label>
</div>
<div class="Checkbox-parent">
<input class="material-icons" type="checkbox">
<label>Off Plan</label>
</div>
<div class="Flex-row Flex--nr mt4">
<div class="Flex-column">
<button class="Link">Clear</button>
</div>
<div class="Flex-column tr">
<button class="Link color-brand">Apply filter</button>
</div>
</div>
</div>
</div>
<div class="Filter-item mr2">
<button class="Button Button--tertiary Button--s js-FilterPopup-trigger">Funding Type</button>
<div class="FilterPopup FilterPopup--funding">
<div>
<input class="material-icons" checked="checked" type="checkbox">
<label for="test">Equity</label>
</div>
<div class="mt2">
<input class="material-icons" type="checkbox">
<label for="test">Senior Debt</label>
</div>
<div class="mt2">
<input class="material-icons" type="checkbox">
<label for="test">Mezzanine</label>
</div>
<div class="mt2">
<input class="material-icons" type="checkbox">
<label for="test">Off Plan Sales</label>
</div>
<div class="Flex-row Flex--nr mt4">
<div class="Flex-column">
<button class="Link">Clear</button>
</div>
<div class="Flex-column tr">
<button class="Link color-brand">Apply filter</button>
</div>
</div>
</div>
</div>
<div class="Filter-item">
<button class="Button Button--tertiary Button--s js-FilterPopup-trigger">Inv. Range</button>
<div class="FilterPopup FilterPopup--price">
<div class="FilterRange">
<p>Show projects between <span class="FilterRange-val">£</span><span class="FilterRange-val" id="slider-snap-value-lower">10000.00</span><br> and <span class="FilterRange-val">£</span><span class="FilterRange-val" id="slider-snap-value-upper">250000.00</span>
</p>
<div class="noUi-target noUi-ltr noUi-horizontal mt4" id="slider-snap"></div>
</div>
<div class="Flex-row Flex--nr mt5">
<div class="Flex-column">
<button class="Link">Clear</button>
</div>
<div class="Flex-column tr">
<button class="Link color-brand">Apply filter</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
//===================
// # Filter
var snapSlider = document.getElementById('slider-snap')
noUiSlider.create(snapSlider, {
start: [10000, 250000],
snap: true,
connect: true,
range: {
'min': 0,
'10%': 10000,
'20%': 25000,
'30%': 50000,
'40%': 100000,
'50%': 250000,
'60%': 500000,
'70%': 1000000,
'80%': 5000000,
'90%': 10000000,
'max': 50000000
}
});
var snapValues = [
document.getElementById('slider-snap-value-lower'),
document.getElementById('slider-snap-value-upper')
];
snapSlider.noUiSlider.on('update', function(values, handle) {
snapValues[handle].innerHTML = values[handle];
});
// Input Checkboxes
$(".Checkbox-parent input").on('click', function() {
var _parent = $(this);
var nextli = $(this).parent().next().children().children();
if (_parent.prop('checked')) {
console.log('Checkbox-parent checked');
nextli.each(function() {
$(this).children().prop('checked', true);
});
} else {
console.log('Checkbox-parent un checked');
nextli.each(function() {
$(this).children().prop('checked', false);
});
}
});
$(".Checkbox-child input").on('click', function() {
var ths = $(this);
var parentinput = ths.closest('div').prev().children();
var sibblingsli = ths.closest('ul').find('li');
if (ths.prop('checked')) {
console.log('Checkbox-child checked');
parentinput.prop('checked', true);
} else {
console.log('Checkbox-child unchecked');
var status = true;
sibblingsli.each(function() {
console.log('sibb');
if ($(this).children().prop('checked')) status = false;
});
if (status) parentinput.prop('checked', false);
}
});
// show hide accordion
var acc = document.getElementsByClassName("Accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("Accordion--active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
// FilterPopup Window
var scrollTop = '';
var newHeight = '100';
$(window).bind('scroll', function() {
scrollTop = $(window).scrollTop();
newHeight = scrollTop + 100;
});
$('.js-FilterPopup-trigger').click(function(e) {
e.stopPropagation();
if (jQuery(window).width() < 767) {
$(this).after($(this).nextAll('.FilterPopup:first'));
$(this).nextAll('.FilterPopup:first').show().addClass('FilterPopup-mobile').css('top', 0);
$('html, body').animate({
scrollTop: $(this).nextAll('.FilterPopup:first').offset().top
}, 500);
} else {
$('.FilterPopup').hide();
$(this).nextAll('.FilterPopup:first').removeClass('popup-mobile').css('top', newHeight).toggle();
};
});
$('html').click(function() {
$('.FilterPopup').hide();
});
$('.FilterPopup-close').click(function(e) {
$(this).parent().hide();
});
$('.FilterPopup').click(function(e) {
e.stopPropagation();
}) //===================
</script>
<main>
<div class="c-hero">
Show me how it looks when a user is inactive
<br><br> Resize the browser to see how the navigation responds. Note: The dropdowns also change.
</div>
</main>