Support » Fixing WordPress » Problem with javascript menu rollovers

  • Resolved mattbaehr


    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.


    Script and HTML below:

    <script type="text/javascript">
    //Nested Side Bar Menu (Mar 20th, 09)
    //By Dynamic Drive:
    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][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
      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
    if (window.addEventListener)
    window.addEventListener("load", initvertmenu, false)
    else if (window.attachEvent)
    window.attachEvent("onload", initvertmenu)

    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'); ?>

  • The topic ‘Problem with javascript menu rollovers’ is closed to new replies.