当屏幕移动时使用此方法创建导航 nenu 但问题是它使用脚本
没有脚本怎么办
我看到很多模板只使用 html，但我尝试使用这种方法
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
但这行不通
如何在不使用任何脚本的情况下做到这一点
<!DOCTYPE HTML>
<html lang="en">
<head>
<title></title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<meta name="keywords" content="Graphic Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script src="js/jquery.min.js"></script>
</head>
<body>
<!-- header -->
<div class="banner">
<div class="container">
<div class="header">
<div class="logo">
<a href="index.html"><img src="images/logo.png" class="img-responsive" alt="" /></a>
</div>
<div class="header-right">
<ul>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li>
<div class="search2">
<form>
<input type="text" placeholder="Search.." >
<input type="submit" value="" style="font-family:Flaticon"> </form>
</div></li>
<div class="clearfix"></div>
</ul>
</div>
<div class="clearfix"> </div>
</div>
<div class="head-nav">
<span class="menu"></span>
<ul class="cl-effect-15">
<li><a href="index.php" data-hover="HOME">HOME</a></li>
<li><a href="about.php">ABOUT</a></li>
<li><a href="404.html" data-hover="ARCHIVES">ARCHIVES</a></li>
<li><a href="contact.php" data-hover="CONTACT">CONTACT</a></li>
<li><a href="terms and condition.php" data-hover="TERMS AND CONDITION">TERMS AND CONDITION</a></li>
<li><a href="privacy policy.php" data-hover="PRIVACY POLICY">PRIVACY POLICY</a></li>
<li><a href="login.php" data-hover="Login">Login</a></li>
<div class="clearfix"> </div>
</ul>
</div>
</div>
</div>
<script>
$("span.menu").click(function () {
$(".head-nav ul").slideToggle(300, function () {
// Animation complete.
});
});
</script>
<!-- header -->
最佳答案
要在您的页面上执行任何操作，您可能至少需要 javascript(但可能不需要带滑动切换的完整 jquery)。 在普通的 javascript 中，一些例子:
https://www.developphp.com/video/JavaScript/Toggle-Function-Click-Drop-Down-Menus-Tutorial
或者自己设计样式和编码: $menulink.click(函数() { $menulink.toggleClass('active'); $menu.toggleClass('active'); 返回假； });});
我能想到的唯一替代方案是使用框架和硬编码扩展/编码菜单作为链接。
关于没有脚本的 jQuery 导航菜单切换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29841538/