javascript - Jquery 和菜单和徽标

问题描述

全部，

模板附带的说明告诉我激活脚本

$(function() {
$('#menu').cookcodesmenu();
});

稍后，有自定义选项可以链接到我的徽标：

$('#menu').cookcodesmenu({
display: 1920, // From where mobile menu apears and desktop  menu gone
brand: 'LOGO', // Supports HTML
label: 'MENU', // <a href='https://www.jqueryscript.net/menu/'>Menu</a> Label: // Supports HTML
});

我不知道如何遵循这些说明。我尝试过类似的事情

script>
$(function() {
    $('#menu').cookcodesmenu({
        logo: '<a href="/images/BodyLogo.jpg"</a>'
    });
});
</script>

没有运气。

坦率地说，我更喜欢简单地激活菜单，同时通过 html 在我的网站徽标中省略徽标和编码。但是，如果这不是一个选项，我不仅想知道如何从这个菜单代码中调用它，而且还想知道如何在脚本中指示徽标的大小。（就像在 html 中一样，width="25%," 等）

在此先感谢您的任何建议。

后来补充：

根据您的要求，这是 html，但我认为这不是问题所在，稍后我会解释。

<!DOCTYPE html>
<html lang="en" >
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<meta charset="UTF-8">
  <title>(website)/title>
<!--Menu-->
<link rel="stylesheet" href="Styles.css">
<link href="Menu/CSS/MenuStyles.css" media="screen" rel="stylesheet"   
 type="text/css" />
<link rel="stylesheet" href="Menu/CSS/Menu.css">
<script src="Menu/JS/modernizr.min.js"></script>
<script src="Menu/JS/jquery-1.12.4.min.js"></script>
<script src="Menu/JS/jquery.cookcodesmenu.js"></script>
 <!--Menu-->
<!--Floatbox-->
<link type="text/css" rel="stylesheet" href="floatbox/floatbox.css" />
<script type="text/javascript" src="floatbox/floatbox.js"></script>
<!--Floatbox-->
<div id="logo"><img src="images/BodyLogo.jpg" width="25%" height="auto"   
alt="Logo"></div>
</head>
<body>
<script>
$(function() {
    $('#menu').cookcodesmenu({
        //brand: 'jQueryScript'//
    });
});
</script>
<ul id="menu">
    <li>Parent 1
        <ul>
            <li>
                <a href="#">item 3</a>
            </li>
            <li>
                <a href="#">Parent 3</a>
                <ul>
                    <li>
                        <a href="#">item 8</a>
                    </li>
                    <li>
                        <a href="#">item 9</a>
                    </li>
                    <li>
                        <a href="#">item 10</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">item 4</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">item 1</a>
    </li>
    <li>Parent 2
        <ul>
            <li>
                <a href="#">item 5</a>
            </li>
            <li>
                <a href="#">item 6</a>
            </li>
            <li>
                <a href="#">item 7</a>
            </li>
        </ul>
    </li>
</ul>
</body>

也许我错了，但我认为这不是问题的根源。我认为问题出在我发现的一段关联的 jquery 上：

(function ($, document, window) {
var
    // default settings object.
    defaults = {
        display: 1920, // From where mobile menu apears and desktop  menu gone
        //brand: '<a href="#"</a>', // Supports HTML//
        label: 'MENU', // Menu Label: // Supports HTML
        duplicate: true,
        duration: 200,
        easingOpen: 'swing',
        //fontFamily: 'Open Sans',//
        easingClose: 'swing',
        closedSymbol: "&#10133;", //Supports HTML
        openedSymbol: "&#10134;", //Supports HTML
        prependTo: 'body',
        appendTo: '',
        parentTag: 'a',
        closeOnClick: true,
        allowParentLinks: true,
        nestedParentLinks: true,
        showChildren: false,
        removeIds: true,
        removeClasses: false,
        removeStyles: false,
        animations: 'jquery',
        init: function () {},
        beforeOpen: function () {},
        beforeClose: function () {},
        afterOpen: function () {},
        afterClose: function () {}
    },

最初，我会在品牌定位中放置一个空白的 .html，但它仍然占用 html 中的空间，将我的徽标推错了位置。如您所见，我试图关闭“品牌”。现在，品牌标签应该去的地方，它说“未定义”，我自己的标志仍然被推到下面。几乎没有我想要的。让我感到困惑的是，编写菜单模板的人会自行决定站点徽标的位置，但这似乎是他所做的。有什么办法可以处理这个东西，还是我应该尝试其他菜单？

标签： javascriptjquery

javascript - Jquery 和菜单和徽标

问题描述

解决方案

推荐阅读