Lorem ipsum dolor sit amet, sed omnes adolescens no, has ullum senserit consetetur eu. Eu vix hinc imperdiet.
Lorem ipsum dolor sit amet, sed omnes adolescens no, has ullum senserit consetetur eu. Eu vix hinc imperdiet.
#example style='height: 100px'
.mod-main-nav-panel
.main-nav-container
.logo
a href='#'
img alt="PolicyGenius" src='images/pg-logo-tab.svg'
.nav-panel-wrapper
.primary-panel
.primary-panel-wrapper
ul.menu.primary-nav
li.has-children
span.menu-header
| Top Level Header 1
div.submenu-wrapper
ul.submenu
li.has-content
span.submenu-header
| List Content - A
div.submenu-wrapper
ul.menu.secondary-panel
li.menu-header.back
span
| List Content - A
li.intro.has-cta
p
| Lorem ipsum dolor sit amet, sed omnes adolescens no, has ullum senserit consetetur eu.
strong<
| Eu vix hinc imperdiet.
.cta-container
.cta
button.button.action
| Button Text
span.info
| Lorem ipsum dolor sit amet.
img.info-image src='holder.js/124x124?auto=yes'
li.list
h3.menu-header
| List Header 1
ul
li
a href='#'
| Link 1
li
a href='#'
| Link 2
li.list
h3.menu-header
| List Header 2
ul
li
a href='#'
| Link 1
li
a href='#'
| Link 2
li.list
h3.menu-header
| List Header 3
ul
li
a href='#'
| Link 1
li
a href='#'
| Link 2
li.mobile-scroll-buffer
.footer-wrapper
.footer
.info
| Lorem ipsum.
div.image-row
img src='holder.js/100px100p?auto=yes&text="Image Row Component"'
li.has-content
span.submenu-header
| Blog Content - A
div.submenu-wrapper
ul.menu.secondary-panel
li.menu-header.back
span
| Blog Content - A
li.intro
p
| Lorem ipsum dolor sit amet, sed omnes adolescens no, has ullum senserit consetetur eu.
strong<
| Eu vix hinc imperdiet.
.tag-container
a.button.tag href='#'
| Tag
li.blog-articles
img src='holder.js/100px200?auto=yes&text="Blog Articles Area"'
li.mobile-scroll-buffer
li.has-content
span.submenu-header
| List Content
div.submenu-wrapper
ul.menu.secondary-panel
li.menu-header.back
span
| List Content - B
li.intro
p
| Lorem ipsum dolor sit amet, sed omnes adolescens no, has ullum senserit consetetur eu.
strong<
| Eu vix hinc imperdiet.
.tag-container
a.button.tag href='#'
| Tag
li.list
h3.menu-header
| List Header 1
ul
li
a href='#'
| Link 1
li
a href='#'
| Link 2
li.list
h3.menu-header
| List Header 2
ul
li
a href='#'
| Link 1
li
a href='#'
| Link 2
li.list
h3.menu-header
| List Header 3
ul
li
a href='#'
| Link 1
li
a href='#'
| Link 2
li.mobile-scroll-buffer
li.has-content
span.submenu-header
| Blog Content - B
div.submenu-wrapper
ul.menu.secondary-panel
li.menu-header.back
span
| Blog Content - B
li.intro.has-cta
p
| Lorem ipsum dolor sit amet, sed omnes adolescens no, has ullum senserit consetetur eu.
strong<
| Eu vix hinc imperdiet.
.cta-container
.cta
button.button.action
| Button Text
span.info
| Lorem ipsum dolor sit amet.
img.info-image src='holder.js/124x124?auto=yes'
li.blog-articles
img src='holder.js/100px100p?auto=yes&text="Blog Articles Area"'
li.mobile-scroll-buffer
.footer-wrapper
.footer
.info
| Lorem ipsum.
div.image-row
img src='holder.js/100px100p?auto=yes&text="Image Row Component"'
li
a.submenu-header href='a'
| Link
li
a.menu-header href='#'
| Top-Level Link
ul.menu.secondary-nav
li.nav-header
a href='#'
| Link 1
li.nav-header
a href='#'
| Link 2
li.mobile-scroll-buffer
.search
div.icon
input.search-input type='text'
.close
button.hamburger type="button"
span.hamburger-box
span.hamburger-inner
These state variants show the main nav in it's various states. This allows us to easily review all states and aids in testing. Notes:
#example-searching style='height: 100px'
// Create Searching Example:
(function() {
// Clone main example
var $clone = $('#example > .mod-main-nav-panel').clone();
// Get element to put clone into
var $example = $('#example-searching');
// Append clone
$example.append($clone);
// Set classes to create state
$example.find('.mod-main-nav-panel')
.addClass('searching');
$example.find('.hamburger')
.addClass('is-active');
})();
#example-first-menu-open style='height: 100px'
// Create First Menu Open Example:
(function() {
// Clone main example
var $clone = $('#example > .mod-main-nav-panel').clone();
// Get element to put clone into
var $example = $('#example-first-menu-open')
// Append clone
$example.append($clone);
// Set classes to create state
$example.find('.has-children').first()
.addClass('active');
})();
#example-second-menu-open--list style='height: 500px'
// Create Second Menu Open - List Example:
(function() {
// Clone main example
var $clone = $('#example > .mod-main-nav-panel').clone();
// Get element to put clone into
var $example = $('#example-second-menu-open--list')
// Append clone
$example.append($clone);
// Set classes to create state
$example.find('.has-children').first()
.addClass('active');
$example.find('.has-children').first()
.find('.has-content').first()
.addClass('active');
})();
#example-second-menu-open--blog style='height: 400px'
// Create Second Menu Open - Blog Example:
(function() {
// Clone main example
var $clone = $('#example > .mod-main-nav-panel').clone();
// Get element to put clone into
var $example = $('#example-second-menu-open--blog')
// Append clone
$example.append($clone);
// Set classes to create state
$example.find('.has-children').first()
.addClass('active');
$example.find('.has-children').first()
.find('.has-content').eq(1)
.addClass('active');
})();
div style='height: 100px;'
.mod-main-nav-panel.simple
.main-nav-container
.logo
a href='#'
img alt="PolicyGenius" src='images/pg-logo-tab.svg'
.nav-panel-wrapper
.text-wrapper
.text
i
| Proin aliquam tortor
b Aliquam sapien enim
.text.hidden-for-small-only
b Suspendisse molestie vel
Notes:
#mobile-example-open style='height: 100vh; margin-top: 50px; overflow: hidden;'
// Create Open Example:
(function() {
// Clone main example
var $clone = $('#example > .mod-main-nav-panel').clone();
// Get element to put clone into
var $example = $('#mobile-example-open');
// Append clone
$example.append($clone);
// Set classes to create state
$example.find('.mod-main-nav-panel')
.addClass('clicked');
$example.find('.hamburger')
.addClass('is-active');
})();
#mobile-example-second-panel-list style='height: 100vh; margin-top: 50px; overflow: hidden;'
// Create Open Second Panel - List Example
(function() {
// Clone main example
var $clone = $('#example > .mod-main-nav-panel').clone();
// Get element to put clone into
var $example = $('#mobile-example-second-panel-list');
// Append clone
$example.append($clone);
// Set classes to create state
$example.find('.mod-main-nav-panel')
.addClass('clicked');
$example.find('.hamburger')
.addClass('is-active');
$example.find('.primary-panel')
.addClass('mobile-collapsed');
$example.find('.has-content').first()
.addClass('mobile-active');
})();
#mobile-example-second-panel-blog style='height: 100vh; margin-top: 50px; overflow: hidden;'
// Create Open Second Panel - Blog Examples
(function() {
// Clone main example
var $clone = $('#example > .mod-main-nav-panel').clone();
// Get element to put clone into
var $example = $('#mobile-example-second-panel-blog');
// Append clone
$example.append($clone);
// Set classes to create state
$example.find('.mod-main-nav-panel')
.addClass('clicked');
$example.find('.hamburger')
.addClass('is-active');
$example.find('.primary-panel')
.addClass('mobile-collapsed');
$example.find('.has-content').eq(1)
.addClass('mobile-active');
})();
$('.hamburger').click(function() {
if ($(this).parents('.mod-main-nav-panel').hasClass('searching')) {
$(this).parents('.mod-main-nav-panel').removeClass('searching');
$(this).removeClass('is-active');
} else {
$(this).parents('.mod-main-nav-panel').toggleClass('clicked');
$(this).toggleClass('is-active');
}
return false;
});
We use the jQuery-menu-aim plugin to make sure that a hover from one menu item to the next is intentional.
The plugin is loaded in the <head> to allow Hologram javascript to work correctly.
var pg_menuAim = {};
pg_menuAim.activate = function(menu_item) {
$(menu_item).addClass('active');
};
pg_menuAim.deactivate = function(menu_item) {
$(menu_item).removeClass('active');
};
pg_menuAim.exitMenu = function(menu) {
$(menu).children().removeClass('active');
};
$(".submenu").menuAim({
activate: pg_menuAim.activate,
deactivate: pg_menuAim.deactivate,
exitMenu: pg_menuAim.exitMenu,
submenuDirection: 'down',
submenuSelector: '.has-content',
tolerance: 300
});
$('.has-content .submenu-header').click(function() {
var $thisModule = $(this).parents('.mod-main-nav-panel');
$thisModule.find('.primary-panel').addClass('mobile-collapsed');
$thisModule.find('.has-content').removeClass('mobile-active');
$(this).parents('.has-content').addClass('mobile-active');
return false;
});
$('.back').click(function() {
var $thisModule = $(this).parents('.mod-main-nav-panel');
$thisModule.find('.primary-panel').removeClass('mobile-collapsed');
return false;
});
$('.has-children').click(function() {
$(this).siblings('.has-children').removeClass('active');
$(this).toggleClass('active');
return false;
});
$('.search .icon').click(function() {
var $thisModule = $(this).parents('.mod-main-nav-panel');
$thisModule.addClass('searching');
$thisModule.find('.hamburger').addClass('is-active');
$thisModule.find('.search-input').focus();
return false;
});
javascript:
// Make sure that whatever example the user
// is interacting with is visible above the other examples
$('.codeExample').hover(function() {
// Hover in
$(this).css('position', 'relative');
$(this).css('z-index', 1000);
}, function() {
// Hover out
$(this).css('z-index', 1);
});
// Hide mobile examples on large screens
// Hide full-width examples on small screens
// Declare function
var hideExamples = function() {
if (window.innerWidth <= 1024) {
$('[id^="example-"]').hide();
$('[id^="mobile-example-"]').show();
} else {
$('[id^="example-"]').show();
$('[id^="mobile-example-"]').hide();
}
};
// Run function on page load
hideExamples();
// Run function when user resizes
$(window).resize(function() {
hideExamples();
});