Question

使用此方法在屏幕移动时创建nav 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="&#xe006;" 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 -->

Answer 1

要在您的页面上执行任何操作，您可能至少需要javascript（但可能不是完整的jquery with slide toggle）。在普通的javascript中，有一些例子：

https://www.developphp.com/video/JavaScript/Toggle-Function-Click-Drop-Down-Menus-Tutorial

或者自己设计和编码： $ menulink.click（function（）{ $ menulink.toggleClass（ '激活'）; $ menu.toggleClass（ '激活'）; 返回false; }）;}）;

只有我能想到的替代方案是使用框架和硬编码扩展/编码菜单作为链接。

Answer 2

您只能使用CSS创建自适应移动视图菜单。它通过使用媒体查询@media screen and (max-width: 600px)确定移动屏幕大小并为其创建特定CSS来工作。这是tutorial和demo（尝试重新调整浏览器大小以查看移动菜单效果）。

jQuery导航菜单切换没有脚本

2 个答案: