JavaScript - Newbie - Cut & Paste Jquery Mega Menu / Mobile Devices

See below:

Hi all,

I am having problems with a script 'Cut & Paste CSS Horizontal List Menu' from http://www.javascriptkit.com/script/...stopmenu.shtml

It works on my site with Firefox but not IE 8.

My site url is http://www.bridgepoint-llp.co.uk/
I would be grateful for any help anyone could supply

What would be the best way to get data for a mobile site. I've tried using Jquery $.ajax to bring in the data from a php file.

It seems to work however it takes some time to load without a way to really give a progress meter. I was wondering what the fastest way to do this would be. For instance it loads and loads then after a long while the alert(); pops up and the data loads into the page.

Ultimately i was thinking i could use the ajax request to read in the data from the mysql database server, then transfer it to localstorage, im using HTML5 primarily for the development also just for reference.

Somewhat new to mobile development i was just wondering if anyone had a starting point for me to look at and go from there.

Code:

$(document).ready(function($){
	var dataret = 0;
	
		$.ajax({
		  type: 'POST',
		  url: 'mobile.php',
		  beforeSend: function(){
		  	$('#status').show();
		  },
		  success: function(data){
		  //initialize localstorage here
		  	alert('success');
		  	
// if it takes as long as it does, a few minutes, at least show a loading bar...
		  	$('#progress').progressbar({
		  		
		  	});
		  
		  },
		  dataType: 'json'
		});
	
	});

Thanks in advance!

Hi... I did the Cut & Paste CSS Vertical List Menu, but I have an issue with submenus... Appear behind other divs.

I attach a print screen. I include inside a div. Any idea?

Code:

<div id="sidebar1">
      
        <ul id="verticalmenu" class="glossymenu">
        <li><a href="http://www.javascriptkit.com/">JavaScript Kit</a></li>
        <li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li>
        <li><a href="http://www.javascriptkit.com/">JavaScript Tutorials</a></li>
        <li><a href="#">References</a>
            <ul>
            <li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
            <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
            <li><a href="http://www.javascriptkit.com/dhtmltutors/cssreference.shtml">CSS Reference</a></li>
            </ul>
        </li>
        <li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >DHTML/ CSS Tutorials</a></li>
        <li><a href="http://www.javascriptkit.com/howto/">web Design Tutorials</a></li>
        <li><a href="#" >Helpful Resources</a>
            <ul>
            <li><a href="http://www.dynamicdrive.com">Dynamic HTML</a></li>
            <li><a href="http://www.codingforums.com">Coding Forums</a></li>
            <li><a href="http://www.cssdrive.com">CSS Drive</a></li>
            <li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
            <li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a></li>
            <li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Generator</a></li>
            </ul>
        </li>
        </ul>

      </div>

Hello all,
I've got a problem with a JS dropdown menu that I'm using. It's an unordered HTML list that is driven by a JS file.

The menu is at Watt You Need Electrical - Offering Electrical Services For Geelong, Bellarine Peninsula & The Surf Coast

Initially when I got the menu template all the top level items and all the list items were coded as links. What I've done is make the Electrical heading just text and the two dropdown list items below it are still links. The menu works both on a desktop with a pointer and also on a mobile device by touch. The problem is that on a mobile device when I touch the Electrical heading the dropdown doesn't appear. The Solar heading and the dropdown below it work fine because the Solar heading is still a link. Obviously I've created the problem by changing the Electrical heading to text from a link but I'd like to be able to have it that way.

I've tested using some online mobile device emulators and it works OK there but when I physically test on an Iphone 5 the bug is there. I haven't been able to get my hands on any other phones or devices to test yet so don't know if it's a problem just with Iphones or Ipads.

I've had a look through the Dropdown.src.js file but it's way beyond me, I've listed both the HTML and JS file below.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Watt You Need Electrical - Offering Electrical Services For Geelong, Bellarine 
Peninsula &amp; The Surf Coast</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta name="description" content="Watt You Need Electrical is your one stop shop for all types of electrical services. Whether you need some domestic, commercial, or even industrial electrical work done we can 
help. We also can advise on and install solar power systems and split air conditioners." />
<meta name="keywords" content="electrical services" />
<meta name="robots" content="index, follow" />
	
																				<link rel="stylesheet" type="text/css" href="css/styles.css" media="Screen" />
																				<link rel="stylesheet" type="text/css" href="css/mobile.css" media="handheld" />
																				<link media="only screen and (max-device-width: 480px)" href="css/mobile.css" type="text/css" rel="stylesheet" />
																				
															
																				
									<script>
									// initialise the drop-down menus
									runOnLoad(Dropdown.initialise);
									</script>
				
												
</head>
<body>


<div id="wrapper">

	<a href="tel://+61425859742"><div id="mobile_header"></div></a>
	<a href="tel://+61425859742"><div id="phoneBlock"></div></a>

	
	<div id="header"></div>
	
	<div id="nav">
	<ul class="dropdown">
  <li>
    <a href="index.html">Home</a>
		</li>    
		<li>Electrical
    <ul>
      <li>
        <a href="domestic_electrician.html">Domestic</a>
      </li>
      <li>
        <a href="electrical_contractors.html">Commercial/Industrial</a>
      </li>
    </ul>
  </li>    <li>
	<a href="air_conditioner_installation.html">Air Conditioners</a>
	</li>			<li>
	<a href="solar_power_systems.html">Solar</a>
	<ul>
			<li><a href="solar_system_maintenance.html">Maintenance</a>
			</li>
			<li><a href="solar_energy_facts.html">About Solar</a>
			</li>
			</ul>
	</li>    <li>
	<a href="b_type_gas_service.html">Type B Gas</a>
	</li>  <li>
	<a href="formgenerator/forms/contact.html">Contact Us</a>
	</li>
</ul>
	</div>	 					
	
	
	
				<div id="content-2">
				<div class="clear">&nbsp;</div>
						 <div id="top_border"></div>
						 		 <div id="content-2-1">
								 
								 			<span class="blackheading">Watt You Need Electrical - 
											Offering Electrical Services For Geelong, Bellarine Peninsula &amp; The Surf Coast</span>
											
			<p>Watt You Need Electrical Services can help you with all your electrical needs. We're not one of the big franchise electrical contractors so we can 
			take that extra bit of time and effort to make sure you get the best service and advice.
			<br /><br />
			If it's just an extra power point you need all the way to a complete house rewire, thinking about making the switch to solar power, or if you want a 
			split airconditioner to keep your house or business cool and comfortable, our focus is on exceeding our customer's expectations and providing the best 
			quality job at a competitive price.
			<br /><br />
			Our service doesn't just stop at <a href="domestic_electrician.html">domestic electrical</a> and <a href="solar_power_systems.html">solar power</a>, 
			we can also attend to your <a href="electrical_contractors.html">commercial and industrial electrical</a> needs and we specialise in <a href="b_type_gas_service.html">B 
			Class gas appliance</a> repair and maintenance. Our range of services and quality workmanship are what sets us apart from other electrical contractors.
			<br /><br />
			<a href="formgenerator/forms/contact.html">Contact us</a> today and let Watt You Need Electrical take care of your domestic, solar, air conditioning and commercial and industrial electrical services.
			</p>


								</div>
						<div id="bottom_border"></div>
				</div>
	
	<div id="footer">
			 <table class="tableFooter">
			 <tr><td>Watt You Need Electrical Pty. Ltd. &copy; 2014</td></tr>
			 </table>
  </div>
	
</div>

</body>
</html>

Code:

/*

Dropdown.js

Creates touch-friendly drop-down menus

Created by Stephen Morley - http://code.stephenmorley.org/ - and released under
the terms of the CC0 1.0 Universal legal code:

http://creativecommons.org/publicdomain/zero/1.0/legalcode

*/

// create the Dropdown object
var Dropdown = (function(){

  // the delay, in milliseconds
  var DELAY = 250;

  // the list of menus
  var menus = [];

  // Initialises the drop-down menus.
  function initialise(){

    // listen for touch events on the document if appropriate
    if ('createTouch' in document){
      document.body.addEventListener('touchstart', handleTouchStart, false);
    }

    // loop over the menus, converting them
    var menus = document.querySelectorAll('ul.dropdown');
    for (var i = 0; i < menus.length; i ++) applyTo(menus[i]);

  }

  /* Handles a touch start event. The parameter is:
   *
   * e - the event
   */
  function handleTouchStart(e){

    // determine whether any menu is open
    var isOpen = false;
    for (var i = 0; i < menus.length; i ++){
      if (menus[i].isOpen) isOpen = true;
    }

    // return immediately if all menus are closed
    if (!isOpen) return;

    // move up the document tree until we reach the root node
    var node = e.target;
    while (node != null){

      // return immediately if we are inside a drop-down menu
      if (/\bdropdown\b/.test(node.className)) return;

      // move onto the parent node
      node = node.parentNode;

    }

    // close all menus
    close();

  }

  /* Closes all menus except the specified menu. The parameter is:
   *
   * menu - a menu not to close; this parameter is optional
   */
  function close(menu){

    // loop over the menus, closing them
    for (var i = 0; i < menus.length; i ++){
      if (menus[i] != menu) menus[i].close();
    }

  }

  /* Creates a drop-down menu. The parameter is:
   *
   * node - either the DOM node of the menu or the ID of the node
   */
  function applyTo(node){

    // fetch the DOM node if a string was supplied
    if (typeof node == 'string') node = document.getElementById(node);

    // create and store the new menu
    menus.push(new Menu(node));

  }

  /* Creates a drop-down menu. The parameter is:
   *
   * node - the DOM node of the menu
   */
  function Menu(node){

    // store the node
    this.node = node;

    // update the class name
    node.className += ' dropdownJavaScript';

    // listen for mouse events
    if ('addEventListener' in node){
      node.addEventListener(
          'mouseover', this.bind(this.handleMouseOver), false);
      node.addEventListener('mouseout', this.bind(this.handleMouseOut), false);
      node.addEventListener('click',    this.bind(this.handleClick),    false);
    }else{
      node.attachEvent('onmouseover', this.bind(this.handleMouseOver));
      node.attachEvent('onmouseout',  this.bind(this.handleMouseOut));
      node.attachEvent('onclick',     this.bind(this.handleClick));
    }

    // listen for touch events if appropriate
    if ('createTouch' in document){
      node.addEventListener('touchstart', this.bind(this.handleClick), false);
    }

  }

  // whether the menu is open
  Menu.prototype.isOpen = false;

  // the timeout
  Menu.prototype.timeout = null;

  /* Binds the specified function to the current object. The parameter is:
   *
   * f - the function
   */
  Menu.prototype.bind = function(f){

    // return the bound function
    var thisObject = this;
    return function(){ f.apply(thisObject, arguments); }

  }

  /* Handles a mouse over event. The parameters a 
   *
   * e         - the event
   * immediate - true to open the menu without a delay
   */
  Menu.prototype.handleMouseOver = function(e, immediate){

    // clear the timeout
    this.clearTimeout();

    // find the parent list item
    var item = ('target' in e ? e.target : e.srcElement);
    while (item.nodeName != 'LI' && item != this.node) item = item.parentNode;

    // if the target is within a list item, set the timeout
    if (item.nodeName == 'LI'){
      this.toOpen  = item;
      this.timeout =
          window.setTimeout(this.bind(this.open), (immediate ? 0 : DELAY));
    }

  }

  // Handles a mouse out event.
  Menu.prototype.handleMouseOut = function(){

    // clear the timeout
    this.clearTimeout();

    // set the timeout
    this.timeout = window.setTimeout(this.bind(this.close), DELAY);

  }

  /* Handles a click event. The parameter is:
   *
   * e - the event
   */
  Menu.prototype.handleClick = function(e){

    // close any other menus
    close(this);

    // find the parent list item
    var item = ('target' in e ? e.target : e.srcElement);
    while (item.nodeName != 'LI' && item != this.node) item = item.parentNode;

    // check that the target is within a list item
    if (item.nodeName == 'LI'){

      // check whether the item has a closed submenu
      var submenu = this.getChildrenByTagName(item, 'UL');
      if (submenu.length > 0 && !/\bdropdownOpen\b/.test(item.className)){

        // open the submenu
        this.handleMouseOver(e, true);

        // prevent the default action
        if ('preventDefault' in e){
          e.preventDefault();
        }else{
          e.returnValue = false;
        }

      }

    }

  }

  // Clears the timeout.
  Menu.prototype.clearTimeout = function(){

    // clear the timeout
    if (this.timeout){
      window.clearTimeout(this.timeout);
      this.timeout = null;
    }

  }

  // Opens the last item hovered over.
  Menu.prototype.open = function(){

    // store that the menu is open
    this.isOpen = true;

    // loop over the list items with the same parent
    var items = this.getChildrenByTagName(this.toOpen.parentNode, 'LI');
    for (var i = 0; i < items.length; i ++){

      // check whether there is a submenu
      var submenu = this.getChildrenByTagName(items[i], 'UL');
      if (submenu.length > 0){

        // check whether the submenu should be opened or closed
        if (items[i] != this.toOpen){

          // close the submenu
          items[i].className =
              items[i].className.replace(/\bdropdownOpen\b/g, '');
          this.close(items[i]);

        }else if (!/\bdropdownOpen\b/.test(items[i].className)){

          // open the submenu
          items[i].className += ' dropdownOpen';

          // determine the location of the edges of the submenu
          var left = 0;
          var node = submenu[0];
          while (node){
            left += node.offsetLeft;
            node = node.offsetParent;
          }
          right = left + submenu[0].offsetWidth;

          // move the submenu to the right of the item if appropriate
          if (left < 0) items[i].className += ' dropdownLeftToRight';

          // move the submenu to the left of the item if appropriate
          if (right > document.body.clientWidth){
            items[i].className += ' dropdownRightToLeft';
          }

        }

      }

    }

  }

  /* Closes the menus within the specified node. The parameter is:
   *
   * node - the node; if omitted, all menus are closed
   */
  Menu.prototype.close = function(node){

    // if no node was specified, close all menus
    if (!node){
      this.isOpen = false;
      node        = this.node;
    }

    // loop over the items, closing their submenus
    var items = node.getElementsByTagName('li');
    for (var i = 0; i < items.length; i ++){
      items[i].className = items[i].className.replace(/\bdropdownOpen\b/g, '');
    }

  }

  /* Returns an array containing the children of the specified node with the
   * specified tag name. The parameters a 
   *
   * node    - the node
   * tagName - the tag name
   */
  Menu.prototype.getChildrenByTagName = function(node, tagName){

    // initialise the list of children
    var result = [];

    // loop over the children, adding those with the right tag name to the list
    for (var i = 0; i < node.childNodes.length; i ++){
      if (node.childNodes[i].nodeName == tagName){
        result.push(node.childNodes[i]);
      }
    }

    // return the children
    return result;

  }

  // return the public API
  return {
    initialise : initialise,
    applyTo    : applyTo
  };

})();

Any help is appreciated.

I'm new to javascript. Can someone help me with this menu?

Here is my html code:

<head>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Alaska Fur Gallery</title>

<link rel="stylesheet" type="text/css" href="style.css" />

<script language="JavaScript" src="js.js"></script>
<link rel="stylesheet" type="text/css" href="activemenu.css" />
<script src="jquery-activemenu.js" type="text/javascript"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.1.css" media="screen" />

<script type="text/javascript">
$(document).ready(function() {
$("a#fancybox").fancybox({
'titleShow' : false,
type:'image'
});

//show the footer
$("#footer").css("visibility","visible");

//initialize activeMenu
initMenu();
});

</script>




</head>
<body>


<div id="container">

<div id="header">
<a href="index.html"><div id="logolink">Alaska Fur Gallery</div></a>
<div id="answer">We're Here to Answer Your Questions. Call Us Today at 334-277-7610</div>
<div id="underlinemenu" class="ulmhead">
<ul>
<li><a href="index.html" style="border:0;">Home</a></li>
<li><a href="content2e96.html?id=431503">About</a></li>
<li><a href="content9bf1.html?id=431504">Services</a></li>
<li><a href="find_location.html">Locations</a></li>
<li><a href="ct.html">Contact Us</a></li>

</ul>
</div>
<div class="clear"></div>
<div id="topmenu">
<ul id="activeMenu">
<li style="top: 0; left:0px"><a href="shopa146.html?action=cat&amp;catID=20529" id="furs">Furs</a></li>
<li style="top: 0; left:66px"><a href="shop52df.html?action=cat&amp;catID=20541" id="leather">Leather & Fur</a></li>
<li style="top: 0; left:210px"><a href="shop9e9f.html?action=cat&amp;catID=20575" id="cashmere">Cashmere & Fur</a></li>
<li style="top: 0; left:374px"><a href="shop80c4.html?action=cat&amp;catID=21239" id="outerwear">Outerwear</a></li>
<li style="top: 0; left:493px"><a href="shop0376.html?action=cat&amp;catID=20544" id="plus">Plus Sizes</a></li>
<li style="top: 0; left:604px"><a href="shop2060.html?action=cat&amp;catID=20580" id="accessories">Accessories</a></li>
</ul>
</div><!-- topmenu -->
</div><!-- header -->

<!--submenu divs-->
<div id="furs_submenu">
<ul class="dropdown" style="width:130px; float:left; margin:0 30px 0 0;">
<span>Women's Furs</span>
<li><a href="shopde5e.html?action=cat&amp;catID=20572">Mink</a></li>
<li><a href="shop2705.html?action=cat&amp;catID=20574">Sable</a></li>
<li><a href="shop5c0d.html?action=cat&amp;catID=20570">Chinchilla</a></li>
<li><a href="shopdfa7.html?action=cat&amp;catID=20568">Beaver</a></li>
<li><a href="shop04fa.html?action=cat&amp;catID=20571">Lynx</a></li>
<li><a href="shop65dc.html?action=cat&amp;catID=20569">Bobcat</a></li>
<li><a href="shopc9fc.html?action=cat&amp;catID=20622">Coyote</a></li>
<li><a href="shop65f8.html?action=cat&amp;catID=20539">Fox</a></li>
<li><a href="shop3276.html?action=cat&amp;catID=20573">Rabbit</a></li>
</ul>
<ul class="dropdown" style="width:140px; float:left;">
<span>Men's Furs</span>
<li><a href="shop2ef6.html?action=cat&amp;catID=20531">Mink</a></li>
<li><a href="errorfe10.html?action=cat&amp;catID=20532">Sable</a></li>
<li><a href="errorfe10.html?action=cat&amp;catID=20533">Chinchilla</a></li>
<li><a href="errorfe10.html?action=cat&amp;catID=20534">Beaver</a></li>
<li><a href="errorfe10.html?action=cat&amp;catID=20535">Lynx</a></li>
<li><a href="errorfe10.html?action=cat&amp;catID=20536">Bobcat</a></li>
<li><a href="shopfc5b.html?action=cat&amp;catID=20618">Coyote</a></li>
<li><a href="shop88e4.html?action=cat&amp;catID=20537">Fox</a></li>
<li><a href="errorfe10.html?action=cat&amp;catID=20540">Rabbit</a></li>
</ul>
</div>

<div id="leather_submenu">
<ul class="dropdown">
<li><a href="shop973d.html?action=cat&amp;catID=20542">Women's Leather & Fur</a></li>
<li><a href="shop4cc6.html?action=cat&amp;catID=20543" style="border:0;">Men's Leather & Fur</a></li>
</ul>
</div>

<div id="cashmere_submenu">
<ul class="dropdown">
<li><a href="shop3f01.html?action=cat&amp;catID=20576">Coats</a></li>
<li><a href="shopd4d8.html?action=cat&amp;catID=20577">Strollers</a></li>
<li><a href="shop7899.html?action=cat&amp;catID=20578">Jackets</a></li>
<li><a href="shopcba4.html?action=cat&amp;catID=20579" style="border:0;">Capes</a></li>
</ul>
</div>

<div id="plus_submenu">
<ul class="dropdown" style="width:130px; float:left; margin:0 30px 16px 0;">
<span>Women's Furs</span>
<li><a href="shop2530.html?action=cat&amp;catID=20564">Mink</a></li>
<li><a href="shop807e.html?action=cat&amp;catID=20566">Sable</a></li>
<li><a href="shopbc8f.html?action=cat&amp;catID=20557">Chinchilla</a></li>
<li><a href="shopcb16.html?action=cat&amp;catID=20553">Beaver</a></li>
<li><a href="shop3cb8.html?action=cat&amp;catID=20561">Lynx</a></li>
<li><a href="shopb6e3.html?action=cat&amp;catID=20555">Bobcat</a></li>
<li><a href="shop1e6c.html?action=cat&amp;catID=20621">Coyote</a></li>
<li><a href="shopc08b.html?action=cat&amp;catID=20559">Fox</a></li>
<li><a href="shop0495.html?action=cat&amp;catID=20562">Rabbit</a></li>
</ul>
<ul class="dropdown" style="width:140px; float:left;">
<span>Men's Furs</span>
<li><a href="shop9b23.html?action=cat&amp;catID=20565">Mink</a></li>
<li><a href="shop10dc.html?action=cat&amp;catID=20567">Sable</a></li>
<li><a href="shop8154.html?action=cat&amp;catID=20556">Chinchilla</a></li>
<li><a href="shop0b63.html?action=cat&amp;catID=20551">Beaver</a></li>
<li><a href="shopa40f.html?action=cat&amp;catID=20560">Lynx</a></li>
<li><a href="shopd843.html?action=cat&amp;catID=20554">Bobcat</a></li>
<li><a href="shopa2c0.html?action=cat&amp;catID=20620">Coyote</a></li>
<li><a href="shopb0b2.html?action=cat&amp;catID=20558">Fox</a></li>
<li><a href="shopd3b0.html?action=cat&amp;catID=20563">Rabbit</a></li>
</ul>
<div class="clear"></div>
<ul class="dropdown" style="width:130px; float:left; margin:0 30px 10px 0;">
<span>Leather & Fur</span>
<li><a href="shop91d6.html?action=cat&amp;catID=20549">Women's Leather & Fur</a></li>
<li><a href="shop8605.html?action=cat&amp;catID=20548">Men's Leather & Fur</a></li>
</ul>
<ul class="dropdown" style="width:140px; float:left; margin:-6px 0 0 0;">
<li><a href="shope478.html?action=cat&amp;catID=20550" style="border:0;"><strong>Cashmere & Fur</strong></a></li>
</ul>
</div>

<div id="accessories_submenu">
<ul class="dropdown">
<li><a href="shop2f26.html?action=cat&amp;catID=20581">Fur Hats</a></li>
<li><a href="shop9989.html?action=cat&amp;catID=20582">Fur Headbands</a></li>
<li><a href="shop935f.html?action=cat&amp;catID=20583">Fur Earmuffs</a></li>
<li><a href="shopd2bf.html?action=cat&amp;catID=20584">Gloves with Fur</a></li>
<li><a href="shop2c08.html?action=cat&amp;catID=20585">Fur Boot Toppers</a></li>
<li><a href="shop9f4f.html?action=cat&amp;catID=20586">Fur Scarves & Flings</a></li>
<li><a href="shop3d06.html?action=cat&amp;catID=20587">Fur Blankets</a></li>
<li><a href="shop4bf4.html?action=cat&amp;catID=20588">Fur Handbags</a></li>
<li><a href="shop611a.html?action=cat&amp;catID=20589" style="border:0;">Mink Teddy Bears</a></li>
</ul>
</div>

Here is the javascript:
/*
jQuery ActiveMenu v1.0
Author: Miguel Sanchez
12/2009
*/


var timeouts = []; //for hiding the menu purposes


function initMenu(){
var offclass;
var menuAnchor;
$("#activeMenu").find("li").each(function() {

//get a reference to the anchor inside the li
menuAnchor = $(this).children(":first");

//get the name of the offclass
offclass = $(menuAnchor).attr("id")+"_off";

//assign off class to item
$(menuAnchor).addClass(offclass);

//assign hover event handler to main menu
$(menuAnchor).hover(
function (event) {
submenu_show(event.target);
},
function (event) {
submenu_hide(event.target);
}
&nbsp;

});

//assign hover events to submenu
$("div [id$=_submenu]").hover(
function (event) {
submenu_over(event.target);
},
function (event) {
submenu_out(event.target);
}
&nbsp;


}


function submenu_show(caller){
//hide all the submenus
$("div [id$=_submenu]").hide();

//get the id of the main menu item
var mainMenuItemId = $(caller).attr("id")

//get the "on" class name
var onclass = mainMenuItemId+"_on";
//get the "off" class name
var offclass = mainMenuItemId+"_off";

//remove off class to item
$(caller).removeClass(offclass);

//assign on class to item
$(caller).addClass(onclass);

// get the id of the submenu
var targetSubMenuId = mainMenuItemId+"_submenu";
//show the submenu
$("#"+targetSubMenuId).slideDown("fast");



}

function submenu_hide(caller){

//get the id of the main menu item
var mainMenuItemId = $(caller).attr("id");

//get the "on" class name
var onclass = mainMenuItemId+"_on";
//get the "off" class name
var offclass = mainMenuItemId+"_off";

//remove on class to item
$(caller).removeClass(onclass);

//assign off class to item
$(caller).addClass(offclass);

timeouts[mainMenuItemId] = setTimeout(function() {
$("#"+mainMenuItemId+"_submenu").slideUp("fast");
}, 200);

}

function submenu_over(caller){

//get a reference to the containing div
var subMenuDiv = $(caller).closest("div");
//show the div
$(subMenuDiv).show();

//get the id of the main menu
var mainMenuItemId = $(subMenuDiv).attr("id");
mainMenuItemId = mainMenuItemId.replace("_submenu","");

clearTimeout(timeouts[mainMenuItemId]);


//remove the "off" class
$("#"+mainMenuItemId).removeClass(mainMenuItemId+"_off");
//add the "on" class
$("#"+mainMenuItemId).addClass(mainMenuItemId+"_on");
}


function submenu_out(caller){
//get a reference to the containing div
var subMenuDiv = $(caller).closest("div");
$(subMenuDiv).hide();
//get the id of the main menu
var menuAnchorId = $(subMenuDiv).attr("id");
menuAnchorId = menuAnchorId.replace("_submenu","");

//remove the "on" class
$("#"+menuAnchorId).removeClass(menuAnchorId+"_on");

//add the "off class
$("#"+menuAnchorId).addClass(menuAnchorId+"_off");
}

Here is the CSS styling:

/* graphical menu codes */

#topmenu ul {
list-style: none;
width: 738px;
height:52px;
padding:0;
margin: 0px;
position: absolute;
top:94px;
right:0;
overflow: hidden;

}

#topmenu li {
display: inline;
position: absolute;
}


#topmenu li a{
float: left;
font-size:11px;
line-height: 14px;
white-space: nowrap;
text-transform: uppercase;
text-align:center;
padding: 0 0 0 0;
text-indent:777px;
overflow:hidden;
height:52px;
}

#topmenu li a:hover {
color: #bceffa;
}
a.on {
color: #bceffa;
}

#topmenu a {
color: #ffffff;
text-decoration: none;

}
#topmenu a:hover {
color: #bceffa;
text-decoration: none;
}




.furs_off {
background: url("graphics/topmenu2.gif") 0 0 no-repeat;
width:66px;
}

.furs_on {
background: url("graphics/topmenu2.gif") 0 -52px no-repeat;
}

.leather_off {
background: url("graphics/topmenu2.gif") -66px 0 no-repeat;
width:144px;
}

.leather_on{
background: url("graphics/topmenu2.gif") -66px -52px no-repeat;
}

.cashmere_off {
background: url("graphics/topmenu2.gif") -210px 0 no-repeat;
width:165px;
}

