Support » Themes and Templates » Custom Menu and Jquery trouble

  • Resolved saturngirl3773

    (@saturngirl3773)


    Hi everyone,

    I am in the process of migrating a website into WordPress. So far everything is going fine, but I can’t get the custom navigation bar that was previously coded to work in WordPress. I think it has something to do with not getting the Jquery to work correctly. It is suppose to work like this collapsable menu as seen here: http://www.acemuseum.org (current live site)

    In WordPress right now, I put the same code in, but it is just a list. The collapsable feature is not working.

    What do I do?

    This is the code for the header where the navigation bar lives:

    <?php
    /**
     * The header for our theme.
     *
     * This is the template that displays all of the <head> section and everything up until <div id="content">
     *
     * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
     *
     * @package acemuseum
     */
    
    ?><!DOCTYPE html>
    <html <?php language_attributes(); ?>>
    
    <head>
    <?php wp_enqueue_script("jquery"); ?>
    
    <?php wp_head(); ?>
    <script type="text/javascript"
       src="<?php bloginfo("template_url"); ?>/js/jquery-1.6.2.min">
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
    
    <script type="text/javascript">
    
     $(document).ready(function () {
    
    			var windowLocationPathname = window.location.pathname;
    
                $('#nav li ul').hide();
    
                $('#nav').find('a[href="' + windowLocationPathname + '"]').attr('class', 'selected CurrentPage');
    
                $('.CurrentPage').parents('.SubMenu').show();
    
                $('#nav li').hover(function () {
                    //check that the menu is not currently animated
                    if ($('#nav ul:animated').size() == 0) {
                        // create a reference to the active element (this)
                        // so we don't have to keep creating a jQuery object
                        $heading = $(this);
                        // create a reference to visible sibling elements
                        // so we don't have to keep creating a jQuery object
                        $expandedSiblings = $heading.siblings().find('ul:visible');
                        if ($expandedSiblings.size() > 0) {
                            $expandedSiblings.slideUp(100, function () {
                                $heading.find('ul').slideDown(300);
                            });
                        }
                        else {
                            $heading.find('ul').slideDown(300);
                        }
                    }
                });
            });
    
    </script>
    
    <script src="js/jqbanner.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="css/jqbanner.css" />
    </script>
    
    <div id="page">
    
    	  		<div id="header"> <!-- calls the header from site folder -->
      			<div id="logo"><img src="http://localhost:8888/acemuseum2/wp-content/uploads/2015/09/header_3.jpg" alt="_header_3" width="848" height="100" class="alignnone size-full wp-image-90" /></div>
    
      </div>
    
      <div id="subheader"><!-- calls dynamic superfish navigation -->
    
    </div>
    
    		 <!-- end body wrapper -->
    
        <div id="art">
    
        <!-- <div id="jqb_object">
    
    	<div class="jqb_slides">
    
    		<div class="jqb_slide" title="" ><img src="img/banner4.jpg" title="" alt=""/></div>
    
    	</div>
    
    	</div> -->
    
      </div>
    
    <div id="main_column">
    	<div class="top-heading">Museum</div>
    
            <div id="menu">
            <ul id="nav">
    <li><a href="http://localhost:8888/acemuseum2/currentexhibitions/">Exhibitions</a>
                	<ul class="SubMenu">
    					<li><a href=" http://localhost:8888/acemuseum2/currentexhibitions/">Current Exhibitions</a></li>
                        <li><a href="http://localhost:8888/acemuseum2/futureexhibitions/">Future Exhibitions</a></li>
                        <li><a href=" http://localhost:8888/acemuseum2/pastexhibitions">Past Exhibitions</a></li>
                    </ul>
                </li>
                <li><a href=" http://localhost:8888/acemuseum2/visit">Visit</a></li>
                <li><a href=" http://localhost:8888/acemuseum2/mission">About</a>
                	<ul class="SubMenu">
                        <li><a href=" http://localhost:8888/acemuseum2/mission">Mission</a></li>
                        <li><a href=" http://localhost:8888/acemuseum2/vision">Vision</a></li>
                        <li><a href=" http://localhost:8888/acemuseum2/history">History</a></li>
                    </ul>
                </li>
                <li><a href=" http://localhost:8888/acemuseum2/contact/">Contact</a></li>
                <li class="home-last"><a href=" http://localhost:8888/acemuseum2/"><< Home</a></li>
            </ul>
    <?php echo DISPLAY_ULTIMATE_PLUS(); ?>
        	</div>		
    
    	</div>
    </head>
    
    <body <?php body_class(); ?>>
    
    <body>

Viewing 2 replies - 1 through 2 (of 2 total)
  • WordPress runs Jquery in no-conflict mode. Instead of using

    $(document).ready(function(){})

    You will need to use

    jQuery(document).ready(function( $ ) {
    });

    Thread Starter saturngirl3773

    (@saturngirl3773)

    THANK YOU!

    It works 🙂 Iknew it had to be simple enough.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Custom Menu and Jquery trouble’ is closed to new replies.