Skip to content

J
joshine
Commit 68ddbaaa by 王东红
Options

导航条优化

parent f04e4d0e
Showing with 141 additions and 113 deletions
app/code/Magento/Search/view/frontend/templates/form.mini.phtml
......@@ -16,14 +16,14 @@ $allowedSuggestion = $configProvider->isSuggestionsAllowed();
$quickSearchUrl = $allowedSuggestion ? $escaper->escapeUrl($helper->getSuggestUrl()) : '';
?>
<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">
<form class="form minisearch" id="search_mini_form"
action="<?= $escaper->escapeUrl($helper->getResultUrl()) ?>" method="get">
<div class="field search">
<label class="label" for="search" data-role="minisearch-label">
<span><?= $escaper->escapeHtml(__('Search')) ?></span>
</label>
<!-- <label class="label" for="search" data-role="minisearch-label">-->
<!-- <span>--><?//= $escaper->escapeHtml(__('Search')) ?><!--</span>-->
<!-- </label>-->
<div class="control">
<input id="search"
data-mage-init='{
......
app/design/frontend/Joshine/breeze/Magento_Theme/layout/default.xml
......@@ -3,7 +3,7 @@
xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<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="-"/>
<referenceBlock name="cookie-status-check" remove="true"/>
<referenceBlock name="report.bugs" remove="true"/>
......
app/design/frontend/Joshine/breeze/web/css/_custom.less
......@@ -931,6 +931,8 @@ footer{
background: #f2f2f2;
border-top: 1px solid #e1e1e1;
font-family: 'Outfit-Regular', sans-serif;
display: flex;
.nav-sections{
background: transparent;
}
......@@ -1062,130 +1064,156 @@ footer{
height: 3px;
border: 3px solid transparent;
}
//.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;
.minisearch .control#search{
line-height: 30px;
height: 30px;
margin-top: 15px;
}
.navigation span.ui-menu-icon.ui-icon-1:before{
border-right-color: #0cc485 !important;
.minisearch .control .input-text,.minisearch .control .input-text:hover{
border: none;
border-bottom: 1px solid #000;
border-radius: 0;
background: none;
font-weight: normal;
}
.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;
.minisearch .action.search{
margin-left: -17rem;
}
.mobile-header-panel{
border:none;
.block-search{
width: 20%;
}
.nav-sections{
width: 70%;
margin: 0 auto;
}
:where(input:not([type=range])):focus, :where(input:not([type=range])):focus-visible, textarea:focus, textarea:focus-visible, select:focus, select:focus-visible{
--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){
.banner-4-cate{
padding-bottom: 20px;
width: 50%;
}
.banner-4-cate{
padding-bottom: 20px;
width: 50%;
}
.view-more-flashsale {
padding: 0px;
}
.view-more-flashsale {
padding: 0px;
}
p.flashsale-title {
padding: 0px;
}
p.flashsale-title {
padding: 0px;
}
}
@media (max-width: 670px) {
.categories_tab {
margin-top: 200px;
}
.categories_tab {
margin-top: 200px;
}
}
@media (min-width: 670px) {
.categories_tab {
margin-top: 250px;
}
.categories_tab {
margin-top: 250px;
}
}
@media (min-width: 780px){
.categories_tab {
margin-top: 0px;
}
.categories_tab {
margin-top: 0px;
}
}
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