Tag UL Menu for DIVI Elegant themes WordPress

Nov 9, 2017

Here is how you can have a dynamic menu made out tag ul li inside DIVI

Create 2 columns, one for the ul menu and one for image, slide show, or whatever you want to show/hide when clicking on the menu.

Go at each image at the Advanced tab and add CSS ID like “tab_page1” for the first “tab_page2” for the second ect.

Αdd the following code at the right side, for the menu:

</p><ul>
<li><a id="li_showtab1" onclick="showtab(1);" class="li_menuitem" href="#">Choice 1</a></li>
<li><a id="li_showtab2" onclick="showtab(2);" class="li_menuitem" href="#">Choice 2</a></li>
<li><a id="li_showtab3" onclick="showtab(3);" class="li_menuitem" href="#">Choice 3</a></li>
</ul>

Be careful of DIVI Builder because if you edit your page it keep on deleting {onclick=”showtab(1);”} from the li.

Go to the “Divi Theme Options/Integration/Add code to the < body > (good for tracking codes such as google analytics)” and add the code bellow:

<br />
<script type="text/javascript">
jQuery(document).ready(function()
{
   showtab(1);
});</p>
<p>  function showtab(value)
   {
     var menuitem = document.getElementsByClassName("li_menuitem");
     for (i = 1; i < 16; i++)
     {
         var curr_element = document.getElementById("li_showtab" + i);
         if ( i == value )
         {
            if (curr_element != null ) {  curr_element.style.color = "#dd2100"; }
            jQuery("#tab_page" + i).show();
         }
         else
         {
            if (curr_element != null ) {  curr_element.style.color = "#542100"; }
            jQuery("#tab_page" + i).hide();
         }
     }

     return false;
   }
</script></p>