gpt4 book ai didi

javascript - Foundation 移动菜单不会出现在小屏幕上

转载 作者:行者123 更新时间:2023-11-28 07:18:21 25 4
gpt4 key购买 nike

我的脑袋快要爆炸了。我无法让移动“汉堡包”菜单出现在小屏幕上。 “菜单”一词可见,但图标不切换。

这可能是一件非常明显的事情,但我已经看这个太久了,看不到金库。有谁能帮忙吗?

我是否调用了正确的 JS?

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Website Title</title>
<!--Favicon-->
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
<!--Fonts-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:600, 400,300' rel='stylesheet' type='text/css'>
<!--CSS-->
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/style.css" />
<!--FOUNDATION JS-->
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.topbar.js"></script>

这是我的导航部分

<div class="topbar">
<div class="row">
<div class="large-4 columns">
<a href="#home"><h1 class="logo">Website Name</h1></a>
</div>
<div class="large-8 text-right columns">
<div class="navbar">
<div class="large-12 columns">
<nav class="top-bar" data-topbar role="navigation">
<ul class="right button-group title-area">
<li><a href="#home" class="button nav">Home</a></li>
<li><a href="#about" class="button nav">About</a></li>
<li><a href="#office" class="button nav">Examples</a></li>
<li><a href="#contact" class="button nav navlast">Contact</a></li>
<li class="toggle-topbar menu-icon"><a href="#"><span>MENU</span></a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>

最佳答案

你错过了一些基础 js 包含和函数,像这样尝试:

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Website Title</title>
<!--Favicon-->
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
<!--Fonts-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:600, 400,300' rel='stylesheet' type='text/css'>
<!--CSS-->
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/style.css" />
<!--FOUNDATION JS-->
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>

关于javascript - Foundation 移动菜单不会出现在小屏幕上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32236589/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com