WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Problem with javascript menu rollovers (1 post)

  1. mattbaehr
    Member
    Posted 4 years ago #

    Hello all -

    I am new to using JS in WP and figure this is probably an easy fix.

    I have a wordpress self-hosted site. I am doing a nav bar with rollovers. I have the script saved as a js file and in the right directory. I have the

    <script src="<?php bloginfo('template_directory'); ?>/js/menu.js" type="text/javascript"></script>

    calling the JS in the header.php file just after the body tag. I have the styles where I want them in the CSS file. And lastly I have the html and the appropriate wp_list_pages call in the right spot.

    The css is working fine, which leads me to believe my css and html are spot on. But there is no rollover working. Do I need to put anything besides styling into my css file?

    Any help is much appreciated.

    Thanks.

    Script and HTML below:

    <script type="text/javascript">
    
    //Nested Side Bar Menu (Mar 20th, 09)
    //By Dynamic Drive: http://www.dynamicdrive.com/style/
    
    var menuids=["vertmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas
    
    function initvertmenu(){
    for (var i=0; i<menuids.length; i++){
      var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
        for (var t=0; t<ultags.length; t++){
        ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
      if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
       ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
      else //else if this is a sub level submenu (ul)
        ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
        ultags[t].parentNode.onmouseover=function(){
        this.getElementsByTagName("ul")[0].style.display="block"
        }
        ultags[t].parentNode.onmouseout=function(){
        this.getElementsByTagName("ul")[0].style.display="none"
        }
        }
      for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
      ultags[t].style.visibility="visible"
      ultags[t].style.display="none"
      }
      }
    }
    
    if (window.addEventListener)
    window.addEventListener("load", initvertmenu, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initvertmenu)
    
    </script>

    HTML in my sidebar.php page:

    <div class="vertmenu">
    <ul id="vertmenu1">
    <?php wp_list_pages('title_li=&depth=4&exclude=9&sort_column=menu_order'); ?>
    </ul></div>

Topic Closed

This topic has been closed to new replies.

About this Topic