XiaoLFeng/XF_Index
2
0
Fork 1
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

适配手机端菜单

Browse Source
This commit is contained in:
筱锋xiao_lfeng 2023-06-13 22:25:43 +08:00
parent e67ebcca6c
commit 9b2337d76b
1 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
resources/views/modules/navbar.blade.php
View File

@ -8,7 +8,7 @@
</a>
</div>
<div class="flex lg:hidden">
<button type="button"
<button type="button" onclick="openMenuIn()"
class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700">
<span class="sr-only">Open main menu</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
@ -76,16 +76,15 @@ class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray
<!-- Mobile menu, show/hide based on menu open state. -->
<div class="lg:hidden" role="dialog" aria-modal="true">
<!-- Background backdrop, show/hide based on slide-over state. -->
<div class="fixed inset-0 z-50"></div>
<div
class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
<div id="phoneMenu" aria-labelledby="phoneMenuButton"
class="fixed hidden inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
<div class="flex items-center justify-between">
<a href="#" class="-m-1.5 p-1.5">
<span class="sr-only">Your Company</span>
<img class="h-8 w-auto" src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
alt="">
</a>
<button type="button" class="-m-2.5 rounded-md p-2.5 text-gray-700">
<button type="button" class="-m-2.5 rounded-md p-2.5 text-gray-700" onclick="openMenuOut()">
<span class="sr-only">Close menu</span>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
aria-hidden="true">
@ -115,3 +114,11 @@ class="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text
</div>
</div>
</header>
<script type="text/javascript">
function openMenuIn() {
$('#phoneMenu').fadeIn('fast');
}
function openMenuOut() {
$('#phoneMenu').fadeOut('fast');
}
</script>