.cashmere_on{
background: url("graphics/topmenu2.gif") -210px -52px no-repeat;
}

.outerwear_off {
background: url("graphics/topmenu2.gif") -374px 0 no-repeat;
width:119px;
}

.outerwear_on{
background: url("graphics/topmenu2.gif") -374px -52px no-repeat;
}

.plus_off {
background: url("graphics/topmenu2.gif") -493px 0 no-repeat;
width:111px;
}

.plus_on{
background: url("graphics/topmenu2.gif") -493px -52px no-repeat;
}

.accessories_off {
background: url("graphics/topmenu2.gif") -604px 0 no-repeat;
width:133px;
}

.accessories_on{
background: url("graphics/topmenu2.gif") -604px -52px no-repeat;
}





ul.dropdown {
list-style: none;
margin: 0;
padding: 0;
border: none;
z-index:10000;
position:relative;
}

ul.dropdown li span {
display: block;
_display:inline-block;
text-decoration: none;
}
ul.dropdown li a {
display: block;
position: relative;
_display:inline-block; /* so IE doesn't add space between elements */
_width: 83%; /* makes block fill width in IE */
padding: 6px 10px 6px 10px;
font-size: 13px;
color: #ffffff;
text-decoration: none;
border-bottom:1px solid #b78833;

}


ul.dropdown li a:hover{
color: #ffffff;
background: #e3a73a;
text-decoration: none;
}

.dropdown span{
font-weight:bold;
color:#64450f;
margin:0 0 0 10px;
}


#furs_submenu {
width:300px;
padding: 5px 0;
background: #c8912f;
position: absolute;
top: 146px;
left: 260px;
display: none;
z-index:1000;
}

#leather_submenu {
width:166px;
padding: 5px 0;
background: #c8912f;
position: absolute;
top: 146px;
left: 325px;
display: none;
z-index:1000;
}

#cashmere_submenu {
width:192px;
padding: 5px 0;
background: #c8912f;
position: absolute;
top: 146px;
left: 470px;
display: none;
z-index:1000;
}

#plus_submenu {
width:300px;
padding: 5px 0;
background: #c8912f;
position: absolute;
top: 146px;
left: 698px;
display: none;
z-index:1000;
}

#accessories_submenu {
width:158px;
padding: 5px 0;
background: #c8912f;
position: absolute;
top: 146px;
left: 840px;
display: none;
z-index:1000;
}

I am completely lost here. My page is http://myresearchfinder.com/dev/newchecktest.html

The first checkbox should spawn a menu and then the "breast" option could spawn another. It works flawless in IE9. But in FF 3.6 the first checkbox simply does nothing. In Chrome, it spawns the menu, but strangely the checkboxes in the next menu are not clickable. soooo weird. any ideas? this should be standard css/jquery.

hi how can i make somethin like the menus A,b, bla bla
one this site?

http://www.kanzenanimes.net/animes

Hey guys, I'd like to think this is fairly simple but unfortunately my knowldege of jquery is limited to using prebuilt scripts and changing a few variables to get what i need. I created a drop down menu with a slide down/up animation for submenus, which worked out just as I wanted. I ran into troubles though when trying to add a nested menu to the drop down, but with a slide animation going from left to right. I'm sure my explanation isn't very clear, so please take a look
http://www.palousehillscomputing.com...rop/index.html
The nested submenu I am speaking of should only open when hovering occurs on the 'Item 01' link, but as you can see it also opens when hovering over the buyers link. Secondly, my attempt to slide from left to right on this ul is not working. It seems to be sliding down even though this was not defined in the code. I've tried playing around with it for a while now and can't seem to figure this out so I'd appreciate if someone pointed me in the right direction. Thanks

Hi there,
this is my first post so forgive me if it is frustrating to those who try to help.

I am trying to create a side navigation menu that I want to just be a heading then once clicked it toggles on a list. Each item must be a link to a different webpage.
so far i have only managed to create a toggle list but cannot control each item to make it a unique link. I'll post the script I have so far;
--------------------------------------------------------------------------
<script language="javascript" type="text/javascript">

function list_colours()
{
var i=0;
var colours = new Array();

colours[0]=<a href="../Yellow Inventory.html"> Yellow </a>;
colours[1]=<a href="../Orange Inventory.html">"Orange"</a>;
colours[2]=<a href="../Pink Inventory.html">"Pink"</a>;
colours[3]=<a href="../Green Inventory.html">"Green"</a>;
colours[4]=<a href="../Blue Inventory.html">"Blue"</a>;
colours[5]=<a href="../Red Inventory.html">"Red"</a>;

var text="";

for(var i=0; i < colours.length; i++) {

text = text + colours[i] + "</a><br/>";
}

return text;


}

//creating a toggle menu

var onOff = "off"

function insertText()
{

if(onOff == "off")
{

var paragraph = document.getElementById("colour-items");
var colours_list = list_colours();
paragraph.innerHTML=colours_list;
onOff="on"
}

else
{
var paragraph = document.getElementById("colour-items");
var colours_list="";
paragraph.innerHTML=colours_list;
onOff="off"
}

}


</script>


<div id="left-container">

<div id="Nav-title"><h3 onmouseover="insertText();">Colours</h3></div>

<p id="colour-items"></p>




</div>
-------------------------------------------------------------------------

It is my guess that you make the array lists a list of a links, though I can't seem to find the correct way how.




The second problem I have is that I have a large number of images of products on my page.
I would like 4 headings that contain all my images, like the toggle menu above. so I click the heading and only those images come up.

I will be happy to answer any questions that may help.

Thanks all.

hi,

I am fairly new to jquery and would like som direction on how to complete this menu. I have a list which has 6 bg images which have on and active state images. these are are currenly changing when you hover using the a:hover css.

my question is i have a fairly large page and as you scroll down the menu follows the top of the screen but what i would like to happen is when the menu reaches a certain point on the page the menu item that it corrosponds to becomes active (changes to the on state bg image).

i have an idea that as you scroll down the page and you get to a certain position on the page you would remove the classes for all of them. use the selecter to select my id and add a special class with that specific bg image on it.

the only part i am struggling with is how would i determin how far down the page i am i know theres a function called .position() and you can use position.top. but not sure how i can use that to help me.

if you could point me in the direction or just a hint that would be really helpful.

thanks in advance

Hi guys

Im try to create a menu (http://valkesh.000space.com/) that will have 2 or 3 images loaded when hovering the item. As it currently is, I would like the first 20px to show green, and the rest to show Red. For now I am only using colors because eventually I would like to use images and have the Left and Right pics set at a fixed width and the center image growing appropriately.

Below is the script I am using for the entire menu.

Code:

<html>
<head>
	<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
    <script type="text/javascript">

//<![CDATA[
$(document).ready(function () {

	//Append a div with hover class to all the LI
	$('#navMenu li').append('<div class="left"><div class="right"></div></div>');
	$('#navMenu li').hover(
		//Mouseover, fadeIn the hidden hover class	
		function() {
			$(this).children('div').fadeIn('1000');	
		}, 
		//Mouseout, fadeOut the hover class
		function() {
			$(this).children('div').fadeOut('1000');	
	}).click (function () {
		//Add selected class if user clicked on it
		$(this).addClass('selected');
	});
});

//]]>

</script>

<style type="text/css">

#navMenu {
	margin:0; 
	padding:0;
	list-style:none;	
	font-family:arial;
	text-align:center;
	line-height:60px;
}

	#navMenu li 
	{
		background-color:Gray;
		float:left;	
		width:120px;							
		height:40px;
		line-height:40px;
        border:solid 1px black;
		position:relative;			
	}

	#navMenu li a {
		z-index:20;		
		display:block;	
		height:40px;
		position:relative;
		color:Black;
	}

 	#navMenu li .left {
		background-color:Green;		
		position:absolute;	
		width:20px;	
		height:40px;
		top:0px;
		z-index:0;		
		display:none;	
	}	
	
	 #navMenu li .right {
		background-color:Red;		
		position:absolute;	
		width:100px;	
		height:70px;
		top:0px;
		z-index:0;		
		display:none;	
	}

	#navMenu li.selected {
		background-color:Blue;
	}
</style>
</head>
<body>

<ul id="navMenu">
	<li><a href="#">Test 1</a></li>
	<li><a href="#">Test 2</a></li>
	<li><a href="#">Test 3</a></li>
</ul>


</body>
</html>

I would appreciate any help given!

Thanks

Code:

$(document).ready(function(){
$("#logo,#menu").hover(
function () {
$("#menu").stop().slideDown('fast');
},
function () {
$("#menu").stop().slideUp('slow');
}
);
});

This menu slides down on hover and slides up on un hover.
If I mouse back on either object while slideUp() is happening, the animation stops.
Then if i un hover / re-hover , the menu slides down to where i interrupted the initial slideUp().

I'd like for the menu to drop back down if I interrupt slideUp() or some type of solution. How can I do this?

need help adding a one second delay to a drop down menu. don't want people triggering it by accident:

http://www.corneliodesign.com/menu/

i used hoverIntent to delay it:

http://cherne.net/brian/resources/jq...verIntent.html

i got the script in the

http://www.corneliodesign.com/menu/s...hoverIntent.js

but it's not actually working for me.

please see if could look at code, tell what's wrong or gimme another options, would be extremely appreciative,

thanks,
julio