Skip to content

J
joshine
Commit 68ddbaaa by 王东红
Options

导航条优化

parent f04e4d0e
Showing with 480 additions and 113 deletions
app/code/Magento/Search/view/frontend/templates/form.mini.phtml
...@@ -16,14 +16,14 @@ $allowedSuggestion = $configProvider->isSuggestionsAllowed(); ...@@ -16,14 +16,14 @@ $allowedSuggestion = $configProvider->isSuggestionsAllowed();
$quickSearchUrl = $allowedSuggestion ? $escaper->escapeUrl($helper->getSuggestUrl()) : ''; $quickSearchUrl = $allowedSuggestion ? $escaper->escapeUrl($helper->getSuggestUrl()) : '';
?> ?>
<div class="block block-search"> <div class="block block-search">
<div class="block block-title"><strong><?= $escaper->escapeHtml(__('Search')) ?></strong></div> <!-- <div class="block block-title"><strong>--><?//= $escaper->escapeHtml(__('Search')) ?><!--</strong></div>-->
<div class="block block-content"> <div class="block block-content">
<form class="form minisearch" id="search_mini_form" <form class="form minisearch" id="search_mini_form"
action="<?= $escaper->escapeUrl($helper->getResultUrl()) ?>" method="get"> action="<?= $escaper->escapeUrl($helper->getResultUrl()) ?>" method="get">
<div class="field search"> <div class="field search">
<label class="label" for="search" data-role="minisearch-label"> <!-- <label class="label" for="search" data-role="minisearch-label">-->
<span><?= $escaper->escapeHtml(__('Search')) ?></span> <!-- <span>--><?//= $escaper->escapeHtml(__('Search')) ?><!--</span>-->
</label> <!-- </label>-->
<div class="control"> <div class="control">
<input id="search" <input id="search"
data-mage-init='{ data-mage-init='{
......
app/design/frontend/Joshine/breeze/Magento_Theme/layout/default.xml
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body> <body>
<attribute name="class" value="breeze-theme"/> <attribute name="class" value="breeze-theme"/>
<move element="top.search" destination="store.menu" before="catalog.topnav"/>
<move element="skip_to_content" destination="header.panel" before="-"/> <move element="skip_to_content" destination="header.panel" before="-"/>
<referenceBlock name="cookie-status-check" remove="true"/> <referenceBlock name="cookie-status-check" remove="true"/>
<referenceBlock name="report.bugs" remove="true"/> <referenceBlock name="report.bugs" remove="true"/>
......
app/design/frontend/Joshine/breeze/web/css/_custom.less
...@@ -931,6 +931,8 @@ footer{ ...@@ -931,6 +931,8 @@ footer{
background: #f2f2f2; background: #f2f2f2;
border-top: 1px solid #e1e1e1; border-top: 1px solid #e1e1e1;
font-family: 'Outfit-Regular', sans-serif; font-family: 'Outfit-Regular', sans-serif;
display: flex;
.nav-sections{ .nav-sections{
background: transparent; background: transparent;
} }
...@@ -1062,130 +1064,156 @@ footer{ ...@@ -1062,130 +1064,156 @@ footer{
height: 3px; height: 3px;
border: 3px solid transparent; border: 3px solid transparent;
} }
//.navigation li.level0.nav-1 .ui-menu-icon{
// position: absolute; .minisearch .control#search{
// text-transform: uppercase; line-height: 30px;
// font: inherit; height: 30px;
// font-size: 9px; margin-top: 15px;
// padding: 3px;
// border-radius: 2px;
// line-height: 1.2;
// color: #ffffff;
// min-width: 35px;
// text-align: center;
// background-color: #0cc485;
// top: 0;
// right: 14px;
//}
//.navigation li a:hover{
// background: none !important;
//}
//
//.navigation li.opened a:hover{
// background: none !important;
//}
//.navigation .opened > a{
// background: none !important;
//}
//
//.navigation li.level0:hover{
// content: "";
// width: 0;
// height: 2px;
// color: #000000;
// position: absolute;
// bottom: 15px;
// left: 10px;
// border-bottom: 2px solid #000000;
// transition: all 0.3s ease;
//}
//.navigation .level0:hover:after{
// content: '';
// display: block;
// position: absolute;
// top: 0;
// left: 100%;
// width: 10px;
// height: calc(100% + 3px);
// z-index: 1;
//}
}
@media(max-width: 639.98px) {
.navigation span.ui-menu-icon{
top: 50%;
right: 36px;
margin-top: -7px;
position: absolute;
text-transform: uppercase;
font: inherit;
font-size: 9px;
padding: 2px;
border-radius: 2px;
line-height: 1;
color: #fff;
} }
.navigation span.ui-menu-icon.ui-icon-1{ .minisearch .control .input-text,.minisearch .control .input-text:hover{
background-color: #0cc485 !important; border: none;
border-bottom: 1px solid #000;
border-radius: 0;
background: none;
font-weight: normal;
} }
.navigation span.ui-menu-icon:before{ .minisearch .action.search{
content: ""; margin-left: -17rem;
position: absolute;
width: 3px;
height: 3px;
border: 3px solid transparent;
left: -6px;
bottom: 3px;
} }
.navigation span.ui-menu-icon.ui-icon-1:before{ .block-search{
border-right-color: #0cc485 !important; width: 20%;
} }
.navigation li.level0 > .level-top{ .nav-sections{
display: block; width: 70%;
color: #222222; margin: 0 auto;
text-decoration: none;
text-transform: capitalize;
font-size: 16px;
font-weight: 400;
padding: 15px 0 !important;
border-bottom: 1px solid #e1e1e1;
border-color: #e5e5e5;
line-height: 24px;
} }
.mobile-header-panel{ :where(input:not([type=range])):focus, :where(input:not([type=range])):focus-visible, textarea:focus, textarea:focus-visible, select:focus, select:focus-visible{
border:none; --input-shadow-spread: 0;
} }
} //.navigation li.level0.nav-1 .ui-menu-icon{
// position: absolute;
// text-transform: uppercase;
// font: inherit;
// font-size: 9px;
// padding: 3px;
// border-radius: 2px;
// line-height: 1.2;
// color: #ffffff;
// min-width: 35px;
// text-align: center;
// background-color: #0cc485;
// top: 0;
// right: 14px;
//}
//.navigation li a:hover{
// background: none !important;
//}
//
//.navigation li.opened a:hover{
// background: none !important;
//}
//.navigation .opened > a{
// background: none !important;
//}
//
//.navigation li.level0:hover{
// content: "";
// width: 0;
// height: 2px;
// color: #000000;
// position: absolute;
// bottom: 15px;
// left: 10px;
// border-bottom: 2px solid #000000;
// transition: all 0.3s ease;
//}
//.navigation .level0:hover:after{
// content: '';
// display: block;
// position: absolute;
// top: 0;
// left: 100%;
// width: 10px;
// height: calc(100% + 3px);
// z-index: 1;
//}
}
@media(max-width: 639.98px) {
.navigation span.ui-menu-icon{
top: 50%;
right: 36px;
margin-top: -7px;
position: absolute;
text-transform: uppercase;
font: inherit;
font-size: 9px;
padding: 2px;
border-radius: 2px;
line-height: 1;
color: #fff;
}
.navigation span.ui-menu-icon.ui-icon-1{
background-color: #0cc485 !important;
}
.navigation span.ui-menu-icon:before{
content: "";
position: absolute;
width: 3px;
height: 3px;
border: 3px solid transparent;
left: -6px;
bottom: 3px;
}
.navigation span.ui-menu-icon.ui-icon-1:before{
border-right-color: #0cc485 !important;
}
.navigation li.level0 > .level-top{
display: block;
color: #222222;
text-decoration: none;
text-transform: capitalize;
font-size: 16px;
font-weight: 400;
padding: 15px 0 !important;
border-bottom: 1px solid #e1e1e1;
border-color: #e5e5e5;
line-height: 24px;
}
.mobile-header-panel{
border:none;
}
}
} }
@media(max-width:789px){ @media(max-width:789px){
.banner-4-cate{ .banner-4-cate{
padding-bottom: 20px; padding-bottom: 20px;
width: 50%; width: 50%;
} }
.view-more-flashsale { .view-more-flashsale {
padding: 0px; padding: 0px;
} }
p.flashsale-title { p.flashsale-title {
padding: 0px; padding: 0px;
} }
} }
@media (max-width: 670px) { @media (max-width: 670px) {
.categories_tab { .categories_tab {
margin-top: 200px; margin-top: 200px;
} }
} }
@media (min-width: 670px) { @media (min-width: 670px) {
.categories_tab { .categories_tab {
margin-top: 250px; margin-top: 250px;
} }
} }
@media (min-width: 780px){ @media (min-width: 780px){
.categories_tab { .categories_tab {
margin-top: 0px; margin-top: 0px;
} }
} }
app/design/frontend/Joshine/breeze/web/js/breeze/components/menu.js 0 → 100644
(function () {
'use strict';
$.widget('menu', {
component: 'menu',
options: {
menus: 'ul',
dropdown: 'ul',
useInlineDisplay: true,
responsive: true,
expanded: false,
showDelay: 42,
hideDelay: 300,
mediaBreakpoint: '(max-width: 767px)'
},
/** Init widget */
create: function () {
var mql,
self = this,
themeBreakpoint = $('body').var('--navigation-media-mobile');
if (this.options.responsive) {
mql = window.matchMedia(themeBreakpoint || this.options.mediaBreakpoint);
mql.addListener(this.toggleMode.bind(this));
this.toggleMode(mql);
} else if (this.options.mode === 'mobile') {
this.toggleMobileMode();
} else {
this.toggleDesktopMode();
}
this.focusTrap = this.createFocusTrap(this.element.closest('.navigation-wrapper,.nav-sections'));
this._setActiveMenu(); // varnish fix
if (this.element.closest('.nav-sections, .page-header, .navigation-wrapper').length) {
this.addToggleListener();
}
$('li.parent > ul', this.element).hide();
$('li.parent.nav-1', this.element)
.children('a')
.filter(function () {
return $(this).children('.ui-icon').length === 0;
})
.prepend('<span class="ui-menu-icon ui-icon-1">NEW</span>');
$('li.parent', this.element).on('keydown.menu', function (e) {
var dropdown = $(this).children(self.options.dropdown),
visibleDropdowns = $(self.options.dropdown + '.shown');
if (['Enter', 'Escape', ' '].indexOf(e.key) === -1) {
return;
}
if (e.key === 'Enter' && dropdown.hasClass('shown')) {
return;
}
e.stopPropagation();
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
visibleDropdowns.not(dropdown).each(function () {
if (!$(this).has(dropdown.get(0)).length) {
self.close($(this));
}
});
if (dropdown.hasClass('shown')) {
self.close(dropdown);
} else {
self.open(dropdown);
}
} else if (e.key === 'Escape' && visibleDropdowns.length) {
self.close(visibleDropdowns.last());
}
});
$('a', this.element).on('click.menu', '.ui-icon', function () {
var dropdown = $(this).closest('a').siblings(self.options.dropdown);
if (!dropdown.length) {
return;
}
if (dropdown.hasClass('shown')) {
self.close(dropdown);
} else {
self.open(dropdown);
}
return false;
});
},
/** Hide expanded menu's, remove event listeneres */
destroy: function () {
$.breeze.scrollbar.reset();
$(this.options.dropdown + '.shown', this.element).each(function (i, dropdown) {
this.close($(dropdown));
}.bind(this));
$('html').removeClass('nav-open').removeClass('nav-before-open');
if (this.element.closest('.nav-sections, .navigation-wrapper, .page-header').length) {
$(document).off('click.menu').off('keydown.menu');
}
this._super();
},
/** [addToggleListener description] */
addToggleListener: function () {
$('[data-action="toggle-nav"]').attr('tabindex', 0);
$(document)
.on('click.menu', '[data-action="toggle-nav"]', this.toggleNavbar.bind(this))
.on('keydown.menu', '[data-action="toggle-nav"]', function (e) {
if (e.key === 'Enter' || e.key === ' ') {
this.toggleNavbar();
} else if (e.key === 'Escape') {
this.closeNavbar();
}
}.bind(this));
this._on(document, {
keydown: function (e) {
if (e.key === 'Escape' && $('html').hasClass('nav-open')) {
this.closeNavbar();
}
}.bind(this)
});
},
/** [toggleNavbar description] */
toggleNavbar: function (flag) {
if (flag === false || $('html').hasClass('nav-open')) {
this.closeNavbar();
} else {
this.openNavbar();
}
},
/** Show mobile navbar */
openNavbar: function () {
var self = this,
html = $('html');
$.breeze.scrollbar.hide();
self._trigger('navBeforeOpen');
html.addClass('nav-before-open');
setTimeout(function () {
html.addClass('nav-open');
self._trigger('navAfterOpen');
}, self.options.showDelay);
setTimeout(self.focusTrap.activate, 300); // wait till css animation is over
},
/** Hide mobile navbar */
closeNavbar: function () {
var self = this,
html = $('html');
self._trigger('navBeforeClose');
self.focusTrap.deactivate();
html.removeClass('nav-open');
setTimeout(function () {
$.breeze.scrollbar.reset();
html.removeClass('nav-before-open');
self._trigger('navAfterClose');
}, self.options.hideDelay);
},
/** Toggles between mobile and desktop modes */
toggleMode: function (event) {
if (event.matches) {
this.toggleMobileMode();
} else {
this.toggleDesktopMode();
}
},
/** Enable desktop mode */
toggleDesktopMode: function () {
var self = this;
$(self.options.dropdown + '.shown').each(function () {
self.close($(this));
});
$('li.parent', this.element)
.off('click.menu')
.on('mouseenter.menu', function () {
var dropdown = $(this).children(self.options.dropdown);
if (this.breezeTimeout) {
clearTimeout(this.breezeTimeout);
delete this.breezeTimeout;
}
self.open(dropdown);
})
.on('mouseleave.menu', function () {
this.breezeTimeout = setTimeout(function () {
self.close($(this).children(self.options.dropdown));
}.bind(this), 80);
});
this._trigger('afterToggleDesktopMode');
},
/** Enable mobile mode */
toggleMobileMode: function () {
var self = this;
$('li.parent', this.element)
.off('mouseenter.menu mouseleave.menu')
.on('click.menu', function () {
var dropdown = $(this).children(self.options.dropdown);
if (!dropdown.length || dropdown.hasClass('shown')) {
return;
}
self.open(dropdown);
return false;
});
this._trigger('afterToggleMobileMode');
},
/** [open description] */
open: function (dropdown) {
this._trigger('beforeOpen', {
dropdown: dropdown
});
dropdown.addClass('shown')
.parent('li')
.addClass('opened');
if (this.options.useInlineDisplay) {
dropdown.show();
}
},
/** [open description] */
close: function (dropdown) {
var eventData = {
dropdown: dropdown,
preventDefault: false
};
this._trigger('beforeClose', eventData);
if (eventData.preventDefault === true) {
return;
}
dropdown.removeClass('shown')
.parent('li')
.removeClass('opened');
if (this.options.useInlineDisplay) {
dropdown.hide();
}
this._trigger('afterClose', {
dropdown: dropdown
});
},
/** [_setActiveMenu description] */
_setActiveMenu: function () {
var currentUrl = window.location.href.split('?')[0];
if (!this._setActiveMenuForCategory(currentUrl)) {
this._setActiveMenuForProduct(currentUrl);
}
},
/** [_setActiveMenuForCategory description] */
_setActiveMenuForCategory: function (url) {
var activeCategoryLink = this.element.find('a[href="' + url + '"]'),
classes,
classNav;
if (!activeCategoryLink || !activeCategoryLink.parent().hasClass('category-item')) {
return false;
} else if (!activeCategoryLink.parent().hasClass('active')) {
activeCategoryLink.parent().addClass('active');
classes = activeCategoryLink.parent().attr('class');
classNav = classes.match(/(nav\-)[0-9]+(\-[0-9]+)+/gi);
if (classNav) {
this._setActiveParent(classNav[0]);
}
}
return true;
},
/** [_setActiveParent description] */
_setActiveParent: function (childClassName) {
var parentElement,
parentClass = childClassName.substr(0, childClassName.lastIndexOf('-'));
if (parentClass.lastIndexOf('-') !== -1) {
parentElement = this.element.find('.' + parentClass);
if (parentElement) {
parentElement.addClass('has-active');
}
this._setActiveParent(parentClass);
}
},
/** [_setActiveMenuForProduct description] */
_setActiveMenuForProduct: function (currentUrl) {
var categoryUrlExtension,
lastUrlSection,
possibleCategoryUrl,
//retrieve first category URL to know what extension is used for category URLs
firstCategoryUrl = this.element.children('li').find('a').attr('href');
if (firstCategoryUrl) {
lastUrlSection = firstCategoryUrl.substr(firstCategoryUrl.lastIndexOf('/'));
categoryUrlExtension = lastUrlSection.lastIndexOf('.') !== -1 ?
lastUrlSection.substr(lastUrlSection.lastIndexOf('.')) : '';
possibleCategoryUrl = currentUrl.substr(0, currentUrl.lastIndexOf('/')) + categoryUrlExtension;
this._setActiveMenuForCategory(possibleCategoryUrl);
}
}
});
})();
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment