CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Harshil Shah
Harshil Shah

Reputation: 203

Need help to make Menu shown on a site ( JQuery )

i am trying to make a Menu as shown in below imageenter image description here

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 ?

Font-Awesome image

Upvotes: 1

Views: 163

Answers (1)

Amin Gharavi
Amin Gharavi

Reputation: 452

Works 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>

Upvotes: 1

Related Questions