From 1c02927d83927c272e5ab446a8c221436d065bb7 Mon Sep 17 00:00:00 2001 From: andrewmbacon Date: Tue, 2 Jun 2015 16:24:59 -0400 Subject: [PATCH] in process, adding nav options. --- functions.php | 1 - header.php | 12 +- inc/customizer-nav.php | 6 +- inc/nav-maxmegamenu.php | 12 + megamenu/megamenu.scss | 724 ++++++++++++++++++++++++++++++++++++++++ 5 files changed, 751 insertions(+), 4 deletions(-) create mode 100644 inc/nav-maxmegamenu.php create mode 100644 megamenu/megamenu.scss diff --git a/functions.php b/functions.php index fa63f4f..574d578 100644 --- a/functions.php +++ b/functions.php @@ -225,5 +225,4 @@ function metaslider_filmstrip_alt_tags( $list_item, $post, $url ) { return $list_item; } add_filter( 'metaslider_filmstrip_list_item', 'metaslider_filmstrip_alt_tags', 10, 3 ); - ?> \ No newline at end of file diff --git a/header.php b/header.php index d87d881..6ef5779 100644 --- a/header.php +++ b/header.php @@ -55,7 +55,17 @@ diff --git a/inc/customizer-nav.php b/inc/customizer-nav.php index 951a99e..78346e8 100644 --- a/inc/customizer-nav.php +++ b/inc/customizer-nav.php @@ -2,7 +2,7 @@ $wp_customize->add_setting( 'navoption1', //Give it a SERIALIZED name (so all theme settings can live under one db record) array( 'default' => 'drop', //Default setting/value to save - 'type' => 'theme_mod', //Is this an 'option' or a 'theme_mod'? + 'type' => 'option', //Is this an 'option' or a 'theme_mod'? 'capability' => 'edit_theme_options', //Optional. Special permissions for accessing this setting. 'transport' => 'refresh', //What triggers a refresh of the setting? 'refresh' or 'postMessage' (instant)? ) @@ -14,7 +14,9 @@ 'choices' => array( 'drop'=>'Dropdowns', 'drop-multi' => 'Multi-level Dropdowns', - 'tabs'=>'Tabs' + 'tabs'=>'Tabs', + 'maxmegamenu'=>'Maxmegamenu Dropdown', + 'left'=>'Left Only' ) ) ); diff --git a/inc/nav-maxmegamenu.php b/inc/nav-maxmegamenu.php new file mode 100644 index 0000000..ecd4c84 --- /dev/null +++ b/inc/nav-maxmegamenu.php @@ -0,0 +1,12 @@ + 'nav navbar-nav'.$nav1.' '.$nav2, + 'theme_location' => 'primary', /* where in the theme it's assigned */ + 'container' => false, /* container class */ + 'fallback_cb' => 'hale_main_nav_fallback', + 'items_wrap' => '' + ) + ); + +?> \ No newline at end of file diff --git a/megamenu/megamenu.scss b/megamenu/megamenu.scss new file mode 100644 index 0000000..b479919 --- /dev/null +++ b/megamenu/megamenu.scss @@ -0,0 +1,724 @@ +// ---------------- DO NOT EDIT THIS FILE DIRECTLY --------------- +// Copy this file to the wp-content/themes/YOUR_THEME/megamenu/megamenu.scss +// +// Important Note: Re-save your menu in WordPress after copying this +// file in order to regenerate the cached CSS. +// +// Developer Tips +// -- Set "define("MEGAMENU_DEBUG", true);" in wp-config.php to disable CSS cache +// -- Add &nocache to the CSS URL to regenerate cache + +$container_background_from: blue; +$container_background_to: white; +$container_border_radius_top_left, +$container_border_radius_top_right, +$container_border_radius_bottom_right, +$container_border_radius_bottom_left: 7px; + +$menu_item_align: left; + +$menu_item_link_color_hover: yellow; + +$container_padding_top: 1em; +$container_padding_right: 1em; +$container_padding_bottom: 1em; +$container_padding_left: 1em; + + +$transitions: 'off'; + +$menu_item_link_border_radius_top_left: 0px; +$menu_item_link_border_radius_top_right: 0px; + + +$menu_item_link_border_radius_top_left: 0px; +$menu_item_link_border_radius_top_right: 0px; + +$menu_item_spacing: 1.111em; + + +$menu_item_divider: 'off'; +$menu_item_divider_glow_opacity: 1; + + +$menu_item_link_color_hover: red; +$menu_item_link_weight_hover: normal; +$menu_item_link_text_decoration_hover: underline; +$menu_item_border_color_hover: yellow; + + +$menu_item_background_hover_from +$menu_item_background_hover_to + +@mixin border-radius($topleft: 0, $topright: 0, $bottomright: 0, $bottomleft: 0) { + -webkit-border-radius: $topleft $topright $bottomright $bottomleft; + -moz-border-radius: $topleft $topright $bottomright $bottomleft; + -ms-border-radius: $topleft $topright $bottomright $bottomleft; + -o-border-radius: $topleft $topright $bottomright $bottomleft; + border-radius: $topleft $topright $bottomright $bottomleft; +} + +@mixin box-shadow($value) { + -webkit-box-shadow: $value; + -moz-box-shadow: $value; + -ms-box-shadow: $value; + -o-box-shadow: $value; + box-shadow: $value; +} + +@mixin background($from, $to) { + @if $to == $from { + background: $to; + } @else { + background: $to; + background: -webkit-gradient(linear, left top, left bottom, from($from), to($to)); + background: -moz-linear-gradient(top, $from, $to); + background: -ms-linear-gradient(top, $from, $to); + background: -o-linear-gradient(top, $from, $to); + background: linear-gradient(to bottom, $from, $to); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}'); + } +} + +// resets +#{$wrap}, +#{$wrap} #{$menu}, +#{$wrap} #{$menu} ul, +#{$wrap} #{$menu} li, +#{$wrap} #{$menu} p, +#{$wrap} #{$menu} img, +#{$wrap} #{$menu} div, +#{$wrap} #{$menu} a { + color: $panel_font_color; + font-family: $panel_font_family; + font-size: $panel_font_size; + background: none; + border: 0; + @include border-radius(0, 0, 0, 0); + margin: 0; + opacity: 1; + padding: 0; + position: relative; + right: auto; + top: auto; + bottom: auto; + left: auto; + text-align: left; + text-transform: none; + vertical-align: baseline; + @include box-shadow(none); + list-style-type: none; + line-height: $line_height; + box-sizing: border-box; + float: none; + overflow: visible; + display: block; + min-height: 0; + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + transition: none; + text-decoration: none; + width: auto; + clip: auto; + height: auto; + outline: none; + visibility: inherit; + + &:before, + &:after { + display: none; + } +} + +#{$wrap} #{$menu} { + visibility: visible; +} + +#{$wrap} #{$menu} a { + display: inline; +} + +#{$wrap} #{$menu} table, +#{$wrap} #{$menu} td, +#{$wrap} #{$menu} tr, +#{$wrap} #{$menu} th { + border: 0; + margin: 0; + padding: 0; + background: none; +} + +#{$wrap} { + @include background($container_background_from, $container_background_to); + @include border-radius($container_border_radius_top_left, $container_border_radius_top_right, $container_border_radius_bottom_right, $container_border_radius_bottom_left); + + #{$menu} { + + text-align: $menu_item_align; + padding: $container_padding_top $container_padding_right $container_padding_bottom $container_padding_left; + + p { + margin-bottom: 10px; + } + + @if $transitions == 'on' { + a { + -webkit-transition: background 200ms linear, color 200ms linear; + -moz-transition: background 200ms linear, color 200ms linear; + -o-transition: background 200ms linear, color 200ms linear; + transition: background 200ms linear, color 200ms linear; + } + } + + input, + img { + max-width: 100%; + } + + li.mega-menu-item > ul.mega-sub-menu { + display: block; + visibility: hidden; + opacity: 1; + } + + &.mega-no-js li.mega-menu-item:hover > ul.mega-sub-menu, + &.mega-no-js li.mega-menu-item:focus > ul.mega-sub-menu, + li.mega-menu-item.mega-toggle-on > ul.mega-sub-menu, + li.mega-menu-item.mega-menu-megamenu.mega-toggle-on ul.mega-sub-menu { + visibility: visible; + } + + li.mega-menu-item a[class^='dashicons']:before { + font-family: dashicons; + } + + li.mega-menu-item a:before { + display: inline-block; + font: inherit; + font-family: dashicons; + position: static; + margin: 0 6px 0 0px; + vertical-align: top; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + + li.mega-menu-item.mega-hide-text a:before { + margin: 0; + } + + li.mega-align-bottom-left { + > ul.mega-sub-menu { + + } + + &.mega-toggle-on > a { + @include border-radius($menu_item_link_border_radius_top_left, $menu_item_link_border_radius_top_right, 0, 0); + } + } + + li.mega-align-bottom-right { + > ul.mega-sub-menu { + right: 0; + } + + &.mega-toggle-on > a { + @include border-radius($menu_item_link_border_radius_top_left, $menu_item_link_border_radius_top_right, 0, 0); + } + } + + @if unit($panel_width) == '%' { + > li.mega-menu-megamenu.mega-menu-item { + position: static; + } + } + + // top level items + > li.mega-menu-item { + + margin: 0 $menu_item_spacing 0 0; + display: inline-block; + height: auto; + + @if $menu_item_divider == 'on' { + border-left: 1px solid $menu_item_divider_color; + -webkit-box-shadow: inset 1px 0 0 0 rgba(255,255,255,$menu_item_divider_glow_opacity); + -moz-box-shadow: inset 1px 0 0 0 rgba(255,255,255,$menu_item_divider_glow_opacity); + box-shadow: inset 1px 0 0 0 rgba(255,255,255,$menu_item_divider_glow_opacity); + + /* Hide divider on first menu item */ + &:first-child { + border-left: 0; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + } + } + + &.mega-item-align-right { + float: right; + margin: 0 0 0 $menu_item_spacing; + } + + &.mega-toggle-on > a, + > a:hover, + > a:focus { + @include background($menu_item_background_hover_from, $menu_item_background_hover_to); + color: $menu_item_link_color_hover; + font-weight: $menu_item_link_weight_hover; + text-decoration: $menu_item_link_text_decoration_hover; + border-color: $menu_item_border_color_hover; + } + + @if $menu_item_highlight_current == 'on' { + + &.mega-current-menu-item, + &.mega-current-menu-ancestor { + > a { + @include background($menu_item_background_hover_from, $menu_item_background_hover_to); + color: $menu_item_link_color_hover; + font-weight: $menu_item_link_weight_hover; + text-decoration: $menu_item_link_text_decoration_hover; + } + } + + } + + > a { + border-top: $menu_item_border_top solid $menu_item_border_color; + border-left: $menu_item_border_left solid $menu_item_border_color; + border-right: $menu_item_border_right solid $menu_item_border_color; + border-bottom: $menu_item_border_bottom solid $menu_item_border_color; + outline: none; + text-decoration: none; + padding: $menu_item_link_padding_top $menu_item_link_padding_right $menu_item_link_padding_bottom $menu_item_link_padding_left; + line-height: $menu_item_link_height; + font-weight: $menu_item_link_weight; + height: $menu_item_link_height; + vertical-align: baseline; + text-align: left; + width: auto; + display: block; + color: $menu_item_link_color; + text-transform: $menu_item_link_text_transform; + text-decoration: $menu_item_link_text_decoration; + @include background($menu_item_background_from, $menu_item_background_to); + @include border-radius($menu_item_link_border_radius_top_left, $menu_item_link_border_radius_top_right, $menu_item_link_border_radius_bottom_right, $menu_item_link_border_radius_bottom_left); + font-family: $menu_item_link_font; + font-size: $menu_item_link_font_size; + cursor: pointer; + } + + @media only screen and (max-width : $responsive_breakpoint) { + display: list-item; + margin: 0; + clear: both; + border: 0; + + &.mega-item-align-right { + float: none; + } + + > a { + @include border-radius(0 0 0 0); + border: 0; + margin: 0; + line-height: 40px; + height: 40px; + padding: 0 10px; + } + + } + + } + + // sub menu items (megamenu) + + > li.mega-menu-megamenu > ul.mega-sub-menu { + z-index: $z_index; + @include border-radius($panel_border_radius_top_left, $panel_border_radius_top_right, $panel_border_radius_bottom_right, $panel_border_radius_bottom_left); + @include background($panel_background_from, $panel_background_to); + padding: $panel_padding_top $panel_padding_right $panel_padding_bottom $panel_padding_left; + position: absolute; + width: $panel_width; + border-top: $panel_border_top solid $panel_border_color; + border-left: $panel_border_left solid $panel_border_color; + border-right: $panel_border_right solid $panel_border_color; + border-bottom: $panel_border_bottom solid $panel_border_color; + + @if unit($panel_width) == '%' { + left: 0; + } + + @if $shadow == 'on' { + @include box-shadow($shadow_horizontal $shadow_vertical $shadow_blur $shadow_spread $shadow_color); + } + + @media only screen and (max-width : $responsive_breakpoint) { + float: left; + position: static; + width: 100% !important; + } + + @for $of from 1 through 8 { + + @for $cols from 1 through $of { + + > li.mega-menu-columns-#{$cols}-of-#{$of} { + width: (100% / $of) * $cols; + } + + } + } + + @media only screen and (max-width : $responsive_breakpoint) { + > li { + width: 50% !important; + clear: none; + } + + > li:nth-child(odd) { + clear: left; + } + } + + > li ul.mega-sub-menu { + clear: both; + } + + > li ul.mega-sub-menu li ul.mega-sub-menu { + margin-left: 10px; + } + + > li ul.mega-sub-menu li ul.mega-sub-menu li ul.mega-sub-menu { + margin-left: 20px; + } + + > li.mega-menu-item { + color: $panel_font_color; + font-family: $panel_font_family; + font-size: $panel_font_size; + display: block; + float: left; + clear: none; + padding: $panel_widget_padding_top $panel_widget_padding_right $panel_widget_padding_bottom $panel_widget_padding_left; + vertical-align: top; + + &.mega-menu-clear { + clear: left; + } + + /* Widget titles */ + > h4.mega-block-title { + color: $panel_header_color; + font-family: $panel_header_font; + font-size: $panel_header_font_size; + text-transform: $panel_header_text_transform; + text-decoration: $panel_header_text_decoration; + font-weight: $panel_header_font_weight; + margin: $panel_header_margin_top $panel_header_margin_right $panel_header_margin_bottom $panel_header_margin_left; + padding: $panel_header_padding_top $panel_header_padding_right $panel_header_padding_bottom $panel_header_padding_left; + vertical-align: top; + display: block; + border-top: $panel_header_border_top solid $panel_header_border_color; + border-left: $panel_header_border_left solid $panel_header_border_color; + border-right: $panel_header_border_right solid $panel_header_border_color; + border-bottom: $panel_header_border_bottom solid $panel_header_border_color; + } + + /* Second level menu item */ + > a { + color: $panel_second_level_font_color; + font-family: $panel_second_level_font; + font-size: $panel_second_level_font_size; + text-transform: $panel_second_level_text_transform; + text-decoration: $panel_second_level_text_decoration; + font-weight: $panel_second_level_font_weight; + margin: $panel_second_level_margin_top $panel_second_level_margin_right $panel_second_level_margin_bottom $panel_second_level_margin_left; + padding: $panel_second_level_padding_top $panel_second_level_padding_right $panel_second_level_padding_bottom $panel_second_level_padding_left; + vertical-align: top; + display: block; + border-top: $panel_second_level_border_top solid $panel_second_level_border_color; + border-left: $panel_second_level_border_left solid $panel_second_level_border_color; + border-right: $panel_second_level_border_right solid $panel_second_level_border_color; + border-bottom: $panel_second_level_border_bottom solid $panel_second_level_border_color; + } + + /* Second level menu item hover */ + > a:hover, + > a:focus { + color: $panel_second_level_font_color_hover; + font-weight: $panel_second_level_font_weight_hover; + text-decoration: $panel_second_level_text_decoration_hover; + @include background($panel_second_level_background_hover_from, $panel_second_level_background_hover_to); + } + + /* third level menu item */ + li.mega-menu-item > a { + color: $panel_third_level_font_color; + font-family: $panel_third_level_font; + font-size: $panel_third_level_font_size; + text-transform: $panel_third_level_text_transform; + text-decoration: $panel_third_level_text_decoration; + font-weight: $panel_third_level_font_weight; + margin: 0; + padding: $panel_third_level_padding_top $panel_third_level_padding_right $panel_third_level_padding_bottom $panel_third_level_padding_left; + vertical-align: top; + display: block; + } + + /* Second level menu item hover */ + li.mega-menu-item > a:hover, + li.mega-menu-item > a:focus { + color: $panel_third_level_font_color_hover; + font-weight: $panel_third_level_font_weight_hover; + text-decoration: $panel_third_level_text_decoration_hover; + @include background($panel_third_level_background_hover_from, $panel_third_level_background_hover_to); + } + } + + } + + // sub menu items (flyout) + + > li.mega-menu-flyout ul.mega-sub-menu { + z-index: $z_index; + position: absolute; + width: $flyout_width; + border-top: $flyout_border_top solid $flyout_border_color; + border-left: $flyout_border_left solid $flyout_border_color; + border-right: $flyout_border_right solid $flyout_border_color; + border-bottom: $flyout_border_bottom solid $flyout_border_color; + padding: $flyout_padding_top $flyout_padding_right $flyout_padding_bottom $flyout_padding_left; + @include background($flyout_menu_background_from, $flyout_menu_background_to); + + @if $shadow == 'on' { + @include box-shadow($shadow_horizontal $shadow_vertical $shadow_blur $shadow_spread $shadow_color); + } + + @media only screen and (max-width : $responsive_breakpoint) { + float: left; + position: static; + width: 100% !important; + } + + li.mega-menu-item { + + @if $flyout_menu_item_divider == 'on' { + border-bottom: 1px solid $flyout_menu_item_divider_color; + + /* Hide divider on last menu item */ + &:last-child { + border-bottom: 0; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + } + } + + @media only screen and (max-width : $responsive_breakpoint) { + clear: both; + } + + a { + display: block; + @include background($flyout_background_from, $flyout_background_to); + color: $flyout_link_color; + font-family: $flyout_link_family; + font-size: $flyout_link_size; + font-weight: $flyout_link_weight; + padding: $flyout_link_padding_top $flyout_link_padding_right $flyout_link_padding_bottom $flyout_link_padding_left; + line-height: $flyout_link_height; + text-decoration: $flyout_link_text_decoration; + text-transform: $flyout_link_text_transform; + vertical-align: baseline; + } + + &:first-child a { + border-top-left-radius: $flyout_border_radius_top_left; + border-top-right-radius: $flyout_border_radius_top_right; + } + + &:last-child a { + border-bottom-right-radius: $flyout_border_radius_bottom_right; + border-bottom-left-radius: $flyout_border_radius_bottom_left; + } + + a:hover, + a:focus { + @include background($flyout_background_hover_from, $flyout_background_hover_to); + font-weight: $flyout_link_weight_hover; + text-decoration: $flyout_link_text_decoration_hover; + color: $flyout_link_color_hover; + } + + ul.mega-sub-menu { + position: absolute; + left: 100%; + top: 0; + } + + @media only screen and (max-width : $responsive_breakpoint) { + ul.mega-sub-menu { + position: static; + left: 0; + width: 100%; + + a { + padding-left: 20px; + } + } + } + } + } + + // arrows + li.mega-menu-flyout.mega-menu-item-has-children, + li.mega-menu-flyout li.mega-menu-item-has-children, + > li.mega-menu-item-has-children { + + > a:after { + content: $arrow_down; + display: inline-block; + font: inherit; + font-family: dashicons; + margin: 0 0 0 6px; + vertical-align: top; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-transform: rotate(0); + -moz-transform: rotate(0); + -ms-transform: rotate(0); + -o-transform: rotate(0); + transform: rotate(0); + } + + @media only screen and (max-width : $responsive_breakpoint) { + a:after { + float: right; + } + + &.mega-toggle-on > a:after { + content: $arrow_up; + } + } + } + + // arrows + li.mega-menu-flyout.mega-menu-item-has-children.mega-hide-arrow > a:after, + li.mega-menu-flyout li.mega-menu-item-has-children.mega-hide-arrow > a:after, + > li.mega-menu-item-has-children.mega-hide-arrow > a:after { + display: none; + } + + + li.mega-menu-item li.mega-menu-item-has-children > a:after { + content: $arrow_right; + float: right; + margin: 0; + + @media only screen and (max-width : $responsive_breakpoint) { + content: $arrow_down; + } + } + + li.mega-menu-flyout.mega-align-bottom-right { + + li a { + text-align: right; + + @media only screen and (max-width : $responsive_breakpoint) { + text-align: left; + } + } + + li a:before { + float: right; + margin: 0 0 0 6px; + + @media only screen and (max-width : $responsive_breakpoint) { + float: left; + margin: 0 6px 0 0; + } + } + + li.mega-menu-item-has-children > a:after { + content: $arrow_left; + float: left; + margin: 0; + + @media only screen and (max-width : $responsive_breakpoint) { + content: $arrow_down; + float: right; + } + } + + ul.mega-sub-menu li.mega-menu-item ul.mega-sub-menu { + left: -100%; + top: 0; + } + } + } + + // responsive toggle hamburger + + .mega-menu-toggle { + display: none; + z-index: 1; + cursor: pointer; + text-align: right; + @include background($container_background_from, $container_background_to); + @include border-radius(2px, 2px, 2px, 2px); + line-height: 40px; + height: 40px; + color: $menu_item_link_color; + + @media only screen and (max-width : $responsive_breakpoint) { + display: block; + } + + &:before { + content: "\f333"; + font-family: 'dashicons'; + font-size: 24px; + margin: 0 5px; + float: right; + } + + &.mega-menu-open:before { + content: "\f153"; + } + + @if str-length($responsive_text) > 0 { + &:after { + content: $responsive_text; + } + + &.mega-menu-open:after { + content: ""; + } + } + + @media only screen and (max-width : $responsive_breakpoint) { + + #{$menu} { + display: none; + + li.mega-menu-item > ul.mega-sub-menu { + display: none; + visibility: visible; + opacity: 1; + } + + li.mega-menu-item.mega-toggle-on > ul.mega-sub-menu, + li.mega-menu-item.mega-menu-megamenu.mega-toggle-on ul.mega-sub-menu { + display: block; + } + } + + &.mega-menu-open + #{$menu} { + display: block; + } + } + } +} \ No newline at end of file