- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
-
AuthorPosts
-
May 19, 2016 at 4:52 am #10115harshil-shahParticipant
i am trying to make a Menu as shown in below image
see this Link to go to its website i have copied some code ( HTML code and links to css and .js files) from there.
Here is my code :
<!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>
I have downloaded all the required files and even linked required .css and .js files to my code but i don’t know why it gives me error that ” It doesn’t contain property googymenu ”
Can anyone please help me to implement this Menu item.
Thank you so much.
EDIT : Which file i need to add from all font-awesome files ?
May 19, 2016 at 6:07 am #10116amin-gharaviParticipantWorks fine , see the sample.
Edit
Added Font-Awesome and a bit of CSS to move the menu.
#gooey-upper{ left : 200px; top : 50px; }
Sample
$("#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" });
#gooey-upper{ left : 200px; top : 50px; }
<!--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>
-
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
- You must be logged in to reply to this topic.