Question

我正在尝试制作一个菜单，如下图

所示

看到这个Link去他的网站我已经从那里复制了一些代码（HTML代码和链接到css和.js文件）。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <link href="scripts/gooey.min.css" rel="stylesheet" />
    <script src="jquery-2.2.3.js"></script>

    <script src="scripts/gooey.min.js"></script>

    <script src="scripts/jquery-2.1.1.min.js"></script>
</head>

<body>


    <nav id="gooey-upper">
        <input type="checkbox" class="menu-open" name="menu-open1" id="menu-open1" />

        <label class="open-button" for="menu-open1">
            <span class="burger burger-1"></span>
            <span class="burger burger-2"></span>
            <span class="burger burger-3"></span>
        </label>


        <a href="#features" class="gooey-menu-item">
            <i title="Features" class="fa fa-cog fa-2x"></i> Item 1
        </a>
        <a href="#h-spaced-menu" class="gooey-menu-item">
            <i title="Horizontal Menu" class="fa fa-arrows-h fa-2x"></i>Item 2
        </a>
        <a href="#menu-v-example" class="gooey-menu-item">
            <i title="Vertical Menu" class="fa fa-arrows-v fa-2x"></i>Item 3
        </a>
        <a href="#docs" class="gooey-menu-item">
            <i title="Docs" class="fa fa-book fa-2x"></i>Item 4
        </a>
        <a href="#event-api" class="gooey-menu-item">
            <i title="Event API" class="fa fa-code fa-2x"></i>Item 5
        </a>
        <a href="#round" class="gooey-menu-item">
            <i title="Round Menu" class="fa fa-circle fa-2x"></i>Item 6
        </a>
    </nav>

    <script type="text/javascript">
        $(function () {
            $("#gooey-round").gooeymenu({
                bgColor: "#ffc0cb",
                contentColor: "white",
                style: "circle",
                circle: {
                    radius: 85
                },
                size: 80
            });
        });
    </script>

</body>
</html>

我已下载了所有必需的文件，甚至将所需的.css和.js文件链接到我的代码，但我不知道为什么它会给我错误＃34;它不包含属性googymenu＆＃34;

任何人都可以帮我实现此菜单项。

非常感谢你。

编辑：我需要从所有font-awesome文件中添加哪个文件？

Answer 1

工作正常，请参阅样本。

修改

添加了Font-Awesome和一些CSS来移动菜单。

#gooey-upper{ left : 200px; top : 50px; }

<强>示例

＆＃13;
＆＃13;
$("#gooey-upper").gooeymenu({ bgColor: "#ff6666", contentColor: "white", style: "circle", horizontal: { menuItemPosition: "glue" }, vertical: { menuItemPosition: "spaced", direction: "up" }, circle: { radius: 80 }, margin: "small", size: 90, bounce: true, bounceLength: "small", transitionStep: 100, hover: "#e55b5b" });
＆＃13;
#gooey-upper{ left : 200px; top : 50px; }
＆＃13;
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">  <link rel="stylesheet" type="text/css" href="http://www.htmldrive.net/edit_media/2016/201604/20160421/jQuery-menu/css/gooey.min.css">  <script type="text/javascript" src="http://www.htmldrive.net/edit_media/2016/201604/20160421/jQuery-menu/js/gooey.min.js"></script> <nav id="gooey-upper"> <input type="checkbox" class="menu-open" name="menu-open1" id="menu-open1" /> <label class="open-button" for="menu-open1"> <span class="burger burger-1"></span> <span class="burger burger-2"></span> <span class="burger burger-3"></span> </label> <a href="#features" class="gooey-menu-item"> <i title="Features" class="fa fa-cog fa-2x"></i> </a> <a href="#h-spaced-menu" class="gooey-menu-item"> <i title="Horizontal Menu" class="fa fa-arrows-h fa-2x"></i> </a> <a href="#menu-v-example" class="gooey-menu-item"> <i title="Vertical Menu" class="fa fa-arrows-v fa-2x"></i> </a> <a href="#docs" class="gooey-menu-item"> <i title="Docs" class="fa fa-book fa-2x"></i> </a> <a href="#event-api" class="gooey-menu-item"> <i title="Event API" class="fa fa-code fa-2x"></i> </a> <a href="#round" class="gooey-menu-item"> <i title="Round Menu" class="fa fa-circle fa-2x"></i> </a> </nav>
＆＃13;
＆＃13;
＆＃13;

需要帮助才能在网站上显示菜单（JQuery）

1 个答案: