How to insert our online menus in your web

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

Getting our menu

We're going to start downloading our menu and getting the correct files.

How to insert our online menus in your web

Click on the Download button.

How to insert our online menus in your web

These are the files that we need.

Note: Some menus doesn't have the jquery.js file. They're pure CSS.

Pasting the code into our website

Open the index.html and copy all the contents of the div cssmenu. It should look like this

<div id='cssmenu'>  
  <ul>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>Products</a>
      <ul>
        <li><a href='#'>Product 1</a>
          <ul>
            <li><a href='#'>Sub Product</a></li>
            <li><a href='#'>Sub Product</a></li>
          </ul>
        </li>
        <li><a href='#'>Product 2</a>
          <ul>
            <li><a href='#'>Sub Product</a></li>
            <li><a href='#'>Sub Product</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href='#'>About</a></li>
    <li><a href='#'>Contact</a></li>
  </ul>
</div>  

Now we need to paste that code into our own HTML, look for the body tag and paste the code below it.

<body>  
<div id='cssmenu'></div>  

Note: Your div cssmenu should have more info, this is just an example.

Great! Now onto the next step

Inserting the CSS and Jquery

The final step is to link the style and jquery to our menu. Look for this code in your HTML:

<link rel="stylesheet" href="styles.css">  
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>  
<script src="script.js"></script>  

It doesn't have to be the exact same code, just look for the .css and .js

If you don't have any of this lines you can just paste this and you're done!

The name of the files is very important if you look closely into the code you will notice that it has the same name that our downloaded files:

href="styles.css"  
script src="script.js"  

How to insert our online menus in your web

So, if you already have this files with your own code you can do two things:

  1. Passing our code into your own.
  2. Create another line doing reference to our files

Passing our code into your own

Open our styles.css, you will find a lot of code like this:

#cssmenu {
  position: relative;
  height: 44px;
  background: #2b2f3a;
  width: auto;
}

#cssmenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1;
}

Note: This is just an example, you should have more code in your file.

Copy all the code and paste it at the end of your own CSS file

#yourcode {
  position: relative;
  height: 44px;
}

#cssmenu {
  position: relative;
  height: 44px;
  background: #2b2f3a;
  width: auto;
}

#cssmenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1;
}

Follow the same procedure for the js file and you're done!

Now onto the second form.

Create another line doing reference to our files.

So, as you have your own code, maybe you don't wanna mess with it. Let's just call another file into your HTML.

<link rel="stylesheet" href="yourstyle.css">  
<link rel="stylesheet" href="cssmenustyle.css">  
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>  
<script src="yourscript.js"></script>  
<script src="cssmenuscript.js"></script>  

Final Notes

It's important to have the three files in the same directory: HTML, CSS, and JS

If you want to store your CSS and js files in another folder (some software do this) you have to change the href in the code:

<link rel="stylesheet" href="yourfoldersname/yourstyle.css">  
<script src="yourfoldersname/yourscript.js"></script>  

And if you're wondering what is this line for

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

The answer is very simple, it's what makes the js file work.

Voilà It's done! Congratulations! You have now inserted our menu in your website. I hope you enjoyed the tutorial and learned some new things!