Question

全部

设置网站菜单

模板随附的说明告诉我使用来激活脚本

$(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中占用空间，从而使徽标不正确。如您所见，我试图关闭“品牌”。现在，品牌标签应该去的地方，上面写着“ undefined”，而我自己的徽标仍然被压在下面。几乎不是我想要的。让我感到困惑的是，编写菜单模板的人会自己承担指示站点徽标必须去的位置，但这似乎是他所做的。有什么方法可以使用此功能，还是我应该尝试其他菜单？

Answer 1

我认为您使用了错误的密钥，根据文档，您必须使用brand而不是logo来定义徽标：

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

Answer 2

似乎您的锚标签没有显示为徽标，因为没有任何内容在侧面锚标签中。请尝试以下代码在锚标签。

<a href="https://google.com"><img src="yourpath/image.png"></a>

请使用类似的内容并尝试。

 $(function() {
        $('#menu').cookcodesmenu({
            brand: '<a href="https://google.com"><img src="yourpath/image.png"></a>'
        });
    });

jQuery，菜单和徽标

2 个答案: