Search code examples
javascriptphpjquerycssjoomla

How to Load External JS and URL in Joomla Protostar Template

I am looking to add a hamburger menu to my joomla protostar template similar to the one found on the following URL:

['https://codepen.io/PaulVanO/pen/GgGeyE']

This will allow me to have a fullscreen hamburger menu for my desktop and mobile screen. The problem I am having is that within the files from the above link there are 3 links, 2 to external JS files and 1 CSS file and I am not sure how I can write this into a Protostar Template. The following are the three links:

<link rel='stylesheet prefetch' href='http://daneden.github.io/animate.css/animate.min.css'>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/wow/0.1.12/wow.min.js'></script>
<script  src="js/index.js"></script>

I would really appreciate it if somebody could advise on how I can add the above scripts to my file in order for me to build this within Joomla.

Currently I am using Joomla version 3.8.2.

Thanks in advance.

Solution

  • here is an example from the manual

    <?php
$document = JFactory::getDocument();
$document->addScript('/media/system/js/sample.js');
$document->addStyleSheet("/joomla/components/com_mycustomcomponent/css/mytooltip.css",'text/css',"screen");
?>