Support » Themes and Templates » Custom Menu and Jquery trouble
Custom Menu and Jquery trouble
-
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>
-
WordPress runs Jquery in no-conflict mode. Instead of using
$(document).ready(function(){})
You will need to use
jQuery(document).ready(function( $ ) { });
THANK YOU!
It works 🙂 Iknew it had to be simple enough.
- The topic ‘Custom Menu and Jquery trouble’ is closed to new replies.