How to insert our menus in your site

Now that we created our menu in the online builder, let’s go through the process of inserting the menu in our website.

Downloading our menu

How to insert our menus in your site

Click on the download button

Editing our index.html

Open the index.html file and copy the contents from the div “cssmenu” of your index file. It will look something like this:

<div id="cssmenu">  
  <ul>
    <li><a href="#" target="_blank"><i class="fa fa-fw fa-home"></i> Home</a></li>
    <li><a href="#"><i class="fa fa-fw fa-bars"></i> Menus</a>
      <ul>
        <li><a href="#">Menu 1</a>
          <ul>
            <li><a href="#">Menu 1.1</a></li>
            <li><a href="#">Menu 1.2</a></li>
          </ul>
        </li>
        <li><a href="#">Menu 2</a></li>
      </ul>
    </li>
    <li><a href="#"><i class="fa fa-fw fa-cog"></i> Settings</a></li>
    <li><a href="#"><i class="fa fa-fw fa-phone"></i> Contact</a></li>
  </ul>
</div>  

You should be able to see an unfinished version of your menu with blue text, now let’s insert the CSS and js files to make our menus fully functional.

Inserting the CSS and jquery files

For the CSS file, you will need to copy the following code and paste it inside the tag of your HTML file.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">  
<link rel="stylesheet" href="styles.css">  

Note: Please remember that the “href” points at the location of the CSS file, if you put the file inside a folder you should change the direction, for example:

<link rel="stylesheet" href="css/styles.css">  

This will search for the styles.css inside a “CSS” folder.

For the js file, you will need the following code inside the tag of your HTML file.

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>  
<script src="https://s3.amazonaws.com/menumaker/menumaker.min.js" type="text/javascript"></script>  
<script src="script.js"></script>  

Note: The same rule applies for the script.js, you will need to point at the location of the script file in your web page folder.

After this, you should be able to see your menu with all the functionalities! Congratulations!