看到这个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文件中添加哪个文件?
答案 0 :(得分:1)
工作正常,请参阅样本。
修改强>
添加了Font-Awesome和一些CSS来移动菜单。
#gooey-upper{
left : 200px;
top : 50px;
}
<强>示例强>
$("#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;
<!--Jquery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--font awesome-->
<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">
<!--plugin style-->
<link rel="stylesheet" type="text/css" href="http://www.htmldrive.net/edit_media/2016/201604/20160421/jQuery-menu/css/gooey.min.css">
<!--plugin js-->
<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;