[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

How to get the Spry Menu Submenu to stay under the parent when on that catergory?

Posted on 2009-02-10
12
Medium Priority
?
1,948 Views
Last Modified: 2013-11-12
Hi,

I am wanting the submenus to stay as long as you are on the parent category for example

http://www.wireless.att.com/cell-pho...vice/index.jsp

You can click, shop and then cell phone plans and the navigation submenu will stay.

On my site if you click on the submenu item the submenu will disappear. I am using CSS and Spry Menu's.

I dont know if I am asking this right please let me know if you have any questions.

the website is http://63.215.214.20


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <!-- TemplateBeginEditable name="title" --><title>TransWorld Network</title> <!-- TemplateEndEditable -->
 <link rel="shortcut icon" href="../favicon.ico">
<style type="text/css"> 
<!-- 
body  {
	font: 8 pt Arial, Helvetica, sans-serif;
	background: #F0F1EB;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
.twoColFixLtHdr #container {
	width: 800px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #FFFFFF;
	margin: 0; /* the auto margins (in conjunction with a width) center the page */
	border: 2px solid #BEC1AA;
	position: absolute;
	left: 100px;
	margin-top: 25px;
	z-index: 1;
} 
.twoColFixLtHdr #header {
	padding: 0;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	font: 6pt;
	position: absolute;
	top: -13px;
	left: 0px;
	z-index: 2;
} 
.twoColFixLtHdr #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
	font: 6pt;
	top: -35px;
}
.twoColFixLtHdr #sidebar1 {
	float: left; /* since this element is floated, a width must be given */
	width: 357px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 15px 20px 15px 10px;
	position: absolute;
	left: 390px;
	top: 148px;
	height: 166px;
	z-index: 3;
	background-color: #FFFFFF;
}
.twoColFixLtHdr #mainContent {
	margin: 0; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 45px 0px 20px 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	font: 10pt Veranda, Arial, Helvetica, sans-serif;
	line-height: 17px;
} 
.twoColFixLtHdr #footer {
	padding: 5px 0 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#FFFFFF;
	font-size: 4pt;
	vertical-align: bottom;
	border-top: solid #EDEEE8 1px;
} 
.twoColFixLtHdr #footer p {
	margin: 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
	font-size: 4pt;
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
.headline {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14pt;
	font-weight: bold;
	color: #929871;
}
--> 
</style>
<!--[if IE 5]>
<style type="SpryMenuBarHorizontal.css"> 
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css"> 
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible {background-color: white;}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css"> 
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]--> 
 
<style type="text/css">
<!--
#apDiv1 {
	position:absolute;
	top:41px;
	width:800px;
	height:auto;
	z-index:1000;
	left: 29px;
}
-->
</style>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv2 {
	position:absolute;
	width:362px;
	height:18px;
	z-index:2;
	top: 148px;
	left: -1px;
}
.style5 {font-size: 7pt}
.subheadline {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-style: italic;
	color: #20345A;
}
#apDiv3 {
	position:absolute;
	width:339px;
	height:231px;
	z-index:1001;
	left: 155px;
	top: 265px;
}
.box {
	height: 133px;
	position: absolute;
	left: 115px;
	top: 451px;
	width: 552px;
	z-index: 5;
}
#apDiv4 {	position:absolute;
	width:361px;
	height:213px;
	z-index:1;
	left: 3px;
	top: 158px;
}
#swoosh {
	height: 124px;
	width: 793px;
	position: absolute;
	left: -407px;
	top: 187px;
	z-index: 4;
}
#apDiv5 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:7;
	top: 331px;
	left: 0px;
}
.box1 {
	height: 145px;
	position: absolute;
	left: 120px;
	top: 449px;
	width: 552px;
	z-index: 8;
}
#apDiv6 {
	position:absolute;
	width:427px;
	height:114px;
	z-index:9;
	left: 27px;
	top: 403px;
	padding-bottom: 20px;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
