VUE实现响应式导航菜单
逆流的鱼
146
本功能使用TailWindCss，vue3
当页面宽度大于768时使用PC端样式，反之使用移动端样式
这里主要用md:PC端样式，max-md:移动端样式，通过vue变量showMenu实现移动端菜单是否打开
HTML代码
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/dist/output.css" rel="stylesheet">
<title>Index</title>
<meta name="description" content="">
</head>
<body>
<div id="app" class="invisible h-full">
<div class="flex justify-between relative">
<div class="md:hidden">
<div @click.stop="showMenu=!showMenu">nav</div>
</div>
<div>LOGO</div>
<div>
<div class="md:hidden">1</div>
<div class="max-md:hidden">2</div>
</div>
</div>
<div class="flex md:space-x-2 max-md:space-x-0 max-md:flex-col max-md:absolute max-md:top-8 max-md:bg-white" :class="{'max-md:hidden':!showMenu}" @click.stop>
<div>导航一</div>
<div>导航二</div>
<div>导航三</div>
<div>导航四</div>
<div>导航五</div>
</div>
<div class="bg-blue-3 w-full h-full"> sdfsf</div>
</div>
</body>
<script src="./../js/import.js?load=index" id="animatic" type="module"></script>
</html>
效果展示
页面宽度大于768时
页面宽度小于768时
页面宽度小于768时且打开菜单
标签：
vue
前端
©2023 东海县一品网络技术有限公司 版权所有
