Damillora/Yuika
1
0
Fork 0
mirror of https://github.com/Damillora/Yuika synced 2024-11-22 09:17:33 +00:00
Code Issues Releases Wiki Activity

Clickable responsive navbar

Browse Source
This commit is contained in:
Damillora 2019-11-14 15:25:28 +07:00
parent 7615708eec
commit 220f054a95
3 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
assets/css/styles.css
View File

@ -136,7 +136,8 @@ footer {
/* 4. Navbar */ /* 4. Navbar */
.nav { .nav {
@apply hidden flex-col w-full pl-0 my-0 absolute bg-yuika-blue-700; @apply hidden flex-col w-full pl-0 my-0 absolute bg-yuika-blue-700 left-0 right-0;
top: 100%;
} }
.nav li { .nav li {
@apply flex flex-row justify-start items-center my-0 py-2 text-white text-sm px-2 h-12 px-4; @apply flex flex-row justify-start items-center my-0 py-2 text-white text-sm px-2 h-12 px-4;
@ -145,10 +146,6 @@ footer {
@apply align-middle w-full table-cell; @apply align-middle w-full table-cell;
line-height: 2rem; line-height: 2rem;
} }
#menushow:hover .nav {
@apply block w-screen;
right: -1rem;
}
@screen md { @screen md {
.nav { .nav {
@ -157,10 +154,6 @@ footer {
.nav li { .nav li {
@apply object-contain justify-center items-center border-b-0 border-t-0 my-0 inline-block h-full; @apply object-contain justify-center items-center border-b-0 border-t-0 my-0 inline-block h-full;
} }
#menushow:hover .nav {
@apply pt-0 right-0;
width: initial;
}
} }
.nav-fixed { .nav-fixed {

17
assets/js/nav-menu.js Normal file
View File

@ -0,0 +1,17 @@
$("#menushow").click(function() {
if($('.nav').css('display') == 'none') {
$(".nav").show();
} else {
$(".nav").hide();
}
});
$(window).resize(function() {
var wi = $(window).width();
if(wi >= 768) {
$(".nav").show();
} else {
$(".nav").hide();
}
});

4
partials/site-header.hbs
View File

@ -1,5 +1,5 @@
<div class="w-full flex flex-row justify-begin items-center fixed index-navbar"> <div class="w-full flex flex-row justify-begin items-center fixed index-navbar">
<header class="flex flex-row py-2 flex-wrap w-full"> <header class="flex flex-row py-2 w-full relative">
{{#if @site.logo}} {{#if @site.logo}}
<div class="w-12 h-12"> <div class="w-12 h-12">
<img src="{{img_url @site.logo size="l"}}" alt="{{@site.title}}" class="w-full h-full object-contain"> <img src="{{img_url @site.logo size="l"}}" alt="{{@site.title}}" class="w-full h-full object-contain">
@ -17,7 +17,7 @@
</div> </div>
<div id="menushow" class="cursor-pointer relative"> <div id="menushow" class="cursor-pointer relative">
<img src="{{asset "images/menu.svg"}}" class="h-12 w-12 px-3 py-3 text-white md:hidden" style="filter: invert(1);" alt="menu"/> <img src="{{asset "images/menu.svg"}}" class="h-12 w-12 px-3 py-3 text-white md:hidden" style="filter: invert(1);" alt="menu"/>
{{navigation}}
</div> </div>
{{navigation}}
</header> </header>
</div> </div>