.style7 {font-size: 7pt; font-family: Verdana, Arial, Helvetica, sans-serif; }
#apDiv7 {
	position:absolute;
	width:793px;
	height:32px;
	z-index:1001;
	top: 0px;
	left: -41px;
}
-->
</style>
<script type="text/javascript" src="../vwd_scripts/curvy/vwd_curvycorners.js"></script>
<script type="text/javascript">
<!--
gCurvyCorners[0]="container,15,15,15,15,1,0";
//-->
</script>
<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv8 {
	position:absolute;
	width:495px;
	height:61px;
	z-index:1;
	left: 11px;
	top: 79px;
}
-->
</style>
</head>
 
<body class="twoColFixLtHdr">
</div>
<div id="container">
  <div id="header">
    <h1><img src="../Top-banner-no-text.png" width="800" height="135" /></h1>
    <div id="apDiv8">
      <div id="apDiv7">
        <div id="apDiv1">
          <ul id="MenuBar1" class="MenuBarHorizontal">
            <li><a href="../index.htm">Home</a></li>
            <li><a class="MenuBarItemSubmenu" href="#">About Us</a>
                <ul>
                  <li><a href="../Promise.html"><span>Our Promise</span></a></li>
                  <li><a href="../history.html"><span>TWN History</span></a></li>
                  <li><a href="../careers.html"><span>Careers at TWN</span></a></li>
                  <li><a href="../news.html"><span>News at TWN</span></a></li>
                  <li><a href="#"><span>Contact Us</span></a></li>
                </ul>
            </li>
            <li><a href="#" class="MenuBarItemSubmenu">Products</a>
                <ul>
                  <li><a href="../Wi-Power.html"><span>Wi-Power High-Speed Internet</span></a></li>
                  <li><a href="../VoIP.html"><span>Wi-Power Digital Phone</span></a></li>
                  <li><a href="../LongDistance.html"><span>Long Distance</span></a></li>
                  <li><a href="../dialup.html"><span>Dial-Up</span></a></li>
                  <li><a href="../audioweb.html"><span>Audio/Web Conferencing</span></a></li>
                  <li><a href="../CallingCard.html"><span>Calling Cards</span></a></li>
                </ul>
            </li>
            <li><a class="MenuBarItemSubmenu" href="#">Partnership Program</a>
                <ul>
                  <li><a href="../Partner.html"><span>Become a Partner</span></a> </li>
                  <li><a href="../Current.html"><span>Current Partners</span></a> </li>
                </ul>
            </li>
            <li class="MenuBarHorizontal"><a href="#" class="MenuBarItemSubmenu">Customer Support</a>
                <ul>
                  <li><a href="../Contact.html"><span>Contact Us</span></a></li>
                  <li><a href="http://www.wi-power.com/faq.htm"><span>FAQs</span></a></li>
                  <li><a href="../techsupport.html"><span>Technical Support</span></a></li>
                  <li><a href="http://www.epowerc.com/ebill/twn/index.html"><span>View Your Bill</span></a></li>
                  <li><a href="../RequestaCall.html"><span>Request a Call</span></a></li>
                  <li><a href="../Moving.html"><span>Moving Service</span></a></li>
                </ul>
            </li>
            <li><a href="../Contact.html">Contact Us</a></li>
          </ul>
        </div>
      </div>
    </div>
  <!-- end #header --></div>
  <!-- TemplateBeginEditable name="body" -->
  <div id="mainContent">
    <h1>&nbsp;</h1>
    <div id="apDiv2">
      <script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','361','height','216','wmode','transparent','...','...','movie','../Home Page Images 2','quality','high' ); //end AC code
    </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="361" height="216">
        <param name="movie" value="../Home Page Images 2.swf" />
        <param name="quality" value="high" />
        <param name="WMODE" value="transparent" />
		<embed wmode="transparent" ...> 
        <embed src="../Home Page Images 2.swf" width="361" height="216" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
      </object>
      </noscript></div>
    <h1>&nbsp;</h1>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p><br />
 
    <div id="sidebar1">
      <p align="justify">TransWorld Network, Corp. partners with our countrys rural electric cooperatives to provide communities with products such as high-speed Internet, dial-up Internet, long distance and calling card services. <br />
        <br />
      Our goal is to bring affordable, reliable communication solutions to areas that are currently underserved by technology. </p>
      <div id="#swoosh"></div>
      <!-- end #mainContent -->
    </div>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <div id="apDiv5"><img src="../swoosh2.png" alt="" width="800" height="124" /></div>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <div id="apDiv6"><img src="../boxes.jpg" width="545" height="110" border="0" usemap="#Map" />
<map name="Map" id="Map">
  <area shape="rect" coords="387,38,431,54" href="http://www.epowerc.com/ebill/twn/index.html" />
  <area shape="rect" coords="389,57,490,70" href="#" /><area shape="rect" coords="388,75,457,84" href="../contact.html" /><area shape="rect" coords="198,39,259,53" href="../history.html" />
  <area shape="rect" coords="198,58,314,70" href="../current.html" />
  <area shape="rect" coords="198,73,330,87" href="../partner.html" />
<area shape="rect" coords="6,37,166,53" href="../Wi-Power.html" /><area shape="rect" coords="6,57,137,70" href="../VoIP.html" /><area shape="rect" coords="7,76,89,88" href="../LongDistance.html" />
</map><br />
    </div>
    <p><br />
  </p>
  </div>
  <!-- TemplateEndEditable -->
  <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
    <div id="footer">
      <ul id="MenuBar2" class="MenuBarHorizontal">
	  <li><a href="../index.htm"><span><span>Home</span></span></a> </li>
	  <li><a href="../sitemap.html"><span><span>Site Map</span></span></a></li>
	  <li><a href="../privacy.html"><span><span>Privacy Policy</span></span></a>      </li>
	  <li><a href="../terms.html"><span><span>Terms and Conditions</span></span></a> </li>
	  <li><a href="../careers.html"><span><span class="style5">Careers</span></span></a></li>
	  <li><a href="../feedback.html"><span><span>Site Feed Back</span></span></a></li>
	  <li>
	    <div align="center"><a href="../tariffs.html"><span><span>Tariffs</span></span></a></div>
	  </li>
  </ul>
</div>
    <div align="center"><span class="style7">Copyright 2002-2009</span> </div>
<!-- end #container --></div>
 
<p>&nbsp;</p>
<p>&nbsp; </p>
<p>&nbsp;</p>
<p>&nbsp; </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<script type="text/javascript">
<!--
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>

Open in new window

0
Comment
Question by:KDubDesign
  • 6
  • 6
12 Comments
 

Author Comment

by:KDubDesign
ID: 23599768
Here is the css for the menu
@charset "UTF-8";
 
/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */
 
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
 
/*******************************************************************************
 
 LAYOUT INFORMATION: describes box model, positioning, z-order
 
 *******************************************************************************/
 
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
	margin: 0px;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	width: auto;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
	z-index: 1000;
	font-size: 8pt;
	font-family: Arial, Helvetica, sans-serif;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	position: relative;
	text-align: left;
	cursor: pointer;
	width: auto;
	float: left;
	border-right-style: solid;
	border-right-color: #A4B9DF;
	border-right-width: 1px;
}
ul.MenuBarHorizontal li li {
	width: auto;
	border-right-style: solid;
	border-right-color: #BEC1AA;
	border-right-width: 1px;
	height: auto;
	padding-top: 0px;
	vertical-align: middle;
}
ul.MenuBarHorizontal  li  li li {
	width: auto;
	border-right-style: solid;
	border-right-color: #BEC1AA;
	border-right-width: 1px;
	height: auto;
	padding-top: 0px;
	vertical-align: middle;
	margin-top: 5px;
}
 
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	z-index: 1020;
	cursor: default;
	width: 350px;
	position: absolute;
	left: -1500px;
	height: auto;
	top: 20px;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
	left: 3px;
	height: 40px;
}
ul.MenuBarHorizontal /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
 ul ul.MenuBarSubmenuVisible
{
	left: -100px;
	height: auto;
	background-color: #FFFFFF;
	top: 0px;
	margin-top: 15px;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
	width: auto;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
	position: absolute;
	margin: 0;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
	left: -8px;
	top: 1px;
}
 
/*******************************************************************************
 
 DESIGN INFORMATION: describes color scheme, borders, fonts
 
 *******************************************************************************/
 
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
	margin-top: 0px;
 
 
 
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	padding: 0;
	color: #FFFFFF;
	text-decoration: none;
	vertical-align: middle;
	padding-right: 0.25em;
	padding-left: 0.25em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 8pt;
}
 
/*******************************************************************************
 
 SUBMENU INDICATION: styles if there is a submenu under a given menu item
 
 *******************************************************************************/
 
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
ul.MenuBarHorizontal /* Menu items are a light gray block with padding and no text decoration */
 a span
{
	display: block;
	cursor: pointer;
	color: #20345A;
	text-decoration: none;
	vertical-align: middle;
	background-color: #FFFFFF;
	height: auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	left: -100px;
}
ul.MenuBarHorizontal  /* Menu items are a light gray block with padding and no text decoration */
a  span span
{
	display: block;
	cursor: pointer;
	color: #20345A;
	text-decoration: none;
	vertical-align: bottom;
	height: auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 7pt;
}
 
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
	color: #929871;
}
ul.MenuBarHorizontal /* Menu items that have mouse over or focus have a blue background and white text */
 a:hover span,ul.MenuBarHorizontal  a:focus span
{
	color: #929871;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
	color: #929871;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
 
/*******************************************************************************
 
 BROWSER HACKS: the hacks below should not be changed unless you are an expert
 
 *******************************************************************************/
 
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
	position: absolute;
	z-index: 1010;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
	ul.MenuBarHorizontal li.MenuBarItemIE
	{
	display: inline;
	f\loat: left;
	background: transparent;
	}
}
ul.MenuBarHorizontal  li li li.MenuBarItemIE
	{
	display: inline;
	f\loat: left;
	background: transparent;
	}
ul.MenuBarHorizontal  li li.MenuBarItemIE
	{
	display: inline;
	f\loat: left;
	background: transparent;
	}

Open in new window

0
 

Author Comment

by:KDubDesign
ID: 23599778
And the js for the menu, thanks for all your help in advance
/* SpryMenuBar.js - Revision: Spry Preview Release 1.4 */
 
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//
//   * Redistributions of source code must retain the above copyright notice,
//     this list of conditions and the following disclaimer.
//   * Redistributions in binary form must reproduce the above copyright notice,
//     this list of conditions and the following disclaimer in the documentation
//     and/or other materials provided with the distribution.
//   * Neither the name of Adobe Systems Incorporated nor the names of its
//     contributors may be used to endorse or promote products derived from this
//     software without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
 
/*******************************************************************************
 
 SpryMenuBar.js
 This file handles the JavaScript for Spry Menu Bar.  You should have no need
 to edit this file.  Some highlights of the MenuBar object is that timers are
 used to keep submenus from showing up until the user has hovered over the parent
 menu item for some time, as well as a timer for when they leave a submenu to keep
 showing that submenu until the timer fires.
 
 *******************************************************************************/
 
var Spry;
if(!Spry)
{
	Spry = {};
}
if(!Spry.Widget)
{
	Spry.Widget = {};
}
 
// Constructor for Menu Bar
// element should be an ID of an unordered list (<ul> tag)
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
Spry.Widget.MenuBar = function(element, opts)
{
	this.init(element, opts);
};
 
Spry.Widget.MenuBar.prototype.init = function(element, opts)
{
	this.element = this.getElement(element);
 
	// represents the current (sub)menu we are operating on
	this.currMenu = null;
 
	var isie = (typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE');
	if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (isie && typeof document.uniqueID == 'undefined'))
	{
		// bail on older unsupported browsers
		return;
	}
 
	// load hover images now
	if(opts)
	{
		for(var k in opts)
		{
			var rollover = new Image;
			rollover.src = opts[k];
		}
	}
 
	if(this.element)
	{
		this.currMenu = this.element;
		var items = this.element.getElementsByTagName('li');
		for(var i=0; i<items.length; i++)
		{
			this.initialize(items[i], element, isie);
			if(isie)
			{
				this.addClassName(items[i], "MenuBarItemIE");
				items[i].style.position = "static";
			}
		}
		if(isie)
		{
			if(this.hasClassName(this.element, "MenuBarVertical"))
			{
				this.element.style.position = "relative";
			}
			var linkitems = this.element.getElementsByTagName('a');
			for(var i=0; i<linkitems.length; i++)
			{
				linkitems[i].style.position = "relative";
			}
		}
	}
};
 
Spry.Widget.MenuBar.prototype.getElement = function(ele)
{
	if (ele && typeof ele == "string")
		return document.getElementById(ele);
	return ele;
};
 
Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
{
	if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
	{
		return false;
	}
	return true;
};
 
Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
{
	if (!ele || !className || this.hasClassName(ele, className))
		return;
	ele.className += (ele.className ? " " : "") + className;
};
 
Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
{
	if (!ele || !className || !this.hasClassName(ele, className))
		return;
	ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
};
 
// addEventListener for Menu Bar
// attach an event to a tag without creating obtrusive HTML code
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
{
	try
	{
		if (element.addEventListener)
		{
			element.addEventListener(eventType, handler, capture);
		}
		else if (element.attachEvent)
		{
			element.attachEvent('on' + eventType, handler);
		}
	}
	catch (e) {}
};
 
// createIframeLayer for Menu Bar
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
{
	var layer = document.createElement('iframe');
	layer.tabIndex = '-1';
	layer.src = 'javascript:false;';
	menu.parentNode.appendChild(layer);
	
	layer.style.left = menu.offsetLeft + 'px';
	layer.style.top = menu.offsetTop + 'px';
	layer.style.width = menu.offsetWidth + 'px';
	layer.style.height = menu.offsetHeight + 'px';
};
 
// removeIframeLayer for Menu Bar
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
Spry.Widget.MenuBar.prototype.removeIframeLayer =  function(menu)
{
	var layers = menu.parentNode.getElementsByTagName('iframe');
	while(layers.length > 0)
	{
		layers[0].parentNode.removeChild(layers[0]);
	}
};
 
// clearMenus for Menu Bar
// root is the top level unordered list (<ul> tag)
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
{
	var menus = root.getElementsByTagName('ul');
	for(var i=0; i<menus.length; i++)
	{
		this.hideSubmenu(menus[i]);
	}
	this.removeClassName(this.element, "MenuBarActive");
};
 
// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
{
	return (navigator.vendor == 'Apple Computer, Inc.' && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget)));
};
 
// showSubmenu for Menu Bar
// set the proper CSS class on this menu to show it
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
{
	if(this.currMenu)
	{
		this.clearMenus(this.currMenu);
		this.currMenu = null;
	}
	
	if(menu)
	{
		this.addClassName(menu, "MenuBarSubmenuVisible");
		if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
		{
			if(!this.hasClassName(this.element, "MenuBarHorizontal") || menu.parentNode.parentNode != this.element)
			{
				menu.style.top = menu.parentNode.offsetTop + 'px';
			}
		}
		if(typeof document.uniqueID != "undefined")
		{
			this.createIframeLayer(menu);
		}
	}
	this.addClassName(this.element, "MenuBarActive");
};
 
// hideSubmenu for Menu Bar
// remove the proper CSS class on this menu to hide it
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
{
	if(menu)
	{
		this.removeClassName(menu, "MenuBarSubmenuVisible");
		if(typeof document.all != 'undefined' && typeof window.opera == 'undefined' && navigator.vendor != 'KDE')
		{
			menu.style.top = '';
			menu.style.left = '';
		}
		this.removeIframeLayer(menu);
	}
};
 
// initialize for Menu Bar
// create event listeners for the Menu Bar widget so we can properly
// show and hide submenus
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element, isie)
{
	var opentime, closetime;
	var link = listitem.getElementsByTagName('a')[0];
	var submenus = listitem.getElementsByTagName('ul');
	var menu = (submenus.length > 0 ? submenus[0] : null);
 
	var hasSubMenu = false;
	if(menu)
	{
		this.addClassName(link, "MenuBarItemSubmenu");
		hasSubMenu = true;
	}
 
	if(!isie)
	{
		// define a simple function that comes standard in IE to determine
		// if a node is within another node
		listitem.contains = function(testNode)
		{
			// this refers to the list item
			if(testNode == null)
			{
				return false;
			}
			if(testNode == this)
			{
				return true;
			}
			else
			{
				return this.contains(testNode.parentNode);
			}
		};
	}
	
	// need to save this for scope further down
	var self = this;
 
	this.addEventListener(listitem, 'mouseover', function(e)
	{
		if(self.bubbledTextEvent())
		{
			// ignore bubbled text events
			return;
		}
		clearTimeout(closetime);
		if(self.currMenu == listitem)
		{
			self.currMenu = null;
		}
		// show menu highlighting
		self.addClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");
		if(menu && !self.hasClassName(menu, "MenuBarSubmenuVisible"))
		{
			opentime = window.setTimeout(function(){self.showSubmenu(menu);}, 250);
		}
	}, false);
 
	this.addEventListener(listitem, 'mouseout', function(e)
	{
		if(self.bubbledTextEvent())
		{
			// ignore bubbled text events
			return;
		}
 
		var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
		if(!listitem.contains(related))
		{
			clearTimeout(opentime);
			self.currMenu = listitem;
 
			// remove menu highlighting
			self.removeClassName(link, hasSubMenu ? "MenuBarItemSubmenuHover" : "MenuBarItemHover");
			if(menu)
			{
				closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, 600);
			}
		}
	}, false);
};

Open in new window

0
 
LVL 30

Expert Comment

by:LZ1
ID: 23600650
The two links that you gave are not working.  However, I think I know what your talking about.  For what your talking about, Spry cannot do.  Spry is not dynamic like what your thinking.  It would have to be a Javascript solution.
0
NFR key for Veeam Backup for Microsoft Office 365

Veeam is happy to provide a free NFR license (for 1 year, up to 10 users). This license allows for the non‑production use of Veeam Backup for Microsoft Office 365 in your home lab without any feature limitations.

 

Author Comment

by:KDubDesign
ID: 23600720
Sorry here are the links

http://www.wireless.att.com/cell-phone-service/index.jsp

http://63.215.214.20

twncorp
transworldmark
0
 
LVL 30

Expert Comment

by:LZ1
ID: 23601090
Ok, much better.  When viewing their source code, it looks like their using a java script menu.  But it still would have to be a static type menu.  
One solution you may be able to explore would to keep the main menu and then on their respective pages, manually (or dynamically depending on your skills) include the other part of the menu your looking for.
0
 

Author Comment

by:KDubDesign
ID: 23601690
Im sorry I am really new to this.  I have always been a print designer and I am trying to learn as I go on this website.  This is the first site I have really done.  Do you mind just explaining alittle more in depth what you mean by that.
0
 
LVL 30

Assisted Solution

by:LZ1
LZ1 earned 1600 total points
ID: 23601800
The more I think about it though,  the more you would need a Javascript based solution.  I'm not to familiar with Java, but what would happen is this:
When you click on one of the pages that is associated with About us, you would be taken to that page and the About us submenu would continue to be displayed until you hovered over another part of the menu.
0
 

Author Comment

by:KDubDesign
ID: 23602512
Thanks for your help hopefully I can figure something out, I am not similar with java either.
0
 
LVL 30

Assisted Solution

by:LZ1
LZ1 earned 1600 total points
ID: 23603131
Good luck to you. For reference though here are some sites that may be useful:
http://dhtml-menu.com/
http://www.dynamicdrive.com/
http://www.sothink.com/product/dhtmlmenu/index.htm  
0
 

Accepted Solution

by:
KDubDesign earned 0 total points
ID: 23603191
thanks!
0
 
LVL 30

Expert Comment

by:LZ1
ID: 23621511
KDubDesign:
You should either award points if your question was answered
or request to have a mod close the question and refund your points if your question was not answered.  
Just a friendly reminder/follow-up.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 23650116
I wanted to suggest one more item that may end up helping KDubDesign's problem:
http://www.cssmenus.co.uk/dropline.html  
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When setting up new project requests for our site, one of the most powerful tools our team has available to use is Axure (http://www.axure.com/). It’s a tool for creating software and web prototypes that can function and interact as if it were the a…
A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
The purpose of this video is to demonstrate how to integrate Mailchimp with Facebook. This will be demonstrated using a Windows 8 PC. Mailchimp and Facebook will be used. Log into your Mailchimp account. : Click on your name. Go to Account Setti…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses
Course of the Month17 days, 22 hours left to enroll

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question