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.

Click on the Download button.

These are the files that we need.

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

Pasting the code in our website

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



Now we need to paste that code inside our own html, look for the body tag and paste the code below it



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:





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 are 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"

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

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

Pasting 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







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




And if you're wondering what is this line for



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

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