first commit
kun.peng
parent
f9469ddd0c
commit
a9b4517f9e
Binary file not shown.
|
|
@ -1,7 +1,7 @@
|
|||
<#macro navbar layout>
|
||||
<nav class="navbar navbar-main">
|
||||
<div class="container">
|
||||
<div class="navbar-brand is-flex-center">
|
||||
<nav class="navbar navbar-main has-background-white is-fixed-top is-paddingless " style="box-shadow: none !important;">
|
||||
<div class="container ">
|
||||
<div class="navbar-brand transparent">
|
||||
<a class="navbar-item navbar-logo" href="${context!}">
|
||||
<#if options.blog_logo?? && options.blog_logo!=''>
|
||||
<img src="${options.blog_logo!}" alt="${options.blog_title!}" height="28">
|
||||
|
|
@ -9,44 +9,55 @@
|
|||
${options.blog_title!}
|
||||
</#if>
|
||||
</a>
|
||||
<span class="navbar-burger burger" data-target="navMenu">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="navbar-menu">
|
||||
<@menuTag method="tree">
|
||||
<#if menus?? && menus?size gt 0>
|
||||
<#if settings.tree_menu_enable!false>
|
||||
<div class="navbar-start">
|
||||
<#list menus?sort_by('priority') as menu>
|
||||
<#if menu.children?? && menu.children?size gt 0>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="sub-menu">
|
||||
${menu.name!}
|
||||
</a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<#list menu.children as child>
|
||||
<a class="navbar-item"
|
||||
href="${child.url!}">
|
||||
${child.name!}
|
||||
</a>
|
||||
</#list>
|
||||
<div id="navMenu" class="navbar-menu transparent">
|
||||
<div class="navbar-start transparent">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<#else>
|
||||
<a class="navbar-item" href="${menu.url}"
|
||||
target="${menu.target!}">${menu.name}</a>
|
||||
</#if>
|
||||
</#list>
|
||||
</div>
|
||||
<#else>
|
||||
<#if menus?? && menus?size gt 0>
|
||||
<@menuTag method="tree">
|
||||
<#if menus?? && menus?size gt 0>
|
||||
<#if settings.tree_menu_enable!false>
|
||||
<div class="navbar-start">
|
||||
<#list menus?sort_by('priority') as menu>
|
||||
<a class="navbar-item" href="${menu.url}" target="${menu.target!}">${menu.name}</a>
|
||||
<#if menu.children?? && menu.children?size gt 0>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="sub-menu">
|
||||
${menu.name!}
|
||||
</a>
|
||||
<div class="navbar-dropdown is-boxed">
|
||||
<#list menu.children as child>
|
||||
<a class="navbar-item"
|
||||
href="${child.url!}">
|
||||
${child.name!}
|
||||
</a>
|
||||
</#list>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<#else>
|
||||
<a class="navbar-item" href="${menu.url}"
|
||||
target="${menu.target!}">${menu.name}</a>
|
||||
</#if>
|
||||
</#list>
|
||||
|
||||
</div>
|
||||
</#if> </#if>
|
||||
</#if>
|
||||
</@menuTag>
|
||||
<#else>
|
||||
<#if menus?? && menus?size gt 0>
|
||||
<div class="navbar-start">
|
||||
<#list menus?sort_by('priority') as menu>
|
||||
<a class="navbar-item" href="${menu.url}"
|
||||
target="${menu.target!}">${menu.name}</a>
|
||||
</#list>
|
||||
</div>
|
||||
</#if> </#if>
|
||||
</#if>
|
||||
</@menuTag>
|
||||
|
||||
</div>
|
||||
<div class="navbar-end">
|
||||
<#-- ${settings.links_top!}-->
|
||||
<a class="navbar-item search" title="夜间模式" href="javascript:alert('开发中，敬请期待');">
|
||||
|
|
@ -57,21 +68,17 @@
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<style>
|
||||
.navbar-dropdown {
|
||||
/*background-color: #fff;*/
|
||||
/*border-bottom-left-radius: 6px;*/
|
||||
/*border-bottom-right-radius: 6px;*/
|
||||
/*border-top: 2px solid #dbdbdb;*/
|
||||
/*box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);*/
|
||||
/*font-size: .875rem;*/
|
||||
/*min-width: 100%;*/
|
||||
/*position: absolute;*/
|
||||
/*top: 100%;*/
|
||||
/*z-index: 20;*/
|
||||
/*width: 120px;*/
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function () {
|
||||
var burger = document.querySelector('.burger');
|
||||
var menu = document.querySelector('#' + burger.dataset.target);
|
||||
burger.addEventListener('click', function () {
|
||||
burger.classList.toggle('is-active');
|
||||
menu.classList.toggle('is-active');
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
</#macro>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ body {
|
|||
background-color: #f7f7f7;
|
||||
}
|
||||
.section {
|
||||
padding: 2rem 1.5rem;
|
||||
padding: 6rem 1.5rem;
|
||||
}
|
||||
body,
|
||||
button,
|
||||
|
|
@ -36,7 +36,7 @@ textarea {
|
|||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.section {
|
||||
padding: 1.5rem 1rem;
|
||||
padding: 5.5rem 1rem;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 769px) {
|
||||
|
|
@ -100,30 +100,7 @@ img.thumbnail {
|
|||
.navbar-main {
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.05);
|
||||
}
|
||||
.navbar-main .navbar-menu,
|
||||
.navbar-main .navbar-start,
|
||||
.navbar-main .navbar-end {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.navbar-main .navbar-menu {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.navbar-main .navbar-start {
|
||||
justify-content: flex-start;
|
||||
margin-right: auto;
|
||||
font-size: 15px;
|
||||
}
|
||||
.navbar-main .navbar-end {
|
||||
justify-content: flex-end;
|
||||
margin-left: auto;
|
||||
}
|
||||
.navbar-main .navbar-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1.25rem 0.75rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
|
@ -138,24 +115,13 @@ img.thumbnail {
|
|||
}
|
||||
.navbar-main .navbar-item .sub-menu {
|
||||
color: #4a4a4a;
|
||||
padding-top: 3px;
|
||||
}
|
||||
.navbar-main .navbar-item .sub-menu:after {
|
||||
content: '\2022';
|
||||
position: absolute;
|
||||
color: #3273dc;
|
||||
}
|
||||
@media screen and (max-width: 1087px) {
|
||||
.navbar-main .navbar-menu {
|
||||
justify-content: center;
|
||||
box-shadow: none;
|
||||
}
|
||||
.navbar-main .navbar-start {
|
||||
margin-right: 0;
|
||||
}
|
||||
.navbar-main .navbar-end {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
background: #fff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ body
|
|||
background-color: #f7f7f7
|
||||
|
||||
.section
|
||||
padding: 2rem 1.5rem
|
||||
padding: 6rem 1.5rem
|
||||
|
||||
body, button, input, select, textarea
|
||||
font-family: family-sans
|
||||
|
|
@ -36,7 +36,7 @@ body, button, input, select, textarea
|
|||
|
||||
@media screen and (max-width: screen-tablet - 1)
|
||||
.section
|
||||
padding: 1.5rem 1rem
|
||||
padding: 5.5rem 1rem
|
||||
|
||||
@media screen and (min-width: screen-tablet)
|
||||
.column-main,
|
||||
|
|
@ -104,57 +104,25 @@ img.thumbnail
|
|||
|
||||
.navbar-main
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05)
|
||||
.navbar-menu,
|
||||
.navbar-start,
|
||||
.navbar-end
|
||||
align-items: stretch
|
||||
display: flex
|
||||
padding: 0
|
||||
flex-shrink: 0
|
||||
.navbar-menu
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
.navbar-start
|
||||
justify-content: flex-start
|
||||
margin-right: auto
|
||||
font-size:15px
|
||||
.navbar-end
|
||||
justify-content: flex-end
|
||||
margin-left: auto
|
||||
.navbar-item
|
||||
display: flex
|
||||
align-items: center
|
||||
padding: 1.25rem 0.75rem
|
||||
padding-right: 1.5rem
|
||||
&.is-active
|
||||
color: hsl(217, 71%, 53%)
|
||||
background-color: transparent
|
||||
//&.is-active:after
|
||||
// content: '*';
|
||||
// position: absolute;
|
||||
// top: 40px;
|
||||
// left: 20px;
|
||||
.navbar-dropdown
|
||||
border-radius: 2px
|
||||
box-shadow 0 8px 8px rgba(10,10,10,.1)
|
||||
font-weight: 500
|
||||
.sub-menu {
|
||||
color: #4a4a4a
|
||||
padding-top: 3px;
|
||||
}
|
||||
.sub-menu:after
|
||||
content '\2022'
|
||||
position absolute
|
||||
color: #3273dc
|
||||
|
||||
@media screen and (max-width: screen-desktop - 1)
|
||||
.navbar-menu
|
||||
justify-content: center
|
||||
box-shadow: none
|
||||
.navbar-start
|
||||
margin-right: 0
|
||||
.navbar-end
|
||||
margin-left: 0
|
||||
|
||||
.footer
|
||||
background: white
|
||||
.field
|
||||
|
|
|
|||
Loading…
Reference in New Issue