Skip to content

Instantly share code, notes, and snippets.

@icandeveloper

icandeveloper/gist:9ec13c2ddf673a41bfed

Last active October 29, 2015 16:06
Show Gist options
  • Save icandeveloper/9ec13c2ddf673a41bfed to your computer and use it in GitHub Desktop.
Save icandeveloper/9ec13c2ddf673a41bfed to your computer and use it in GitHub Desktop.
Download ZIP
Wordpress (Sage) Bootstrap (97% pure Less) Menu (inc Mega Menu)
Raw
gistfile1.txt
<header>
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav" aria-expanded="false" aria-controls="main-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon icon-s3-icon-burger"></span>
<span class="navbar-toggle-label">Menu</span>
</button>
<a href="<?=get_bloginfo('url')?>" title="<?=get_bloginfo('name')?>" class="navbar-brand"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=175%C3%97100&w=175&h=100" /><span class="sr-only"><?=get_bloginfo('name')?></span></a>
</div> <!-- .navbar-header -->
<div class="navbar-collapse collapse" id="main-nav">
<?
/*$args = array(
'theme_location' => 'site_top_navigation',
'depth' => 3,
'container' => false,
'menu_class' => 'nav navbar-nav navbar-right top'
);
wp_nav_menu($args);*/
?>
<!-- The above generates ... -->
<ul id="menu-site-main-menu" class="nav navbar-nav main-nav">
<li id="menu-item-15468" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-15468">
<a href="#" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown">Products <b class="caret"></b></a>
<ul class="dropdown-menu adjusted">
<li id="menu-item-13117" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13117"><a href="/products/adminsuite/">FINEOS AdminSuite</a></li>
<li id="menu-item-13119" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13119"><a href="/products/billing/">FINEOS Billing</a></li>
<li id="menu-item-13120" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13120"><a href="/products/claims/">FINEOS Claims</a></li>
<li id="menu-item-13118" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13118"><a href="/products/policy/">FINEOS Policy</a></li>
<li id="menu-item-13116" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13116"><a href="/products/digital-platform/">FINEOS Digital Platform</a></li>
</ul>
</li>
<li id="menu-item-15470" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-15470"><a href="#" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown">Market Segments <b class="caret"></b></a>
<ul class="dropdown-menu adjusted">
<li id="menu-item-13102" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13102"><a href="/markets/groupworksite/">Group &amp; Worksite Benefits</a></li>
<li id="menu-item-16919" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16919"><a href="/markets/life/">Life (Group &amp; Individual)</a></li>
<li id="menu-item-13100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13100"><a href="/markets/accidentcare/">Accident Compensation</a></li>
<li id="menu-item-16918" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16918"><a href="/markets/health-medical/">Medical &amp; Health</a></li>
<li id="menu-item-13101" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13101"><a href="/markets/london/">London Market</a></li>
</ul>
</li>
<li id="menu-item-15472" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-15472"><a href="#" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown">Services <b class="caret"></b></a>
<ul class="dropdown-menu adjusted">
<li id="menu-item-15423" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15423"><a href="/services/professional-services/">Professional Services</a></li>
<li id="menu-item-14886" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14886"><a href="/services/corporate-university/">Corporate University</a></li>
<li id="menu-item-14884" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14884"><a href="/services/customer-support/">Customer Support</a></li>
</ul>
</li>
<li id="menu-item-12698" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-12698"><a href="/resources" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown">Resources <b class="caret"></b></a>
<ul class="dropdown-menu adjusted">
<li id="menu-item-13460" class="menu-item menu-item-type-taxonomy menu-item-object-resource_type menu-item-13460"><a href="/resource-types/testimonials/">Testimonials</a></li>
<li id="menu-item-13465" class="menu-item menu-item-type-taxonomy menu-item-object-resource_type menu-item-13465"><a href="/resource-types/datasheets/">Datasheets</a></li>
<li id="menu-item-13462" class="menu-item menu-item-type-taxonomy menu-item-object-resource_type menu-item-13462"><a href="/resource-types/videos/">Videos</a></li>
<li id="menu-item-13463" class="menu-item menu-item-type-taxonomy menu-item-object-resource_type menu-item-13463"><a href="/resource-types/webinars/">Webinars</a></li>
<li id="menu-item-13464" class="menu-item menu-item-type-taxonomy menu-item-object-resource_type menu-item-13464"><a href="/resource-types/white-papers/">White Papers</a></li>
</ul>
</li>
<li id="menu-item-15473" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children dropdown menu-item-15473"><a href="#" class="dropdown-toggle" data-hover="dropdown" data-toggle="dropdown">Company <b class="caret"></b></a>
<ul class="dropdown-menu right adjusted">
<li id="menu-item-15432" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15432"><a href="/company/why-fineos/">Why FINEOS?</a></li>
<li id="menu-item-16807" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16807"><a href="/company/culture-strategy/">Culture &amp; Strategy</a></li>
<li id="menu-item-15476" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15476"><a href="/company/leadership/">Leadership</a></li>
<li id="menu-item-13434" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13434"><a href="/company/customers/">Customers</a></li>
<li id="menu-item-15544" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15544"><a href="/company/history-and-awards/">History &amp; Awards</a></li>
<li id="menu-item-13048" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13048"><a href="/company/people-careers/">People &amp; Careers</a></li>
<li id="menu-item-13045" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13045"><a href="/news-events/">News &amp; Events</a></li>
<li id="menu-item-15092" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15092"><a href="/contact/">Contact Us</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right top">
<? if ( is_user_logged_in() ): ?>
<?
global $current_user; get_currentuserinfo();
?>
<? if(!empty($user_update_url)&&!empty($current_user->display_name)):?><li><a href="<?=$user_update_url?>" title="Update Profile">Welcome <?=$current_user->display_name?></a></li><? endif;?>
<? /*if(!empty($user_update_url)):?><li><a href="<?=$user_update_url?>" title="Update Profile">Profile</a></li><? endif;*/?>
<li><a class="logout" href="<? echo wp_logout_url(get_permalink().'?loggedout=true'); ?>" title="Logout">Logout</a></li>
<? else:?>
<li><a class="login" data-toggle="modal" data-target="#user-login" href="#">Login</a></li>
<li><a class="signup" href="<?=fineos_user_get_reg_url()?>" title="Sign Up">Sign Up</a></li>
<? endif;?>
</ul> <!-- nav navbar-nav navbar-right top -->
<div class="bottom">
<?php
if (has_nav_menu('primary_navigation')) :
wp_nav_menu([
'theme_location' => 'primary_navigation',
'depth' => 3,
'container' => false,
'walker' => new wp_bootstrap_navwalker(),
'menu_class' => 'nav navbar-nav main-nav'
]);
endif;
?>
<form class="navbar-form" action="<?=home_url( '/' )?>" method="get">
<div class="input-group">
<label class="sr-only" for="search-term" id="search-label">Enter a keyword</label>
<input type="search" name="s" id="search-term" class="form-control" value="<? the_search_query(); ?>" aria-labelledby="search-label" placeholder="<? /*_e('Search','responsive');*/ ?>"/>
<span class="input-group-btn">
<a class="reset"><span class="glyphicon glyphicon-remove"><span class="sr-only">Close</span></span></a>
<button class="btn submit" type="submit"><span class="hidden-md hidden-lg">Search</span><span class="hidden-xs hidden-sm glyphicon glyphicon-search"></span></button>
</span>
</div>
</form>
<a class="btn btn-default contact pull-right" href="#" title="Contact us">Contact us</a>
</div> <!-- .bottom -->
</div> <!-- .navbar-collapse -->
</nav>
</div> <!-- .container -->
</header>
<style>
/* Navigation
-------------------------------------------------------------- */
header {
@media(min-width:@screen-md){}
.navbar {
.border-radius(0px);border:0px;background-image:none;.box-shadow(none);background-repeat:no-repeat;background-color:transparent;
a.navbar-brand {
display:block;padding:0;height:auto;
position:relative;z-index:1; /* needed to make link click */
img{
width:80%;
@media(min-width:@screen-md){margin-top:20px;width:100%;height:100px;}
}
@media(min-width:@screen-md){}
}
.navbar-collapse {position:relative;border-top:0px;@media(min-width:@screen-sm){}}
.navbar-nav {
&.top {font-size:@font-size-smaller;}
&.middle {margin:auto 0px;clear:right;.btn{background-color:@gray-less-lightest;color:@blue;margin-left:1px;font-weight:500;line-height:normal;&:hover{color:#fff;background-color:@gray-less-lighter;}@media(min-width:@screen-md){width:160px;height:42px;padding:10px 30px 10px 30px;}}}
}
.bottom {
@media(min-width:@screen-md){position:absolute;bottom:0px;right:15px;}
@media(min-width:@screen-md){float:right;display:inline-block;.btn{}}
.navbar-nav {
@media(min-width:@screen-md){float:left;margin-right:0px;}
a {white-space:normal;font-size:@font-size-small;color:@blue;}
> li {
border-bottom:1px solid @gray-less-lightest;margin-left:15px;margin-right:15px;@media(min-width:@screen-sm){border-bottom:0px;}@media(min-width:@screen-md){margin:0 10px;border-bottom:0;}
> a {
text-transform:uppercase;padding-left:0;padding-right:0;background-image:none;.box-shadow(none);
&:hover,&:focus,&:active{background-color:transparent;}
@media(min-width:@screen-md){font-size:14px;font-weight:600;padding-top:5px;}
}
&.active {
border-bottom:3px solid @gray-less-lighter !important;
> a {
color:@brand-info;background-color:transparent;
&:hover, &:focus, &:active {color:@brand-info;background-color:transparent;}
}
}
&:hover {> ul.dropdown-menu.adjusted {@media(min-width:@screen-md){display:block;}}}
> ul.dropdown-menu {
> li {
> a.dropdown-toggle {position:absolute;top:-9999px;.caret{color:@gray-less-lightest;}}
> ul.dropdown-menu {display:block;padding-left:0;list-style:none;@media(min-width:@screen-md){width:220px;display:block;background-color:@blue;border:0;border-radius:0;box-shadow:none;position:relative;}}
&.active {> a {@media(min-width:@screen-md){background-color:transparent;&:hover {background-color:transparent;color:#fff;}}}}
@media(min-width:@screen-md){font-size:14px;width:220px;color:#fff;font-weight:bold;float:left;}
}
li {
&.heading {
a{
font-weight:500;padding-left:25px;@media(min-width:@screen-md){padding-left:10px;}
&:before {content:'';}
&:hover{cursor:default;color:@gray;@media(min-width:@screen-md){cursor:default;color:#e5e5e5;}}
}
}
a {
padding:5px 15px 5px 35px;line-height:@font-size-large;display:block;color:@gray;position:relative;@media(min-width:@screen-md){font-size:@font-size-large;color:@gray-less-lightest;font-weight: normal;padding-left:20px;font-size:100%;white-space:unset;}
&:hover, &:focus, &:active {
color:@brand-info;text-decoration:none;
@media(min-width:@screen-md){color:#fff;background:transparent;&:before {color: #fff;}}
}
&:before {content:'-';position:absolute;left:24px;top:4px;margin-right:20px;color:@gray;@media(min-width:@screen-md){left:10px;top:2px;color:#e5e5e5;}}
}
&.current-menu-item {a {background:transparent;text-decoration:underline;&:before{color:@brand-info;@media(min-width:@screen-md){color:#fff;}}}}
&.last {a {padding-bottom:15px;}}
@media(min-width:@screen-md){font-size:14px;}
}
&.adjusted {@media(min-width:@screen-md){display:none;visibility:visible;}}
&.two-col {@media(min-width:@screen-md){width: 480px;}}
&.three-col {@media(min-width:@screen-md){width:700px;}}
&.four-col {@media(min-width:@screen-md){width:950px;}}
&.right {@media(min-width:@screen-md){right:0;left:auto;}}
@media(min-width:@screen-md){background-color:@blue;border:0;border-radius:0;padding:20px;box-shadow:none;display:block;visibility:hidden;width:240px;}
}
&.open {
a {&.dropdown-toggle {background-color:transparent;}}
ul.dropdown-menu {li {&.current-menu-item {a {background-color:transparent;color:@brand-info;&:hover {background-color:transparent;color:@brand-info;}}}}}
}
}
&.inactive {position:absolute;top:-9999px;}
} /* .navbar-nav */
.navbar-form {
position:relative;border:0;text-align:right;margin-right:-15px;
.form-control {.box-shadow(none);@media(min-width:@screen-md){background-color:@body-bg;border-color:@body-bg;color:@body-bg;width:0px;}}
.input-group-btn {
.btn {background-color:@gray-less-lightest;}
&.submit{}
&.reset {/*position:absolute;top:-999px;*/}
&:hover {background-color:@gray-less-lighter;}
}
&.active {
.input-group-btn {
&.submit{}
&.reset {/*position:absolute;top:0;left:-50px;z-index:300;width:50px;height:50px;*/}
}
.form-control {background-color:#fff;border-color:@gray-less-lightest;color:@gray;width:400px;}
}
@media(min-width:@screen-sm){display:none;}
@media(min-width:@screen-md){display:block;float:right;margin-top:0px;}
}
} /* .bottom */
} /* .navbar */
} /* .header */
@media(min-width:@screen-md){ul.nav li.dropdown:hover > ul.dropdown-menu{display:block;}}
</style>
<script>
jQuery( document ).ready(function () {
/* Navigation
-------------------------------------------------------------- */
jQuery.each(jQuery('.main-nav > li > ul.dropdown-menu'), function() {
var num_columns = jQuery(this).find('> li.menu-item-has-children').length,
column_class = '';
switch (num_columns) {
case 1: break;
case 2: column_class = 'two-col'; break;
case 3: column_class = 'three-col'; break;
case 4: column_class = 'four-col'; break;
case 5: column_class = 'five-col'; break;
case 6: column_class = 'six-col'; break;
}
jQuery(this).addClass(column_class);
var menu_offset = jQuery(this).offset(),
menu_right = menu_offset.left + jQuery(this).width(),
nav_offset = jQuery('.main-nav').offset(),
nav_right = nav_offset.left + jQuery('.main-nav').width();
if (menu_right > nav_right) {
jQuery(this).addClass('right');
}
jQuery(this).addClass('adjusted');
});
jQuery('.navbar-header .navbar-toggle').bind({
click: function() {
if (jQuery(this).find('span.icon-fineos-icon-burger').length > 0 ) {
jQuery(this).find('span.icon').removeClass('icon-fineos-icon-burger').addClass('icon-fineos-icon-icon-x');
} else {
jQuery(this).find('span.icon').removeClass('icon-fineos-icon-icon-x').addClass('icon-fineos-icon-burger');
}
}
});
jQuery('a.dropdown-toggle').bind({
click: function(e) {
if (jQuery(window).width() > 991) {
e.stopPropagation();
} else if (jQuery(this).parent().hasClass('open')) {
e.stopPropagation();
}
}
});
/*jQuery('.navbar-brand').on( "click", function() {
console.log('Hello');
window.location = fineos_vars.baseurl;
});*/
jQuery('.navbar-form').on('click', '.btn', function () {
if (jQuery(window).width() > 991) {
if (!jQuery('.navbar-form').hasClass('active')) {
jQuery('.navbar-form').addClass('active');
jQuery('.main-nav').addClass('inactive');
jQuery('.navbar-form .form-control').focus();
return false;
}else{
// jQuery('.navbar-form').removeClass('active');
// jQuery('.main-nav').removeClass('inactive');
}
}
});
/*jQuery('.navbar-form .btn').bind({
click: function() {
if (jQuery(window).width() > 991) {
if (!jQuery('.navbar-form').hasClass('active')) {
jQuery('.navbar-form').addClass('active');
jQuery('.navbar-form .form-control').focus();
return false;
}
}
}
});*/
/*jQuery('.navbar-form .input-group .icon-fineos-icon-icon-x').bind({
click: function() {
jQuery('.navbar-form').toggleClass('active');
//jQuery('.main-nav').toggleClass('invisible');
}
});*/
jQuery('.dropdown-menu li.heading a').bind({
click: function() {
return false;
}
});
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment