Menus hover
Carl, On your site http://htmldb.oracle.com/pls/otn/f?p=11933:22:10847261111132066236::NO:RP::,
how do you get the sub-menus to be visible on pointing the mouse or hovering the mouse over the menu item. I tried doing with templates Theme4 and had to click on the menu item to view the sub-menus instead of just doing a mouse hover. I guess I have to modify the template to get this functionality. Just wondering if there is something already available that I can use.
Thanks
Satish
Hello,
Just change the attribute onclick="...... to onmouseover="
You'll want to change everywhere in the list template but thats all it takes.
Carl
Similar Messages
-
Firefox 5.0 gave a BSOD when I right clicked tabs bar (in classic firefox mode) . Was using adblock plus, autofill forms,download statusbar, downloadhelper, greasemonkey, noscript,java console and reload every add-on. I removed reload every just in case.
If in doubt, do the update this way:
If you have the orange Firefox button (abbreviated menus), hover your mouse over the triangle to the right of Help and choose About Firefox. Then use the Check for Updates button.
If you have the classic menu bar, Help > About Firefox. Then use the Check for Updates button.
By the way, the update is Firefox 5.0. There is no intermediate update between 4.0.1 and 5.0. (Welcome to the new world of rapidly escalating version numbers.) -
Spry Rollover Menus Do not Retract or Hover
Here's my code and I will attach a screenshot:
<html>
<head>
<meta name="verify-v1" content="7UOb7pMZvRsNAeg3bRekSJNhH/EMwsI9CcQBQKDS/3I=" />
<title>Total Life Counseling Orlando Winter Park Clermont</title>
<meta name="KEYWORDS" content="Orlando Winter Park & Clermont family counseling individual group children teenagers adult Skype Online Phone Portuguese Espanol Spanish Portuguese">
<meta name="DESCRIPTION" content="Total Life Counseling Center offers a full range of individual, family, group, phone, online, Skype counseling and therapy services for children, teenagers, adolescents and adults in Orlando, Winter Park, Metro West, East Orlando and Clermont Florida using a relational non-judgmental and non-threatening approach. Total Life Center consists of competent masters level therapists, Espanol counselors, Portuguese Counselors, Licensed Mental Health Counselors, Business Coaches, Image Enhancement Coaches and Masters Level interns who provide counseling for emotional, mental, physical and spiritual care including marriage, the individual, the family, substance abuse and more. Our offices serve College Park, Dr. Phillips, Pine Castle, Conway, Windermere, Winter Garden, Ocoee, Oviedo, Longwood, Altamonte Springs, Casselberry, Lake Mary, Sanford, Deland, De Bary, Deltona, Daytona, New Smyrna, Cocoa, Titusville, Merritt Island, Kissimmee, St. Cloud, Celebration, Mt. Dora, the Villages and the tri-cities of Tavares, Eustis and Leesburg.">
<LINK REV="Made" HREF="http://www.totallifecounseling.com">
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script src="javascript/special_functions.js" language="JavaScript" type="text/javascript"></script>
<link rel="stylesheet" type=text/css href="styles/stylesheet.css">
<script type="text/javascript" src="flashobject.js"></script>
<link rel="stylesheet" type="text/css" href="styles/anylink.css" />
<script type="text/javascript" src="javascript/anylink.js">
* AnyLink CSS Menu script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
</script>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
_uacct = "UA-1922062-1";
urchinTracker();
</script>
<meta name="Microsoft Theme" content="none">
<style type="text/css">
<!--
.style1 {color: #FF0000}
.style12 {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
.style17 {
color: #6CA7C2;
font-weight: bold;
-->
</style>
<style>
<!--
#blog-header h1 {
font-size: 24px;
text-align: left;
padding: 15px 20px 0 20px;
margin: 0;
background-image: url(http://www.blogblog.com/moto_son/topper.gif);
background-repeat: repeat-x;
background-position: top left;
#blog-title {
margin:0;
padding:10px 30px 5px;
font-size:200%;
line-height:1.2em;
div.Section1
{page:Section1;}
span.EmailStyle15
{font-family:"Arial","sans-serif";
color:#993366}
.__feedview__mainbody { margin-right: 0px }
#main {
margin:0;
padding:15px 20px;
.post {
margin:0 0 2em;
.post h3 {
margin:0 0 .25em;
line-height: 1.4em;
font-weight: bold;
font-size: 150%;
color:#8cdfff;
.style19 {color: #83B5CC}
.style23 {font-size: 18px}
.style25 {
font-size: 12pt;
font-family: Tahoma;
.style28 {font-size: 11px}
.style29 {
font-size: 10pt
.style22 { color: #77ADC6;
font-weight: bold;
.style31 {font-size: 12pt}
.style32 {
font-weight: bold;
font-family: Tahoma;
font-size: 14pt;
.style33 {color: #6CA7C2}
.style10 { font-size: 16pt;
font-weight: bold;
.style34 {font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
.style35 {font-size: 14pt}
.style36 {
font-size: 10pt;
font-family: Arial, Helvetica, sans-serif;
.style37 {font-family: Arial, Helvetica, sans-serif}
-->
</style>
<script src="../Scripts/AC_ActiveX.js" type="text/javascript"></script>
<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
</head>
<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0" class="home-bg">
<div style="position: absolute; width: 100px; height: 100px; z-index: 2; left: -500; top: -500" id="layer2">
<img border="0" src="flash/images/image1.jpg" width="2" height="1"><img border="0" src="flash/images/image2.jpg" width="2" height="1"><img border="0" src="flash/images/image3.jpg" width="2" height="1"><img border="0" src="flash/images/image4.jpg" width="2" height="1"><img border="0" src="flash/images/top-right.jpg" width="2" height="1"></div>
<table width="106%" height="600" border="0" cellpadding="0" cellspacing="0" class="home-bg-l1">
<tr>
<td width="217" class="home-bg-l1"> </td>
<td width="893" valign="top"><table width="828" height="595" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="532" valign="top"><table width="828" height="540" border="0" cellpadding="0" cellspacing="0" class="home-cbg2">
<tr>
<td width="30" class="home-bg-l2"> </td>
<td width="768" valign="top"><table width="768" height="532" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="307" valign="top" class="home-t1">
<div style="position: absolute; width: 768; height: 24; z-index: 1; top: 25" id="layer1" align="right">
<div id="horizontalMenu">
<ul id="MenuBar3" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="contact_us.htm">Contact Us</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="services.htm">Services</a></li>
<li><a class="MenuBarItemSubmenu" href="counselors.htm">Counselors</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="http://www.totallifecounseling.com/shop" target="_blank">Products</a></li>
<li><a href="forms.htm">Forms</a></li>
<li><a href="#">Court Ordered</a></li>
<li><a href="camps.htm">Camps</a></li>
</ul>
</div>
<!-- End HorizontalMenu Scripting -->
<div id="header">
<script type="text/javascript">
//var fo = new FlashObject("flash/HorizontalMenu10.swf", "header", "768", "307", "6");
//fo.addParam("wmode", "transparent");
//fo.addParam("base", "flash");
//fo.write("header");
</script>
</div>
<!-- End Header Scripting -->
<!-- #EndLibraryItem --></td>
</tr>
<tr>
<td valign="top" class="home-c"><table width="768" height="235" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="11"> </td>
<td width="576" valign="top">
<table border="0" style="border-collapse: collapse" width="100%" id="table45" cellpadding="0" height="100%">
<tr>
<td width="176" valign="top" bgcolor="#F2F4F5">
<table width="100%" border="0" cellpadding="2" cellspacing="2" id="table46" style="border-collapse: collapse">
<tr>
<td height="31" bgcolor="#2A6180"><p align="center"><A href="http://totallifecounseling.blogspot.com/"><strong>Articles & Blogs</strong></A></p></td>
</tr>
<tr>
<td height="1328" valign="top" bgcolor="#FFFFFF">
<!-- BEGIN: Constant Contact Stylish Email Newsletter Form -->
<div align="center">
<div style="width:160; background-color: #ffffff;">
<p align="center" class="style12"></strong>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=xa-4a9ae1e727d21f0f"></script>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 15,
interval: 6000,
width: 170,
height: 1326,
theme: {
shell: {
background: '#F2F4F5',
color: '#6CA7C2'
tweets: {
background: '#ffffff',
color: '#2a6180',
links: '#2a6180'
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: false,
timestamp: false,
avatars: false,
behavior: 'all'
}).render().setUser('TotalLife').start();
</script>
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=xa-4a9ae1e727d21f0f"><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a>
<form name="ccoptin" action="http://visitor.constantcontact.com/d.jsp" target="_blank" method="post" style="margin-bottom:3;">
<div align="center"><span class="style25"><font style="font-weight: bold; font-family:Georgia,'Times New Roman',Times,serif; font-size:12px; color:#006699;">Read E-Newsletter</font></span>
<input type="text" name="ea" size="20" value="" style="font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:10px; border:1px solid #999999;">
<input type="submit" name="go" value="GO" class="submit" style="font-family:Verdana,Arial,Helvetica,sans-serif; font-size:10px;">
<input type="hidden" name="m" value="1101177120388">
<input type="hidden" name="p" value="oi">
</div>
</form>
</div>
</div>
<!-- END: Constant Contact Stylish Email Newsletter Form -->
<!-- BEGIN: SafeSubscribe -->
<!-- END: SafeSubscribe -->
<!-- BEGIN: Email Marketing you can trust -->
<!-- END: Email Marketing you can trust -->
<p align="center" class="messageBoxContent style19"><strong><A href="resources.htm" class="style1 style25 style31"><font color="#FF0000">Recommended Books, Vitamins & Resources</font></A></strong></p>
</td>
</tr>
</table>
<hr color="#2A6180" size="1"> </td>
<td width="2" valign="top"> </td>
<td width="435" align="center" valign="top" bgcolor="#F3F5F5" class="boxText3"><p align="center"><strong>Counseling in Orlando, Winter Park, East Orlando, Clermont Florida and Central Florida</strong>
<p>TLC offers a "full" range of Individual, Family, & Group Counseling services for Children, Teenagers, Adolescents, and Adults. Our skilled counselors are Relational, Approachable and Specialists providing therapy services in the Central Florida area including: Orlando, Winter Park, Metro West, East Orlando, and Clermont Florida.</p>
<p align="center"><strong><span class="style24"><span class="style32"><font color="#FF0000">Complimentary</font> <span class="style1">15 Minute Phone Consultation (407) 248-0030</span></span></p>
<script type="text/javascript">
AC_AX_RunContent( 'width','425','height','344','src','http://www.youtube.com/v/sPatyytF2Ws&hl=en&fs=1&autoplay=1','type','application/x-shockwav e-flash','allowscriptaccess','always','allowfullscreen','true','movie','http://www.youtube .com/v/sPatyytF2Ws&hl=en&fs=1&autoplay=1' ); //end AC code
</script><noscript><object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/sPatyytF2Ws&hl=en&fs=1&autoplay=1">
</param>
<param name="allowFullScreen" value="true">
</param>
<param name="allowscriptaccess" value="always">
</param>
<embed src="http://www.youtube.com/v/sPatyytF2Ws&hl=en&fs=1&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object></noscript>
<p align="center" class="boxText2"><strong><a href="espanol.htm" title="Orlando, Winter Park, Altamonte, Lake Mary & South West Orlando" target="_blank"><a href="espanol.htm">Español Consejero</a> or <a href="portuguese.htm" target="_blank">Português Conselheiro</a></strong></p>
<p align="center"><span class="boxText3"><a href="testimonials.htm"><strong>Testimonial </strong></a></b>- "He is doing so well! We are continuing with the diet changes and vitamins and his attitude is so much better.
You were right - kids don't see you for very long We are so grateful for your help. We were in a bad place before we saw you and I am really amazed at the difference." </span></p>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a href="http://www.addthis.com/bookmark.php?v=250&pub=xa-4a9b0aa77cca0416" class="addthis_button_compact">Share</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_myspace"></a>
<a class="addthis_button_google"></a>
<a class="addthis_button_twitter"></a></div>
<div align="center">
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=xa-4a9b0aa77cca0416"></script>
<!-- AddThis Button END -->
</div>
<p><A href="camps.htm" target="_blank"><span class="style1"><blink>Channel 13 News</blink></span> interviews Jim West, president of Total Life Counseling on how our Orlando area Camps Helped a Student with Making Friends.</A></p>
<p align="left">Orlando Mental Health <a href="counselors.htm" target="_parent">Counselors</a> specializing in all areas of therapy. Call us today. We can help!
<HR>
<p align="left"><strong>Services:</strong> Total Life Counseling Center consists of Licensed Counselors, Masters Level Therapists, <a href="espanol.htm" title="Espanol Counseling Services in Orlando & Winter Park Florida" target="_blank"><strong>Espanol Counselors</strong></a>, <a href="portuguese.htm" target="_blank"><strong>Portuguese Counselors</strong></a>, Licensed Mental Health Counselors, <a href="corporate.htm" target="_blank"><strong>Business Coaches</strong></a>, <a href="image.htm" target="_blank"><strong>Image Enhancement Coaches</strong></a> who provide counseling for emotional, mental, physical and spiritual care including marriage, individual, family, substance abuse and more. TLC provides services for all ages in the Orlando Central Florida area and can handle almost any issue:<br>
<TABLE id="table49" width="100%" border="0">
<TBODY>
<TR>
<TD height="23" align="middle"><div align="left"><A href="adhd.htm" target="_parent">ADD or ADHD </A></div></TD>
<TD align="middle"><div align="left"><A href="marriage.htm" target="_parent">Marriage</A></div></TD>
<TD align="middle"><div align="left"><A href="sexualabuse.htm" target="_parent">Sexual Abuse</A></div></TD>
</TR>
<TR>
<TD height="22" align="middle"><div align="left"><A href="depression.htm" target="_parent">Depression</A></div></TD>
<TD align="middle"><div align="left"><A href="anger.htm" target="_parent">Anger Management</A></div></TD>
<TD align="middle"><div align="left"><A href="anxiety.htm" target="_parent">Anxiety</A></div></TD>
</TR>
<TR>
<TD height="39" align="middle"><div align="left"><A href="socialskillsgroups.htm" target="_parent">Social Skills Groups</A></div></TD>
<TD align="middle"><div align="left">Mood Disorders or Bi-Polar</div></TD>
<TD align="middle"><div align="left"><A href="selfharm.htm" target="_parent">Self-injurious Behavior</A></div></TD>
</TR>
<TR>
<TD height="23" align="middle"><div align="left"><A href="premarital.htm" target="_parent">Pre-marital</A></div></TD>
<TD align="middle"><div align="left">Eating Disorders</div></TD>
<TD align="middle"><div align="left">Women's Issues</div></TD>
</TR>
<TR>
<TD align="middle"><div align="left"><A href="odd.htm" target="_parent">Oppositional Defiance Disorder</A></div></TD>
<TD align="middle"><div align="left"><A href="selfharm.htm" target="_parent">Self-Mutilation or Self Harm</A></div></TD>
<TD align="middle"><div align="left"><a href="disabled.htm">Mentally Challenged</a></div></TD>
</TR>
<TR>
<TD height="23" align="middle"><div align="left"><A href="janie.htm" target="_parent">Codependency</A></div></TD>
<TD align="middle"><div align="left"><A href="coaching.htm" target="_parent">Career Assessment</A></div></TD>
<TD align="middle"><div align="left"><A href="deb.htm" target="_blank">Gender Identity</A></div></TD>
</TR>
<TR>
<TD height="55" align="middle"><div align="left"><a href="ptsd.htm">Post Traumatic Stress Disorder PTSD</a></div></TD>
<TD align="middle"><div align="left"><a href="multiple.htm" target="_parent">Multiple Personality or Dissociative Disorders</a></div></TD>
<TD align="middle"><div align="left"><A href="adhd.htm" target="_parent">Attention Deficit Hyperactivity Disorder</A></div></TD>
</TR>
<TR>
<TD height="39" align="middle"><div align="left"><A href="counselors.htm" target="_parent">Christian Counseling</A></div></TD>
<TD align="middle"><div align="left"><a href="skype.htm" target="_blank">Skype, Phone or Online Counseling</a></div></TD>
<TD align="middle"><div align="left"><A href="cyberbullying.htm" target="_parent">Cyberbullying</A></div></TD>
</TR>
<TR>
<TD height="29" align="middle"><div align="left"><A href="grief.htm" target="_parent">Loss</A></div></TD>
<TD align="middle"><div align="left"><a href="anxiety.htm" target="_parent">Stress Management</a></div></TD>
<TD align="middle"><div align="left"><A href="grief.htm" target="_parent">Grief</A></div></TD>
</TR>
<TR>
<TD height="37" align="middle"><div align="left"><A href="substance_abuse.htm" target="_parent">Substance Abuse & Addictions</A></div></TD>
<TD align="middle"><div align="left"><A href="sports.htm">Sports Psychology</A></div></TD>
<TD align="middle"><div align="left"><A href="sports.htm" target="_blank">Mental Toughness</A></div></TD>
</TR>
<TR>
<TD height="23" align="middle"><div align="left"><A href="sexualaddictions.htm" target="_parent">Sexual Addictions</A></div></TD>
<TD align="middle"><div align="left"><A href="groups.htm">Groups</A></div></TD>
<TD align="middle"><div align="left"><A href="parenting.htm" target="_parent">Parent Coaching</A></div></TD>
</TR>
<TR>
<TD align="middle"><div align="left">Family</div></TD>
<TD align="middle"><div align="left"><A href="divorce.htm">Divorce Recovery</A></div></TD>
<TD align="middle"><div align="left"><a href="premarital.htm" target="_parent">Pre-Marital</a></div></TD>
</TR>
<TR>
<TD align="middle"><div align="left"><a href="disabled.htm">Mentally Disabled</a></div></TD>
<TD align="middle"><div align="left"><a href="leadershipcoaching.htm">Leadership Coaching</a></div></TD>
<TD align="middle"><div align="left"><a href="selfharm.htm" target="_blank">Self Harm</a></div></TD>
</TR>
</TBODY>
</TABLE>
<HR><p>At Total Life Counseling we focus on more than just the “Mind;" we focus on the “Total” person. </p>
<p><U>Clients travel all over Florida, from the Bahamas and Georgia </U>as TLC has worked with patients' and their prescribers' to reduce their dependency on medication. Since 2003 85% of our patients were stabilized with FDA approved supplements and dietary adjustments.</p>
<p>Patients receive tremendous relief from their symptoms with less medication or in some cases without medication. </p>
<p>Orlando teen and adolescent life workshops and teen camps.</p>
<p><span class="style1"><a href="espanol.htm" title="Orlando, Winter Park, Altamonte, Lake Mary & South West Orlando" target="_blank"><strong>Se Habla Español</strong></a> <span class="style22">and</span> <a href="portuguese.htm" target="_blank"><strong>Portuguese (Portugues)</strong></a> <span class="style17">Counselors</span></span></p>
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a href="http://www.addthis.com/bookmark.php?v=250&pub=xa-4a9b0aa77cca0416" class="addthis_button_compact">Share</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_myspace"></a>
<a class="addthis_button_google"></a>
<a class="addthis_button_twitter"></a></div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=xa-4a9b0aa77cca0416"></script>
<!-- AddThis Button END -->
<HR>
<H2>Our Mission Statement</H2>
<p>To provide the Hope, Healing and Support to Individuals, Couples, and Families in a Warm, Approachable Way.</p>
<h2>Our Vision Statement</h2>
<p>To Accelerate Healing with our Relational, Holistic, Experiential approach through Communication, Camps, Coaching, and Counseling.</p>
<HR><h2 class="boxText3 style35">Office Locations and Areas Served</h2>
<p align="left" class="style36">Total Life Counseling Center provides counseling, therapy, coaching, camps and career services for all of central Florida, including: Orlando, Winter Park, Maitland, College Park, Dr. Phillips, Pine Castle, Conway, Windermere, Winter Garden, Ocoee, Oviedo, Longwood, Altamonte Springs, Casselberry, Lake Mary, Sanford, Deland, De Bary, Deltona, Daytona, New Smyrna, Cocoa, Titusville, Merritt Island, Kissimmee, St. Cloud, Celebration, Mt. Dora, the Villages and the tri-cities of Tavares, Eustis and Leesburg. </p>
<p align="left" class="style36">Our counseling, therapy, camps, group, coaching and career services are conveniently located at:</p>
<p align="left" class="style36"><font face="Arial"><a href="http://www.mapquest.com/directions/main.adp?src=maps&1sb=revise&2l=ewk9MRVLeIOeBOayBAhxUA= =&2g=4r1UgrxqqQkErUUWTq9wZA==&2v=ADDRESS&2a=1507 S Hiawassee Rd&2c=Orlando&2s=FL&2z=32835-5718&2y=US&2pn=&2pl=&cat=&q=">1507 S. Hiawassee
Road, Suite 101, Orlando, FL 32835</a></font></p>
<p align="left" class="style36"><font face="Arial"><a href="http://www.mapquest.com/directions/main.adp?src=maps&1sb=revise&2l=QjNBshU7m2oAHEBWy833/w= =&2g=qrdtLjTZeC3HG9agi4ixtw==&2v=ADDRESS&2a=1850 Lee Rd&2c=Winter Park&2s=FL&2z=32789-2115&2y=US&2pn=&2pl=&cat=&q=">Lee
World-1850
Lee Road
Ste. #215, Winter Park, FL 32789</a></font></p>
<p align="left" class="style36"><a href="http://maps.google.com/maps?q=1850+N.+Alafaya+Trail+Building+1-B+Orlando,+FL+32826&oe=utf- 8&rls=org.mozilla:en-US:official&client=firefox-a&um=1&ie=UTF-8&split=0&gl=us&ei=syZJSpCoJ 4ii8QTjreGTDQ&sa=X&oi=geocode_result&ct=title&resnum=1" target="_parent" class="style37">1850 N. Alafaya Trail Building 1-A Orlando, FL 32826 Suite 1A</a></p>
<p align="left" class="style34"><span class="style29"><a href="http://maps.google.com/maps?client=safari&rls=en-us&q=7432+State+Road+50,+Groveland,+FL+34 736&oe=UTF-8&um=1&ie=UTF-8&split=0&gl=us&ei=dPWZSaKgNp6Dtwfel5CcCw&sa=X&oi=geocode_result& resnum=1&ct=title" target="_parent" class="style37">7432 State Road 50, Groveland, FL 34736</a></span></p>
<p class="style10"><b class="style32">Call us (407)
248-0030</b>
<!-- BEGIN: Constant Contact Stylish Email Newsletter Form -->
</p>
<DIV align="center">
<DIV>
<FORM name="ccoptin0" action="http://ui.constantcontact.com/d.jsp" method="post" target="_blank">
<strong><IMG alt="Email Newsletter icon, E-mail Newsletter icon, Email List icon, E-mail List icon" src="http://img.constantcontact.com/ui/images1/visitor/email1_trans.gif" border="0"> Read our e-Newsletter
<INPUT name="ea0">
<INPUT type="submit" value="GO" name="go0">
<INPUT type="hidden" value="1101177120388" name="m0">
<INPUT type="hidden" value="oi" name="p0">
</strong>
</FORM>
</DIV>
</DIV>
<!-- END: Constant Contact Stylish Email Newsletter Form -->
<!-- BEGIN: SafeSubscribe --> <DIV align="center"><strong><A href="http://www.constantcontact.com/safesubscribe.jsp" target="_blank"><IMG height="14" alt="" src="http://img.constantcontact.com/ui/images1/safe_subscribe_logo.gif" width="168" vspace="5" border="0"></A></strong></DIV></td>
</tr>
</table> </td>
<td width="1"></td>
<td width="165" valign="top"> <table border="0" style="border-collapse: collapse" width="96%" id="table" cellpadding="2" cellspacing="2">
<tr>
<td height="32" bgcolor="#2A6180"><p align="center"><A href="consultation.htm"><strong>Upcoming Seminars</strong></A></p></td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFFFF"><p align="center" class="style12"><strong><a href="http://www.youtube.com/TotalLifeMedia" target="_blank"><span class="style23"><img src="images/Youtube.jpg" alt="Total Life Counseling Center You Tube Videos" width="97" height="41" border="0" align="top"></span></a></strong></p>
<p align="center"><a href="http://www.facebook.com/pages/Total-Life-Counseling-Center/174661783281?ref=mf" target="_blank"><img src="images/Facebook.jpg" alt="Total Life Counseling Centers Facebook Fan Club" width="120" height="52" border="0"></a>
<p align="center" class="style12"><a href="4hourparenting.htm" target="_blank"><strong>4 Hour Court Ordered Divorce Parenting Class-Helping Your Children Through the Transition of Divorce</strong>, Court Referrals Accepted, Saturdays, 9a-1p. <a href="maps.htm"><strong>Total Life Counseling Center</strong></a></p>
<p align="center" class="style12"><a href="parenting.htm" target="_blank"><strong>4 Hour Parenting Class-Parenting with Purpose</strong></a>, Saturdays, 9a-1p. <a href="maps.htm"><strong>Total Life Counseling Center</strong></a></p>
<p align="center" class="style12"><a href="angermanagement.htm" target="_parent"><strong>8 Hour Anger Management Class</strong></a> Court Referrals Accepted, Saturday, 9a-5:30p, <a href="maps.htm"><strong>Total Life Counseling Center</strong></a></p>
<p align="center" class="style12"><span class="style17"><a href="marriage.htm" target="_parent">Couples Cafe </a></span><a href="marriage.htm"><span class="style17">"Enjoying Our Differences" </span></a><a href="Documents/Marriage Couples Cafe.pdf" target="_parent"><strong>Northland Church Natures Table </strong></a>Longwood, FL, TBA, 6:30p-8:30p<BR>
<BR>
<strong>Teen Talk about Obesity, Video Game Addiction, & Hooking Up</strong> - January 26th, 12p-1p, <a href="http://www.810weus.com/" target="_blank"><strong>The Linnda Durre Show 810 AM</strong></a> - James West, MA, LMHC</p>
<p align="center"><span class="style12 style28"><strong>The Hook Up Mentality</strong><BR>
Feb 4th from 9:30a-10:30a, East Ridge Middle School, <a href="james.htm" target="_blank">Jim West, MA, LMHC, NCC</a></span></p>
<p align="center"><span class="style12 style28"><strong>Social Networking & Internet Safety</strong><BR>
Feb 19th from 9:40a-11a, <a href="http://www.thefirstacademy.org" target="_blank">The First Academy</a>. <a href="james.htm" target="_blank">Jim West, MA, LMHC, NCC</a></span></p>
<p align="center"><span class="style12 style28"><strong>Top 10 Technology Relationship Kilers</strong><BR>
May 14th from 9a-12p, RSVP at (407) 281-7000, <a href="http://www.psysolutions.com/facilities/universitybehavioralcenter/" target="_blank">University Behavioral Center</a>. <a href="james.htm" target="_blank">Jim West, MA, LMHC, NCC</a> & <a href="janie.htm" target="_blank">Janie Lacy, MS</a></span></p>
<p align="center" class="style12"><strong>Professional Communicators Available for <a href="corporate.htm" target="_blank">Corporations,</a><a href="consultation.htm" target="_blank"> Colleges, Schools or Local Organizations on a Variety of Topics.</a></strong></p>
<p align="center"><span class="style12"><a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&pub=xa-4a9ae1e727d21f0f"><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a></span></p>
<HR color="#2a6180" SIZE="1">
<TABLE id="table47" cellSpacing="2" cellPadding="2" width="99%" border="0">
<TBODY>
<TR>
<TD height="120" bgColor="#ffffff"><p align="center"><strong><a href="Documents/Staff Brochure.pdf" target="_blank">TLC Brochure</a></strong></p>
<p align="center"><strong><A href="http://www.adobe.com/products/acrobat/readstep2.html"><IMG height="31" alt="Get Adobe Reader logo" hspace="3" src="images/get_adobe_reader.gif" width="88" vspace="3" border="0"></A></strong></p></TD>
</TR>
</TBODY>
</TABLE>
<p align="center"><strong><A href="http://www.cfchristianchamber.com">Member of the Central Florida Christian Chamber of Commerce</A></strong></p>
<!-- google_ad_client = "pub-7929094220693135"; //Home Page, 120x240, created 12/4/07 google_ad_slot = "9273104889"; google_ad_width = 120; google_ad_height = 240; //--> </td>
</tr>
</table></td>
<td width="15"> </td>
</tr>
</table></td>
</tr>
</table></td>
<td width="30" class="home-bg-r1"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="90" valign="top" class="home-b1"><table width="828" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="30" height="90"> </td>
<td width="90"> </td>
<td align="center" valign="top">
<!--COPYRIGHT info BEGIN-->
<div class='copyright'>Copyright © 2006. Total Life Counseling Center. All rights reserved.<BR>
<br>
Main Office: 1507 S. Hiawassee Road #101, Orlando FL 32835 Satellite Locations: Clermont, Winter Park, East Orando Florida<br>
</div>
<!--COPYRIGHT info END-->
<!--BOTTOM OF PAGE LINKS BEGIN-->
<div class='bottomLinks'>
<DIV><A href="index.html" target="_blank">Home Page</A> | <A href="contact_us.htm" target="_blank">Contact</A> | <A href="maps.htm" target="_blank">Office Locations</A> |<A href="forms.htm"> FAQ</A> <A href="resources.htm">Links</A> <a href="employment.htm"><span class="style33">EMPLOYMENT</span></a></DIV>
</div>
<!--BOTTOM OF PAGE LINKS END--></td>
<td width="90"> </td>
<td width="30"> </td>
</tr>
</table></td>
</tr>
</table></td>
<td width="147" class="home-bg-r2"> </td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<script type="text/javascript">
<!--
var MenuBar3 = new Spry.Widget.MenuBar("MenuBar3", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>Can you tell me where the error is in my HTML? Also how do I give you my JS script?
Here's my CSS:
@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: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
background-color: #214D65;
top: 0px;
bottom: 10px;
border-top-color: #2B6180;
border-right-color: #2B6180;
border-bottom-color: #2B6180;
border-left-color: #2B6180;
/* 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
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #2B6180;
font-style: normal;
border-top-color: #2B6180;
border-right-color: #2B6180;
border-bottom-color: #2B6180;
border-left-color: #2B6180;
z-index: -1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8.05em;
float: left;
background-color: #235E80;
top: -15px;
border-top-color: #A4B5BF;
border-right-color: #A4B5BF;
border-bottom-color: #A4B5BF;
border-left-color: #A4B5BF;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
right: -8px;
color: #FFFFFF;
/* 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: 10em;
position: absolute;
left: 0px;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
background-color: #2B6180;
border-top-color: #2B6180;
border-right-color: #2B6180;
border-bottom-color: #2B6180;
border-left-color: #2B6180;
/* 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
border-top-width: 10px;
border-right-width: 10px;
border-bottom-width: 10px;
border-left-width: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
background-color: #2B6180;
border-top-color: #2B6180;
border-right-color: #2B6180;
border-bottom-color: #2B6180;
border-left-color: #2B6180;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 10em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
background-color: #285B78;
border-top-color: #2B6180;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
margin: -5% 0 0 95%;
top: auto;
/* 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
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #2B6180;
padding: 0.5em 0.75em;
color: #FFFFFF;
text-decoration: none;
border-top-color: #587788;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #2E698B;
color: #285D78;
background-repeat: no-repeat;
background-image: none;
/* 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
background-color: #2A6180;
color: #205775;
background-repeat: no-repeat;
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;
/* 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 ul a.MenuBarItemSubmenu
background-repeat: no-repeat;
/* 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;
/* 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;
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: #FFF; -
Horizontal hover menus alignment
Thanks to Ben, who very pointedly said "you need help" I attempt to explain my frustrations and limitations using horizontal menu bars.
The following template, uses only div's, but my tech friends say it doesn't align up in all browsers: {are there supposed to be the wide white margins around it? I can try setting the header up as a table so things stay in place and it
works at all screen widths.} Chris Bizynet
http://musicnotes.net/Jess
(It is frustrating to work with a design that doesn't look the same in DW as it will in a browser - i.e., the white space to the left of the red menu bar)
So,my tech friend rebuilt the template using (sorry to say) tables and cells, with the intention to keep the drop-down menus to stay in place:
http://musicnotes.net/MNI2010/2010/index.html
Most alignment issues were resolved, save IE 8.0, where the hover menus overlap the main drop-down menu. (see below) However, this is the final look I would like to have, note the Join/Login/Contact placed in the upper right hand area, and the drop-down menus spread across the red menu bar.
{It's behaving fine in IE 6.0 and FireFox. IE 8.0 overlaps the secondary
menus but it's workable. It expands proportionally from 1024 up to 1920
wide screens. It's a little wide for 800 but that's not a problem these
days.} - Chris - Bizynet
(note the overlap of the hover menu)
Yesterday I downloaded the update for DW SC4, opened both templates, saved them, and re-uploaded them, thus they have the most current spry assets.
I would be ever thankful to have a template that looks correct in all browsers. I like the spread-out drop-downs in the table/cell MIN2010 version, however, I'm very much wanting to enter the web 2.0 world using only div's.
Thanking you in advance for your time and suggestions - Jess
P.S. for a look at the web 1.0 version of the site here is the link: http://musicnotes.net - (archaic, I know)
SpryMenuBarHorizontal.css for JESS (div's)
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* 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: 0;
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;
/* 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: 8em;
float: left;
/* 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: 8.2em;
position: absolute;
left: -1000em;
/* 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: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* 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: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #EEE;
padding: 0.5em 0.75em;
color: #333;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #33C;
color: #FFF;
/* 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
background-color: #33C;
color: #FFF;
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-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* 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 ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
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 a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
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-image: url(SpryMenuBarRightHover.gif);
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;
filter:alpha(opacity:0.1);
/* 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: #FFF;
SpryMenuBarHorizontal.css for MNI2010 (table/cells)
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* 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: 0;
padding: 0;
list-style-type: none;
font-size: 80%;
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;
/* 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: 12em;
float: none;
/* 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: 10em;
position: absolute;
left: -1000em;
/* 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: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 15em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* 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: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #CC3333;
padding: 0.5em 0.75em;
color: #FFFFFF;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #FFFFFF;
color: #000000;
/* 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
background-color: #FFFFFF;
color: #000000;
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-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* 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 ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
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 a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
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-image: url(SpryMenuBarRightHover.gif);
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;
filter:alpha(opacity:0.1);
/* 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: #FFF;Hi Jess,
I had a look at the markup and found one little error. On line 112 there is one '</ul>' too many. For the rest your code is perfect and works in all browsers as checked on https://browserlab.adobe.com.
my tech friends say it doesn't align up in all browsers
This statement intrigues me. Please list the names of the browsers where 'it' doesn't line up.
{are there supposed to be the wide white margins around it? I can try setting the header up as a table so things stay in place and itworks at all screen widths.} Chris Bizynet
The white margin is a matter of design. A full width page can easily be achieved by tweaking the styles in the CSS. Try changing the following properties in the stylesheet. At each change check in the browser to view the result.
.oneColElsCtrHdr #container {
background: #FFFFFF;
margin: 20px auto 0 auto; /* the auto margins (in conjunction with a width) center the page */
text-align: left; /* this overrides the text-align: center on the body element. */
min-width: 860px;
max-width: 1024px;
width: 96%;
Reverting to a layout using tables can also achieve the same result in the same way that an ox and cart can move a pay load. If this statement seams to be cynical, it is meant to be.
(It is frustrating to work with a design that doesn't look the same in DW as it will in a browser - i.e., the white space to the left of the red menu bar)
This is another intriguing matter. Which browser were you using to get this result? As far as DW is concerned, it does its best to interpret the page, the best test is always the browser and well all browsers because of their differences. Yes this is frustrating.
So,my tech friend rebuilt the template using (sorry to say) tables and cells, with the intention to keep the drop-down menus to stay in place:
http://musicnotes.net/MNI2010/2010/index.html
There are too many errors within that design to discuss within the parameters of this forum.
I would be ever thankful to have a template that looks correct in all browsers. I like the spread-out drop-downs in the table/cell MIN2010 version, however, I'm very much wanting to enter the web 2.0 world using only div's.
To have an elastic menu, all you need to do is tweak the CSS as follows:
ul.MenuBarHorizontal li {
width: 16.6%; // 6 menu items X 16.6% = 99.6%
Before opting for a fully elastic design (full page width), please Google the topic for more background information. The design that you have at this stage is elastic for screen resolutions from 860px wide to 1280px. Below 860px the layout of the menu is seriously affected, above 1280px, the width of the written contents makes it hard to read. In making your choice, have a look how large corporations design their sites.
I hope this helps.
Ben -
My Drop Down Menus Do Not Work Properly in IE
Hey. I'm really stuck and have been for over a week. Let me preface this by telling you I didn't build our website and have little knowledge of spry and spry assets. I can't the get the gentleman that built our site to help and I'm desperate!
The site - www.ncsoccer.org , has drop down menus. They work fine in Chrome, FF and Live Preview (DW CS4). But in IE8, they do not.
I had to revise the drop downs (changing names and removing some drop downs - I've done this with no problem before). When I uploaded the index page and the template pages, the error started.
In addition, the people in my office that use Contribute to update their sections, cannot access anything but our index page and I don't know what (if anything) I've done wrong, as everything worked fine before the menu revision.
I'm including the 'sprymenubarhorizontal.css" code below. Maybe you can see something that isn't right.
Thanks for any insight or suggestions. Remember, asking me to create to create sprys or widgets or something like that may be over my head! Try to dumb it down for me!
Thanks.
Mark
(sprymenubarhorizontal.css code)
@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: 0;
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;
/* 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;
/* 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: 15em;
position: absolute;
left: -1000em;
/* 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: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 15em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* 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: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
width: auto;
background-attachment: fixed;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #ffffff;
padding: 0.3em 0.75em;
color: #000;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #cccccc;
color: #000;
/* 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
background-color: #cccccc;
color: #000;
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%;
/* 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 ul a.MenuBarItemSubmenu
background-image: url("SpryMenuBarRight.gif");
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 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-image: url("SpryMenuBarRightHover.gif");
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: #FFF;A;though the CSS is very well documented, there are those that ignore those signs. Look at the following
/* 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;
The rest have been given a width of 15em, so this value may be a good start.
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
width: auto;
background-attachment: fixed;
Just keep the border property and remove the other two.
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: #FFF;
The following is the original for the above
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;
filter:alpha(opacity:0.1);
/* 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: #FFF;
Cheers,
Gramps -
Spry Menu Bar 1.7 Rendering Variable background height based presence/absense of sub-menus
First, let me thank those who have offered help on previous posts on this issue -- the suggestions have pointed me in new directions.
However I am still having problems with the first menu item on the top level of a horizontal menu bar which (because it has no sub-menu) renders the background differently from the other main level items. I have implemented suggestions, as you will see, by setting a class for menu items with sub-menus as per the suggestion, and then proceeding working with line height to make specific changes within that class. However any changes appeared universally through the menu bar at all levels.
Working from that suggestion, I tried establishing a class of "menubarhorizontal_no-sub-menu" and then adjusted the line height for that item. Unfortunately it applied this change again to all items leaving a displeasing white gap between menu items in the drop down menus.
I wanted to put out a call once more. I realize that the problem is in determining which of the rules to style, but I seem to have exhausted the possibilities. The latest version can be seen at www.aclco.org/testing/index.html which will provide a visual of the problem. You can see it doesn't look much different than the original which is http://www.aclco.org/index.html.
I am also including the code for the nav bar which is inserted as a library item into all the pages:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><ul id="MenuBar1" class="MenuBarHorizontal">
<li><a class="MenuBarHorizontal_no-sub-menu" href="../index.html" title="Home">Home</a></li>
<li><a class="MenuBarItemSubmenu" href="../about_aclco.html" title="ACLCO-ACJCO">ACLCO-ACJCO</a>
<ul>
<li><a href="../about_aclco.html#mission_mandate" title="Mission and Mandate">Mission and Mandate</a></li>
<li><a href="../about_aclco.html#governance" title="Governance">Governance</a>
<ul>
<li><a href="../about_aclco.html#executive">Executive</a></li>
</ul>
</li>
<li><a href="../by-laws_policies.html" title="By-Laws and Policies">By-Laws and Policies</a></li>
<li><a href="../about_aclco.html#staff_volunteers" title="Staff and Volunteers">Staff and Volunteers</a></li>
<li><a href="../public_documents.html" title="Public Documents">Public Documents</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="../about_Clinics_overview.html" title="About Community Legal Clinics">Community Legal Clinics</a>
<ul>
<li><a href="../about_Clinics_overview.html" title="About Clinics - Overview">Overview</a></li>
<li><a href="../critical_characteristics.html" title="Critical Characteristics">Critical Characteristics </a></li>
<li><a href="../what_clinic_do.html" title="What Clinics Do">What Clinics Do</a>
<ul>
<li><a href="../Advice+referrals.html" title="Advice and Referrals">Advice and Referrals</a></li>
<li><a href="../case_work+legal_representation.html" title="Case Work and Legal Representation">Case Work and Legal Representation</a></li>
<li><a href="../community_development.html" title="Community Development">Community Development</a></li>
<li><a href="../public_legal_education.html" title="Public Legal Education">Public Legal Education</a></li>
<li><a href="../law_reform.html" title="Law Reform">Law Reform</a></li>
</ul>
</li>
<li><a href="../who_clinics_serve.html" title="Who Clinics Serve">Who Clinics Serve</a></li>
<li><a href="../impacts.html" title="Impact on Clients and their Communities">Impact</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="../Members_Only/intranet_portal_page.html" title="Members Only">Members Only</a>
<ul>
<li><a href="../Members_Only/intranet_portal_page.html" title="ACLCO Intranet Pages">ACLCO Intranet Pages</a></li>
<li><a href="http://www.bulletinboards.com/message.cfm?comcode=ACLCO " title="ACLCO Discussion Forum">ACLCO Discussion Forum</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="../contact_us.html" title="Contact Us">Contact</a>
<ul>
<li><a href="../contact_us.html" title="Contact Information">Contact Information</a></li>
<li><a href="../links.html" title="Links">Links</a></li>
</ul>
</li>
</ul>
The spry framework coding For the Horizontal Menu Bar is as follows:
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* 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: 0;
padding: 0;
line-height: 23px;
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;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
line-height: 21px;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto; /* This allows the width of the various top level menu items to adjust automatically to fit the contents of each menu item */
float: left;
ul.MenuBarHorizontal_no-sub-menu li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto; /* This allows the width of the various top level menu items to adjust automatically to fit the contents of each menu item */
float: left;
/* 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: 8.2em;
position: absolute;
left: -1000em;
/* 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: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 200px; /* This establishes a fixed width for the drop down menus */
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* 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: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: none; /* removes the grey border from around the sub-menu container */
/* Menu items are a light gray block with padding and no text decoration NB: Remove - background-color: #EEE; reset color from #333 to #FFF*, and establish a background image with repeat, Especially note that this only sets the top level items, i.e. those with no children sub-menus attached to them.*/
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segm ent-Dark.png);
background-repeat: repeat-x;
background-color: #000088; /*background color must exactly match the color of the bottom edge of the repeating background png so that if it runs over 39px in height their won't be any gaps of white. */
padding: 0.5em 0.75em;
color: #FFF;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text; again reset thebackground-color: #3CC to equal the color of the bottom edge of the repeating png (see above). Set background image and repeat for a hover state. However, this only sets hover states for top level menu items and sub-menus that have higher level items above them. If for example a menu has 3 levels it will not set for the 1st and 2nd level. */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segm ent%20Light2.png);
background-repeat:repeat-x;
background-color: #2E35A3;
color: #FFF;
/* 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
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segm ent%20Light2.png);
background-repeat:repeat-x;
background-color: #2E35A3;
color: #FFF;
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%) Remove the background image that displays arrows and set the appropriate background image and repeat. */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segment-Dark.png);
background-repeat:repeat-x;
background-color: #000088;
background-position: 95% 50%;
/* 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 ul a.MenuBarItemSubmenu
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segm ent-Dark.png);
background-repeat: repeat-x;
background-color: #000088;
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%) This controls sub-sub-menu items in hover state. */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segm ent%20Light2.png);
background-repeat:repeat-x;
background-color: #2E35A3;
color: #FFF;
/* 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 Controls fly-out menu items in hover or focus state.(50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image:url(../ACLCO%20Graphics%20-%20Web%20site%20Parts/Navigation%20Bar%20Segm ent%20Light2.png);
background-repeat:repeat-x;
background-color: #2E35A3;
color: #FFF;
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;
filter:alpha(opacity:0.1);
/* 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: #FFF;
Finally, there is minimal css coding to help position the menu bar within the web page relative to the top of the page, and left edge of the web page.
This is done with a div tag called Main Nav Contents.
#Main_nav_contents {
padding: 0;
margin-top: 0px;
height: auto;
width: 950px;
padding-top: 275px;
padding-left: 35px;
I would very much appreciate any further help that people can provide me. It seems that the trick is to identify the appropriate rule; however that has thus far alluded me.
Thanks,
Steve WebsterThis will help http://www.dwcourse.com/dreamweaver/ten-commandments-spry-menubars.php#one
-
Spry Menu Text only displays in hover color, doesn't sense browser edge
I have a Spry horizontal menu in a website that is working fairly well in everything except IE6. Firefox, Safari, and IE7 are all fine.
In IE6, random menu items only display in the blue hover color, so they are invisible until you hover over them.
My second problem is that the menu is right-aligned, and the button on the far right has three submenus. I would like the second two submenus to automatically open to the left of the first submenu when opening to the right would cause them to be cut off by the edge of the browser window. How do I do this??
Here is my code (I've customized it with suggestions online, but just can't seem to fix the problem with IE6).
Thanks for any help, I'm really stuck!!
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* 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: 0;
padding: 0;
list-style-type: none;
font-size: 9pt;
cursor: default;
font-family: Helvetica, Arial, sans-serif;
/* 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;
/* 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;
height: auto;
/* 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: 8.2em;
position: absolute;
left: -1000em;
/* 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: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 12em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* 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: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
/*ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a blue block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #0000ff;
color: #fff180;
text-decoration: none;
li.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #0000FF;
color: #FFF180;
text-decoration: none;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
/* Menu items that have mouse over or focus have a yellow background and blue text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #fff180;
color: #0000ff;
/* 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
background-color: #fff180;
color: #0000FF;
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-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* 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 ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
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 a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
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-image: url(SpryMenuBarRightHover.gif);
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;
filter:alpha(opacity:0.1);
/* 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: #FFF;
@media screen {
* html ul.MenuBarVertical ul {position: relative!important; float: left;
margin: -10px -1000px -1000px 80px; display: inline;}
* html ul.MenuBarVertical {position: static!important; }
*:first-child+html ul.MenuBarVertical ul {position: relative!important;
float: left; margin: -10px -1000px -1000px 80px;}
*:first-child+html ul.MenuBarVertical {position: static!important; }If you want to see the website and menu in action, go to http://www.gwnetworks.com/playtri/index_new2.html
Thanks again! -
Spry menu hover in IE: How to get rid of white frame & "false"?
Hi--
I'm encountering an IE issue with a Spry vertical menu bar. When the user hovers over the submenu, white frames appear behind the submenu with the word "false" in them. Of course this doesn't happen in Safari or Firefox.
I was able to fix other similar problems with the menu by following tips posted on another forum. Namely, in the CSS, I disabled an IE hack that caused a white background to appear (menu background has to be transparent on this site). And in the JS, I disabled the following: this.removeIframeLayer(menu);
Here's the URL: http://www.qic-ec.org
Below are the css (1) and js (2).
Any help would be DEEPLY appreciated.
Thank you
Jackie
CSS:
@charset "UTF-8";
/* SpryMenuBarVertical.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, a fixed width box with no margin or padding */
ul.MenuBarVertical
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 6.2em;
/* 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;
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 6.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 6.2em;
left: -1000em;
top: 0;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
width: 3em;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
border: 0px solid #CCC;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
border: 0px solid #CCC;
/* Menu items are a transparent block with padding and no text decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #502977;
text-decoration: none;
border-bottom: 1px dotted #A88FC7;
/* Menu items that have mouse over or focus have a transparent background and light purple text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
color: #A88FC7;
/* Menu items that are open with submenus are set to MenuBarItemHover with a transparent background and light purple text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
color: #A88FC7;
ul.MenuBarVertical ul li a
border: 0px;
color: #006600;
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.MenuBarVertical a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* 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.MenuBarVertical ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
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.MenuBarVertical a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
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.MenuBarVertical ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
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.MenuBarVertical 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.MenuBarVertical li.MenuBarItemIE
display: inline;
f\loat: left;
background: #fff;
JS:
/* 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);Oh, sorry, after I updated to 1.6.1 and uploaded the new code, I didn't post it here. Here it is (minus intro comments)--and it's still not working in IE (though I am testing on an older PC with IE 6). The problem only arises upon hovering.
THANKS
Jackie
JS
// SpryMenuBar.js - version 0.12 - Spry Pre-Release 1.6.1
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
var Spry; if (!Spry) Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.BrowserSniff = function()
var b = navigator.appName.toString();
var up = navigator.platform.toString();
var ua = navigator.userAgent.toString();
this.mozilla = this.ie = this.opera = this.safari = false;
var re_opera = /Opera.([0-9\.]*)/i;
var re_msie = /MSIE.([0-9\.]*)/i;
var re_gecko = /gecko/i;
var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
var r = false;
if ( (r = ua.match(re_opera))) {
this.opera = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_msie))) {
this.ie = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_safari))) {
this.safari = true;
this.version = parseFloat(r[2]);
} else if (ua.match(re_gecko)) {
var re_gecko_version = /rv:\s*([0-9\.]+)/i;
r = ua.match(re_gecko_version);
this.mozilla = true;
this.version = parseFloat(r[1]);
this.windows = this.mac = this.linux = false;
this.Platform = ua.match(/windows/i) ? "windows" :
(ua.match(/linux/i) ? "linux" :
(ua.match(/mac/i) ? "mac" :
ua.match(/unix/i)? "unix" : "unknown"));
this[this.Platform] = true;
this.v = this.version;
if (this.safari && this.mac && this.mozilla) {
this.mozilla = false;
Spry.is = new Spry.BrowserSniff();
// 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;
this.showDelay = 250;
this.hideDelay = 600;
if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
// bail on older unsupported browsers
return;
// Fix IE6 CSS images flicker
if (Spry.is.ie && Spry.is.version < 7){
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;
this.hoverClass = 'MenuBarItemHover';
this.subHoverClass = 'MenuBarItemSubmenuHover';
this.subVisibleClass ='MenuBarSubmenuVisible';
this.hasSubClass = 'MenuBarItemSubmenu';
this.activeClass = 'MenuBarActive';
this.isieClass = 'MenuBarItemIE';
this.verticalClass = 'MenuBarVertical';
this.horizontalClass = 'MenuBarHorizontal';
this.enableKeyboardNavigation = true;
this.hasFocus = false;
// load hover images now
if(opts)
for(var k in opts)
if (typeof this[k] == 'undefined')
var rollover = new Image;
rollover.src = opts[k];
Spry.Widget.MenuBar.setOptions(this, opts);
// safari doesn't support tabindex
if (Spry.is.safari)
this.enableKeyboardNavigation = false;
if(this.element)
this.currMenu = this.element;
var items = this.element.getElementsByTagName('li');
for(var i=0; i<items.length; i++)
if (i > 0 && this.enableKeyboardNavigation)
items[i].getElementsByTagName('a')[0].tabIndex='-1';
this.initialize(items[i], element);
if(Spry.is.ie)
this.addClassName(items[i], this.isieClass);
items[i].style.position = "static";
if (this.enableKeyboardNavigation)
var self = this;
this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
if(Spry.is.ie)
if(this.hasClassName(this.element, this.verticalClass))
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.KEY_ESC = 27;
Spry.Widget.MenuBar.KEY_UP = 38;
Spry.Widget.MenuBar.KEY_DOWN = 40;
Spry.Widget.MenuBar.KEY_LEFT = 37;
Spry.Widget.MenuBar.KEY_RIGHT = 39;
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:""';
layer.frameBorder = '0';
layer.scrolling = 'no';
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 == this.element) ? menu : 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, this.activeClass);
// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
return Spry.is.safari && (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, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
menu.style.top = menu.parentNode.offsetTop + 'px';
if(Spry.is.ie && Spry.is.version < 7)
this.createIframeLayer(menu);
this.addClassName(this.element, this.activeClass);
// 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, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
menu.style.top = '';
menu.style.left = '';
if(Spry.is.ie && Spry.is.version < 7)
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)
var opentime, closetime;
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
if(menu)
this.addClassName(link, this.hasSubClass);
if(!Spry.is.ie)
// 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){self.mouseOver(listitem, e);}, false);
this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);
if (this.enableKeyboardNavigation)
this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
this.lastOpen = listitem.getElementsByTagName('a')[0];
this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.hasFocus = true;
Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
this.clearSelection(listitem);
Spry.Widget.MenuBar.prototype.clearSelection = function(el){
//search any intersection with the current open element
if (!this.lastOpen)
return;
if (el)
el = el.getElementsByTagName('a')[0];
// check children
var item = this.lastOpen;
while (item != this.element)
var tmp = el;
while (tmp != this.element)
if (tmp == item)
return;
try{
tmp = tmp.parentNode;
}catch(err){break;}
item = item.parentNode;
var item = this.lastOpen;
while (item != this.element)
this.hideSubmenu(item.parentNode);
var link = item.getElementsByTagName('a')[0];
this.removeClassName(link, this.hoverClass);
this.removeClassName(link, this.subHoverClass);
item = item.parentNode;
this.lastOpen = false;
Spry.Widget.MenuBar.prototype.keyDown = function (e)
if (!this.hasFocus)
return;
if (!this.lastOpen)
this.hasFocus = false;
return;
var e = e|| event;
var listitem = this.lastOpen.parentNode;
var link = this.lastOpen;
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
var opts = [listitem, menu, null, this.getSibling(listitem, 'previousSibling'), this.getSibling(listitem, 'nextSibling')];
if (!opts[3])
opts[2] = (listitem.parentNode.parentNode.nodeName.toLowerCase() == 'li')?listitem.parentNode.parentNode:null;
var found = 0;
switch (e.keyCode){
case this.upKeyCode:
found = this.getElementForKey(opts, 'y', 1);
break;
case this.downKeyCode:
found = this.getElementForKey(opts, 'y', -1);
break;
case this.leftKeyCode:
found = this.getElementForKey(opts, 'x', 1);
break;
case this.rightKeyCode:
found = this.getElementForKey(opts, 'x', -1);
break;
case this.escKeyCode:
case 9:
this.clearSelection();
this.hasFocus = false;
default: return;
switch (found)
case 0: return;
case 1:
//subopts
this.mouseOver(listitem, e);
break;
case 2:
//parent
this.mouseOut(opts[2], e);
break;
case 3:
case 4:
// left - right
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
break;
var link = opts[found].getElementsByTagName('a')[0];
if (opts[found].nodeName.toLowerCase() == 'ul')
opts[found] = opts[found].getElementsByTagName('li')[0];
this.addClassName(link, opts[found].getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
opts[found].getElementsByTagName('a')[0].focus();
//stop further event handling by the browser
return Spry.Widget.MenuBar.stopPropagation(e);
Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if (this.enableKeyboardNavigation)
this.clearSelection(listitem);
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
if (listitem.closetime)
clearTimeout(listitem.closetime);
if(this.currMenu == listitem)
this.currMenu = null;
// move the focus too
if (this.hasFocus)
link.focus();
// show menu highlighting
this.addClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
if(menu && !this.hasClassName(menu, this.subHoverClass))
var self = this;
listitem.opentime = window.setTimeout(function(){self.showSubmenu(menu);}, this.showDelay);
Spry.Widget.MenuBar.prototype.mouseOut = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
if(!listitem.contains(related))
if (listitem.opentime)
clearTimeout(listitem.opentime);
this.currMenu = listitem;
// remove menu highlighting
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
if(menu)
var self = this;
listitem.closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, this.hideDelay);
if (this.hasFocus)
link.blur();
Spry.Widget.MenuBar.prototype.getSibling = function(element, sibling)
var child = element[sibling];
while (child && child.nodeName.toLowerCase() !='li')
child = child[sibling];
return child;
Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
var found = 0;
var rect = Spry.Widget.MenuBar.getPosition;
var ref = rect(els[found]);
var hideSubmenu = false;
//make the subelement visible to compute the position
if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
els[1].style.visibility = 'hidden';
this.showSubmenu(els[1]);
hideSubmenu = true;
var isVert = this.hasClassName(this.element, this.verticalClass);
var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
for (var i = 1; i < els.length; i++){
//when navigating on the y axis in vertical menus, ignore children and parents
if(prop=='y' && isVert && (i==1 || i==2))
continue;
//when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore children and parents
if(prop=='x' && !isVert && !hasParent && (i==1 || i==2))
continue;
if (els[i])
var tmp = rect(els[i]);
if ( (dir * tmp[prop]) < (dir * ref[prop]))
ref = tmp;
found = i;
// hide back the submenu
if (els[1] && hideSubmenu){
this.hideSubmenu(els[1]);
els[1].style.visibility = '';
return found;
Spry.Widget.MenuBar.camelize = function(str)
if (str.indexOf('-') == -1){
return str;
var oStringList = str.split('-');
var isFirstEntry = true;
var camelizedString = '';
for(var i=0; i < oStringList.length; i++)
if(oStringList[i].length>0)
if(isFirstEntry)
camelizedString = oStringList[i];
isFirstEntry = false;
else
var s = oStringList[i];
camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
return camelizedString;
Spry.Widget.MenuBar.getStyleProp = function(element, prop)
var value;
try
if (element.style)
value = element.style[Spry.Widget.MenuBar.camelize(prop)];
if (!value)
if (document.defaultView && document.defaultView.getComputedStyle)
var css = document.defaultView.getComputedStyle(element, null);
value = css ? css.getPropertyValue(prop) : null;
else if (element.currentStyle)
value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
catch (e) {}
return value == 'auto' ? null : value;
Spry.Widget.MenuBar.getIntProp = function(element, prop)
var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
if (isNaN(a))
return 0;
return a;
Spry.Widget.MenuBar.getPosition = function(el, doc)
doc = doc || document;
if (typeof(el) == 'string') {
el = doc.getElementById(el);
if (!el) {
return false;
if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
//element must be visible to have a box
return false;
var ret = {x:0, y:0};
var parent = null;
var box;
if (el.getBoundingClientRect) { // IE
box = el.getBoundingClientRect();
var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
ret.x = box.left + scrollLeft;
ret.y = box.top + scrollTop;
} else if (doc.getBoxObjectFor) { // gecko
box = doc.getBoxObjectFor(el);
ret.x = box.x;
ret.y = box.y;
} else { // safari/opera
ret.x = el.offsetLeft;
ret.y = el.offsetTop;
parent = el.offsetParent;
if (parent != el) {
while (parent) {
ret.x += parent.offsetLeft;
ret.y += parent.offsetTop;
parent = parent.offsetParent;
// opera & (safari absolute) incorrectly account for body offsetTop
if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
ret.y -= doc.body.offsetTop;
if (el.parentNode)
parent = el.parentNode;
else
parent = null;
if (parent.nodeName){
var cas = parent.nodeName.toUpperCase();
while (parent && cas != 'BODY' && cas != 'HTML') {
cas = parent.nodeName.toUpperCase();
ret.x -= parent.scrollLeft;
ret.y -= parent.scrollTop;
if (parent.parentNode)
parent = parent.parentNode;
else
parent = null;
return ret;
Spry.Widget.MenuBar.stopPropagation = function(ev)
if (ev.stopPropagation)
ev.stopPropagation();
else
ev.cancelBubble = true;
if (ev.preventDefault)
ev.preventDefault();
else
ev.returnValue = false;
Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
CSS
@charset "UTF-8";
/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 6.2em;
/* 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;
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 6.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 6.2em;
left: -1000em;
top: 0;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
width: 8.2em;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
border: 0px solid #CCC;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
border: 0px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
background-color: transparent;
padding: 0.5em 0.75em;
color: #502977;
text-decoration: none;
border-bottom: 1px dotted #A88FC7;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
background-color: transparent;
color: #A88FC7;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
background-color: transparent;
color: #A88FC7;
ul.MenuBarVertical ul li a
border: 0px;
color: #006600;
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.MenuBarVertical a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
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.MenuBarVertical a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
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.MenuBarVertical iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* 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.MenuBarVertical li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF; -
How do you make a transparent spry menu that has a background color on sub menus?
Hi i am a total newbie at html and css scripting/coding and i've been working on creating a website of course because im here and i have search and search and i've found a few topics about this but none of them have what i want and it would be helpful if when you post the reply you explain it so hopefully i can add on and learn but i am trying to get the background color on the sub menus #1A1A1A and then the menu it self transparent here is my code it might make no sense at all since im a newbie ;P
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* 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: 0 auto;
padding: 0;
list-style-type: none;
font-size: small;
cursor: default;
width: 100em;
/* 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;
/* 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: 18px;
position: relative;
text-align: left;
cursor: pointer;
width: 10.8em;
float: left;
visibility: visible;
/* 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: 8.2em;
position: absolute;
left: -1000em;
/* 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: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 15em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* 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: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
ul.MenuBarHorizontal ul
border: 0px solid #1A1A1A;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: transparent;
padding: 9px;
color: #FFF;
text-decoration: #1A1A1A;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
font-weight: bold;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 18px;
/* 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
background-color: #0048ff;
color: #EEE;
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-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* 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 ul a.MenuBarItemSubmenu
background-color:#1A1A1A;
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 a.MenuBarItemSubmenuHover
background-color:#1A1A1A
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-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 85% 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;
filter:alpha(opacity:0.1);
/* 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: #222222;Hi and welcome -
Start with fixing this missing semicolon (in red)
/* 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-color:#1A1A1A;
background-repeat: no-repeat;
background-position: 95% 50%;
You will find you will get faster, more accurate help from us if you upload your test page and any dependent files to your server and post a link here. That way we can examine ALL your code -
Spry menu hover: How to get rid of white box with "false"?
Hi--
I'm encountering an IE issue with a Spry vertical menu bar. When the user hovers over the submenu, white frames appear behind the submenu with the word "false" in them. Of course this doesn't happen in Safari or Firefox.
I was able to fix other similar problems with the menu by following tips posted on another forum. Namely, in the CSS, I disabled an IE hack that caused a white background to appear (menu background has to be transparent on this site). And in the JS, I disabled the following: this.removeIframeLayer(menu);
Here's the URL: http://www.qic-ec.org
Below are the css (1) and js (2).
Any help would be DEEPLY appreciated.
Thank you
Jackie
CSS:
@charset "UTF-8";
/* SpryMenuBarVertical.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, a fixed width box with no margin or padding */
ul.MenuBarVertical
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 6.2em;
/* 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;
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 6.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
margin: -5% 0 0 95%;
padding: 0;
list-style-type: none;
font-size: 100%;
position: absolute;
z-index: 1020;
cursor: default;
width: 6.2em;
left: -1000em;
top: 0;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
left: 0;
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
width: 3em;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
border: 0px solid #CCC;
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
border: 0px solid #CCC;
/* Menu items are a transparent block with padding and no text decoration */
ul.MenuBarVertical a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #502977;
text-decoration: none;
border-bottom: 1px dotted #A88FC7;
/* Menu items that have mouse over or focus have a transparent background and light purple text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
color: #A88FC7;
/* Menu items that are open with submenus are set to MenuBarItemHover with a transparent background and light purple text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
color: #A88FC7;
ul.MenuBarVertical ul li a
border: 0px;
color: #006600;
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.MenuBarVertical a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* 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.MenuBarVertical ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
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.MenuBarVertical a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
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.MenuBarVertical ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
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.MenuBarVertical 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.MenuBarVertical li.MenuBarItemIE
display: inline;
f\loat: left;
background: #fff;
JS:
/* 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);Do you have any suggestions for how to adjust the JS so that the menu functions properly in IE? As I said, I upgraded to Spry 1.6.1 and uploaded the new CSS and JS and the problem is still there. The CSS is the same as in the previous version. The new JS is:
// SpryMenuBar.js - version 0.12 - Spry Pre-Release 1.6.1
var Spry; if (!Spry) Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.BrowserSniff = function()
var b = navigator.appName.toString();
var up = navigator.platform.toString();
var ua = navigator.userAgent.toString();
this.mozilla = this.ie = this.opera = this.safari = false;
var re_opera = /Opera.([0-9\.]*)/i;
var re_msie = /MSIE.([0-9\.]*)/i;
var re_gecko = /gecko/i;
var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
var r = false;
if ( (r = ua.match(re_opera))) {
this.opera = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_msie))) {
this.ie = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_safari))) {
this.safari = true;
this.version = parseFloat(r[2]);
} else if (ua.match(re_gecko)) {
var re_gecko_version = /rv:\s*([0-9\.]+)/i;
r = ua.match(re_gecko_version);
this.mozilla = true;
this.version = parseFloat(r[1]);
this.windows = this.mac = this.linux = false;
this.Platform = ua.match(/windows/i) ? "windows" :
(ua.match(/linux/i) ? "linux" :
(ua.match(/mac/i) ? "mac" :
ua.match(/unix/i)? "unix" : "unknown"));
this[this.Platform] = true;
this.v = this.version;
if (this.safari && this.mac && this.mozilla) {
this.mozilla = false;
Spry.is = new Spry.BrowserSniff();
// 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;
this.showDelay = 250;
this.hideDelay = 600;
if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
// bail on older unsupported browsers
return;
// Fix IE6 CSS images flicker
if (Spry.is.ie && Spry.is.version < 7){
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;
this.hoverClass = 'MenuBarItemHover';
this.subHoverClass = 'MenuBarItemSubmenuHover';
this.subVisibleClass ='MenuBarSubmenuVisible';
this.hasSubClass = 'MenuBarItemSubmenu';
this.activeClass = 'MenuBarActive';
this.isieClass = 'MenuBarItemIE';
this.verticalClass = 'MenuBarVertical';
this.horizontalClass = 'MenuBarHorizontal';
this.enableKeyboardNavigation = true;
this.hasFocus = false;
// load hover images now
if(opts)
for(var k in opts)
if (typeof this[k] == 'undefined')
var rollover = new Image;
rollover.src = opts[k];
Spry.Widget.MenuBar.setOptions(this, opts);
// safari doesn't support tabindex
if (Spry.is.safari)
this.enableKeyboardNavigation = false;
if(this.element)
this.currMenu = this.element;
var items = this.element.getElementsByTagName('li');
for(var i=0; i<items.length; i++)
if (i > 0 && this.enableKeyboardNavigation)
items[i].getElementsByTagName('a')[0].tabIndex='-1';
this.initialize(items[i], element);
if(Spry.is.ie)
this.addClassName(items[i], this.isieClass);
items[i].style.position = "static";
if (this.enableKeyboardNavigation)
var self = this;
this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
if(Spry.is.ie)
if(this.hasClassName(this.element, this.verticalClass))
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.KEY_ESC = 27;
Spry.Widget.MenuBar.KEY_UP = 38;
Spry.Widget.MenuBar.KEY_DOWN = 40;
Spry.Widget.MenuBar.KEY_LEFT = 37;
Spry.Widget.MenuBar.KEY_RIGHT = 39;
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:""';
layer.frameBorder = '0';
layer.scrolling = 'no';
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 == this.element) ? menu : 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, this.activeClass);
// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
return Spry.is.safari && (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, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
menu.style.top = menu.parentNode.offsetTop + 'px';
if(Spry.is.ie && Spry.is.version < 7)
this.createIframeLayer(menu);
this.addClassName(this.element, this.activeClass);
// 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, this.subVisibleClass);
if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
menu.style.top = '';
menu.style.left = '';
if(Spry.is.ie && Spry.is.version < 7)
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)
var opentime, closetime;
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
if(menu)
this.addClassName(link, this.hasSubClass);
if(!Spry.is.ie)
// 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){self.mouseOver(listitem, e);}, false);
this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);
if (this.enableKeyboardNavigation)
this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
this.lastOpen = listitem.getElementsByTagName('a')[0];
this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.hasFocus = true;
Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
this.clearSelection(listitem);
Spry.Widget.MenuBar.prototype.clearSelection = function(el){
//search any intersection with the current open element
if (!this.lastOpen)
return;
if (el)
el = el.getElementsByTagName('a')[0];
// check children
var item = this.lastOpen;
while (item != this.element)
var tmp = el;
while (tmp != this.element)
if (tmp == item)
return;
try{
tmp = tmp.parentNode;
}catch(err){break;}
item = item.parentNode;
var item = this.lastOpen;
while (item != this.element)
this.hideSubmenu(item.parentNode);
var link = item.getElementsByTagName('a')[0];
this.removeClassName(link, this.hoverClass);
this.removeClassName(link, this.subHoverClass);
item = item.parentNode;
this.lastOpen = false;
Spry.Widget.MenuBar.prototype.keyDown = function (e)
if (!this.hasFocus)
return;
if (!this.lastOpen)
this.hasFocus = false;
return;
var e = e|| event;
var listitem = this.lastOpen.parentNode;
var link = this.lastOpen;
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
var opts = [listitem, menu, null, this.getSibling(listitem, 'previousSibling'), this.getSibling(listitem, 'nextSibling')];
if (!opts[3])
opts[2] = (listitem.parentNode.parentNode.nodeName.toLowerCase() == 'li')?listitem.parentNode.parentNode:null;
var found = 0;
switch (e.keyCode){
case this.upKeyCode:
found = this.getElementForKey(opts, 'y', 1);
break;
case this.downKeyCode:
found = this.getElementForKey(opts, 'y', -1);
break;
case this.leftKeyCode:
found = this.getElementForKey(opts, 'x', 1);
break;
case this.rightKeyCode:
found = this.getElementForKey(opts, 'x', -1);
break;
case this.escKeyCode:
case 9:
this.clearSelection();
this.hasFocus = false;
default: return;
switch (found)
case 0: return;
case 1:
//subopts
this.mouseOver(listitem, e);
break;
case 2:
//parent
this.mouseOut(opts[2], e);
break;
case 3:
case 4:
// left - right
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
break;
var link = opts[found].getElementsByTagName('a')[0];
if (opts[found].nodeName.toLowerCase() == 'ul')
opts[found] = opts[found].getElementsByTagName('li')[0];
this.addClassName(link, opts[found].getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
opts[found].getElementsByTagName('a')[0].focus();
//stop further event handling by the browser
return Spry.Widget.MenuBar.stopPropagation(e);
Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if (this.enableKeyboardNavigation)
this.clearSelection(listitem);
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
if (listitem.closetime)
clearTimeout(listitem.closetime);
if(this.currMenu == listitem)
this.currMenu = null;
// move the focus too
if (this.hasFocus)
link.focus();
// show menu highlighting
this.addClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
this.lastOpen = link;
if(menu && !this.hasClassName(menu, this.subHoverClass))
var self = this;
listitem.opentime = window.setTimeout(function(){self.showSubmenu(menu);}, this.showDelay);
Spry.Widget.MenuBar.prototype.mouseOut = function (listitem, e)
var link = listitem.getElementsByTagName('a')[0];
var submenus = listitem.getElementsByTagName('ul');
var menu = (submenus.length > 0 ? submenus[0] : null);
var hasSubMenu = (menu) ? true : false;
if(this.bubbledTextEvent())
// ignore bubbled text events
return;
var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
if(!listitem.contains(related))
if (listitem.opentime)
clearTimeout(listitem.opentime);
this.currMenu = listitem;
// remove menu highlighting
this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
if(menu)
var self = this;
listitem.closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, this.hideDelay);
if (this.hasFocus)
link.blur();
Spry.Widget.MenuBar.prototype.getSibling = function(element, sibling)
var child = element[sibling];
while (child && child.nodeName.toLowerCase() !='li')
child = child[sibling];
return child;
Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
var found = 0;
var rect = Spry.Widget.MenuBar.getPosition;
var ref = rect(els[found]);
var hideSubmenu = false;
//make the subelement visible to compute the position
if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
els[1].style.visibility = 'hidden';
this.showSubmenu(els[1]);
hideSubmenu = true;
var isVert = this.hasClassName(this.element, this.verticalClass);
var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
for (var i = 1; i < els.length; i++){
//when navigating on the y axis in vertical menus, ignore children and parents
if(prop=='y' && isVert && (i==1 || i==2))
continue;
//when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore children and parents
if(prop=='x' && !isVert && !hasParent && (i==1 || i==2))
continue;
if (els[i])
var tmp = rect(els[i]);
if ( (dir * tmp[prop]) < (dir * ref[prop]))
ref = tmp;
found = i;
// hide back the submenu
if (els[1] && hideSubmenu){
this.hideSubmenu(els[1]);
els[1].style.visibility = '';
return found;
Spry.Widget.MenuBar.camelize = function(str)
if (str.indexOf('-') == -1){
return str;
var oStringList = str.split('-');
var isFirstEntry = true;
var camelizedString = '';
for(var i=0; i < oStringList.length; i++)
if(oStringList[i].length>0)
if(isFirstEntry)
camelizedString = oStringList[i];
isFirstEntry = false;
else
var s = oStringList[i];
camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
return camelizedString;
Spry.Widget.MenuBar.getStyleProp = function(element, prop)
var value;
try
if (element.style)
value = element.style[Spry.Widget.MenuBar.camelize(prop)];
if (!value)
if (document.defaultView && document.defaultView.getComputedStyle)
var css = document.defaultView.getComputedStyle(element, null);
value = css ? css.getPropertyValue(prop) : null;
else if (element.currentStyle)
value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
catch (e) {}
return value == 'auto' ? null : value;
Spry.Widget.MenuBar.getIntProp = function(element, prop)
var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
if (isNaN(a))
return 0;
return a;
Spry.Widget.MenuBar.getPosition = function(el, doc)
doc = doc || document;
if (typeof(el) == 'string') {
el = doc.getElementById(el);
if (!el) {
return false;
if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
//element must be visible to have a box
return false;
var ret = {x:0, y:0};
var parent = null;
var box;
if (el.getBoundingClientRect) { // IE
box = el.getBoundingClientRect();
var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
ret.x = box.left + scrollLeft;
ret.y = box.top + scrollTop;
} else if (doc.getBoxObjectFor) { // gecko
box = doc.getBoxObjectFor(el);
ret.x = box.x;
ret.y = box.y;
} else { // safari/opera
ret.x = el.offsetLeft;
ret.y = el.offsetTop;
parent = el.offsetParent;
if (parent != el) {
while (parent) {
ret.x += parent.offsetLeft;
ret.y += parent.offsetTop;
parent = parent.offsetParent;
// opera & (safari absolute) incorrectly account for body offsetTop
if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
ret.y -= doc.body.offsetTop;
if (el.parentNode)
parent = el.parentNode;
else
parent = null;
if (parent.nodeName){
var cas = parent.nodeName.toUpperCase();
while (parent && cas != 'BODY' && cas != 'HTML') {
cas = parent.nodeName.toUpperCase();
ret.x -= parent.scrollLeft;
ret.y -= parent.scrollTop;
if (parent.parentNode)
parent = parent.parentNode;
else
parent = null;
return ret;
Spry.Widget.MenuBar.stopPropagation = function(ev)
if (ev.stopPropagation)
ev.stopPropagation();
else
ev.cancelBubble = true;
if (ev.preventDefault)
ev.preventDefault();
else
ev.returnValue = false;
Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName]; -
How to build a website with working pulldown menus on iPad and iPhone?
Hi everyone!
I have designed a website, http://fccr.ucsd.edu/ , base on "Template #1" by Chris Converse, available at http://www.adobe.com/devnet/dreamweaver/articles/dreamweaver_custom_templates.html
The pull-down menus have a curious glitch on the iPad/iPhone which I wanted to ask for help on from anyone who might be knowledgeable on this issue (I have also posted this question on the apple pages, but so far without much constructive help...)
Template #1 has various href="#" tags that presumably the user is to fill in. This works fine on all desktop browsers I checked (IE/Firefox/Opera/Chrome/Safari), but if the tag corresponds to a menu that has to pull down, then by replacing this default tag with a URL, an iPhone/iPad will insist on following the link rather than allowing the menu to pull down. This is a reasonable consequence of using a finger rather than a mouse (which can both hover and click) to operate the menu. Fair enough, it is straightforward to design the dropdown menu layout so that its entries are either links OR designed to open up a new pull-down menu. (future users of these templates should probably be warned about this...)
There is a little glitch, though. If you are exploring Template #1 (or my website) with an iPhone or an iPad, the first pull-down menu which you attempt to pull down after you load a new page will initially not function. However, all of the other pull-down menus will function after that, and after you pull down a different menu, the original pull-down menu that you originally attempted to pull down will also work.
This appears to be a curious feature (bug?) in the implementation of the <UL>, <LI>, and/or <A> tags in the iPhone and iPad browsers. The site http://www.bestbuy.com/ uses the same three tags with some slightly different code behind it, and it somehow avoids this issue (that is, it works correctly on both all five major Desktop browsers and the iPhone/iPad).
Thus, I would very much like Adobe's help to figure out what bestbuy is doing with their use of the <UL>, <LI>, and/or <A> tags in their pull down menus, so that these menus work without this little glitch on the iPhone/iPad, and then to see if we can modify Chris Converse's Template #1 (and my web page) to do the same...
Thanks in advance for your help!
Best regards,
- TomHi Tom,
You might want to read this article:
http://www.projectseven.com/products/menusystems/pmm2/ug-examples/accessible/index.htm
I don't know of any other menu tool that offers this type of solution - but I thought I'd chime in because the other answers seemd (through no one's fault) that this could not be done ;-)
Al Sparber - PVII
http://www.projectseven.com
Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/hgm
The Ultimate Web 2.0 Carousel -
Hover no longer works in Safari
The hover function no longer works correctly in my Safari although it works fine in Firefox. If I position my cursor over a link and move it slightly, underlining flickers on and off and the cursor switches back and forth between a hand and arrow, although the link still works. If I don't move the cursor, the hover image disappears completely. It happens on all the websites I normally go to. This is really a pain with sites that use pulldown hover menus and photo sites that use hover to display larger versions of thumbnails. Update says all my software is up to date. I'm using 10.4.8 and Safari Version 2.0.4 (419.3). I'm not loading any stylesheets via preferences. Any ideas?
Another data point: this problem doesn't occur on any of the links on my gmail page.
(it does happen on this forum page) -
Trouble with Spry Menu Bar Not Opening on Hover
I have two Spry Menu Bars on this one page. They were both working fine. Now the menu bar on the top right is not opening on rollover. I have uploaded the Spry .JS and .CSSfiles to the server.Could it be that I added 2 to the names of the CSS styles, but not all of them? I just tested them all with 2 after the style name, and it didn't fix it.
I also noticed that the ability to edit these two navigation bars using the Property Inspector went away. I can't seem to click on them to edit. Now I edit them through the code only.
Rebuild it on another page, and paste in the code?
Suggestions?
ALso, getting an error message on line 2 of HTML below, which I don't remember editing.
I will paste the template page HTML, then the CSS, then the Javascript Spry file for Menu Bar Horizontal. I did not edit the JS file at all.
Link to the uploaded files: http://www.sproulcreative.com/filetest/panin_website/
Thanks for any help you can offer.
D
HTML for template page:
<!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="doctitle" -->
<title>Press Reviews of Paninos Italian Restaurant Food in three Colorado Locations</title>
<!-- TemplateEndEditable -->
<link href="../styles_paninositalianrestaurant.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryMenuBar_topnav.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="../SpryAssets/SpryMenuBarHorizontal_topnav.css" rel="stylesheet" type="text/css" />
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable --><!-- TemplateParam name="LinksSidebar" type="boolean" value="true" -->
</head>
<body>
<div id="wrapper">
<a href="#skiptomaincontent">
<img src="../images/spacer.gif" alt="Skip to main page content" name="spacer" width="1"
height="1" class="invisible" id="spacer"> </a><!--ANCHOR FOR SCREEN READERS-->
<!--START TOP NAV DIV-->
<div id="topnav">
<!--START TWITTER/FACEBOOK MENU BAR -->
<script type="text/javascript">
<!--
var MenuBar2 = new Spry.Widget.MenuBar("twittermenu", {imgDown:"../SpryAssets/SpryMenuBarDownHover.gif", imgRight:"../SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
<ul id="twittermenu" class="MenuBarHorizontal2">
<li><a href="../paninos_local_italian_restaurant_fort_collins_colorado_springs_minnesota.html">H ome</a></li>
<li><a href="../reviews_italian_restaurant_food.html">Reviews</a></li>
<li><a href="../history_of_paninos_local_italian_restaurant_coloradosprings_fortcollins_minnesot a.html">History</a></li>
<li><a class="MenuBarItemSubmenu2" href="#">Twitter</a>
<ul>
<li><a href="http://twitter.com/Paninosfc">Follow Fort Collins, CO, Paninos</a></li>
<li><a href="http://twitter.com/paninosmn">Follow Minnesota Paninos</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu2">Facebook</a>
<ul>
<li><a href="http://www.facebook.com/search/?q=Paninos&init=quick#/pages/North-Oaks-MN/Paninos/13234142 7180?v=wall&ref=search">Minnesota Twin Cities Four</a></li>
</ul>
</li>
</ul>
<!--END TWITTER/FACEBOOK MENU BAR-->
</div>
<!--ENDS TOP NAV DIV-->
<div id="pagebg">
<div id="centralpageborder"><!--FOR BORDER TRIM & BG color-->
<!--START OF HEADERBOX-->
<div id="headerbox">
<div align="left">
<img src="../images/web_logo_paninos_final.png" alt="Paninos Italian Restaurant Logo (black text with a tomato for the letter O), Your family's Italian restaurant for over 35 years, locally owned and operated." width="215" height="118" class="paddingbottom" />
<!--START OF MAIN FOUR NAVIGATION -->
<ul id="MainFourNav" class="MenuBarHorizontal">
<li><a href="#" class="MenuBarItemSubmenu"><img src="../images/img_mainnav_locations_contact.png" alt="Paninos Italian Restaurant Locations and Contact Information: Colorado Springs, Fort Collins, Minnesota" name="locationscontactbutton" width="167" height="24" border="0" id="locationscontactbutton" /></a> <ul>
<li><a href="../contact_info_italian_restaurant_fort_collins_colorado_paninos.html">Fort Collins, Colorado, by CSU</a></li>
<li><a href="../contact_info_italian_restaurant_colorado_springs_downtown_colorado_paninos.html" >Colorado Springs Downtown: Tejon St. by Colorado College</a></li>
<li><a href="../contact_info_italian_restaurant_colorado_springs_8th_street_colorado_paninos.htm l">Colorado Springs: South Eighth St.</a></li>
<li><a href="http://paninos.com/minnesota/">Minnesota website</a></li>
</ul></li>
<li><a href="#" class="MenuBarItemSubmenu"><img src="../images/img_main4nav_download_menus.png" alt="Download Italian Restaurant Menus in PDF format for restaurants in Fort Collins, Colorado; Colorado Springs, Colorado; and Minnesota" name="menudownloadbutton" width="142" height="24" border="0" id="menudownloadbutton" /></a>
<ul>
<li><a href="#"><em>Please pick your favorite Paninos:</em></a></li>
<li><a href="../online_menus_local_italian_food/Paninos_Menu_ColoradoSprings_Downtown.pdf">Color ado Springs Downtown: Tejon St. by Colorado College</a></li>
<li><a href="../online_menus_local_italian_food/Paninos_Menu_ColoradoSprings_Eighth_Street.pdf"> Colorado Springs: South Eighth St.</a></li>
<li><a href="../online_menus_local_italian_food/Paninos_Menu_Fort_Collins_Colorado.pdf">Fort Collins, Colorado, by CSU</a></li>
<li><a href="http://paninos.com/minnesota/">Minnesota (go to website)</a></li>
</ul>
</li>
<li><a href="../photo_gallery_pasta_dishes_pizza_italian_food.html"><img src="../images/img_main4nav_photo_gallery.png" alt="Photo Gallery of Local Italian Food including pizza and pasta" name="photogallery" width="56" height="24" border="0" id="photogallery" /></a> </li>
<li><a href="../pizza_coupons_and_special_deals_italian_food.html"><img src="../images/img_main4nav_specials.png" alt="Pizza Coupons and Specials" name="pizzacouponsandspecials" width="71" height="24" border="0" id="pizzacouponsandspecials" /></a> </li>
</ul>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MainFourNav", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
<!-- TemplateBeginEditable name="HeaderPhotos" -->
<p class="headerphotos"><img src="../images/imgheader_lasagna_beef_hot_cheesey_coloradosprings_fortcollins_italian_res taurant.png" width="263" height="133" /><img src="../images/imgheader_spinach_salad_with_chicken.png" width="263" height="133" /><img src="../images/imgheader_big-t-pizza2.png" width="263" height="133" /></p>
<!-- TemplateEndEditable --></div>
</div><!--ENDS HEADERBOX DIV-->
<div id="bodybox"><!--BOX AROUND MAIN PAGE TEXT, FOR WHOLE PAGE BELOW HEADER AREA-->
<div id="pagetitle"><!-- TemplateBeginEditable name="MainPageHeader" --><img src="../images/img_title_press_reviews_italian_restaurant.png" width="307" height="38" /><!-- TemplateEndEditable --></div><!--ENDS PAGE TITLE-->
<div id="innerbdybox"><!--WRAPS ALL MAIN CONTENT BELOW BODYBOX TITLE, all 3 columns -->
<div id="content"><!--WRAPS MAINTEXT AND PHOTO SIDEBAR COLUMNS-->
<div id="maintext"><!--MAINTEXT OR BODY CONTENT OF P-->
<!-- TemplateBeginEditable name="BodyTextSection" -->
<a name="skiptomaincontent" id="skiptomaincontent"></a><!--ANCHOR FOR SCREENREADERS-->
<h1>A Tradition Food And Sports: <br />
CC & Panino’s Love of Hockey Runs From Colorado to Minnesota</h1>
<h4>Byline: By Jim Bainbridge, The Gazette</h4>
<p>No Colorado Springs business has had a deeper bond with the Colorado College hockey program during the past three decades than Panino’s Restaurant, a connection seen on its walls, in its clientele and in its bloodlines.<br />
Panino’s has been tied to the school’s hockey program since the restaurant was bought in 1974 by former CC All-America hockey player Tony Frasca. It’s still the place to be on game day a generation later with his son Mike running things. <a href="http://daily.gazette.com/Repository/ml.asp?Ref=VGhlR2F6ZXR0ZS8yMDA1LzAzLzI5I0FyMDMzMDI=&Mo de=HTML&Locale=english-skin-custom"><span class="smalltext">Click here to view entire article.</span></a><br />
<span class="smalltext">(Reprinted with permission of The Gazette)</span></p>
<!-- TemplateEndEditable --> </div>
<!--ENDS MAINTEXT DIV-->
<div id="photosidebar">
<!--STARTS PHOTO SIDEBAR DIV-->
<!-- TemplateBeginEditable name="PhotoSidebar" --><img src="../images/img_waiter1_pizza_lasagna.png" alt="Happy waiter serving Pizza and Lasagna" width="190" height="158" /> <br />
<img src="../images/img_panino_italian_grinder_sandwich.png" alt="Grinder Hot Italian Sandwich called a Panino" width="190" height="158" /><!-- TemplateEndEditable --></div>
<!--ENDS PHOTOSIDEBAR DIV-->
</div><!--ENDS #CONTENT DIV THAT ENCLOSES 2 COLUMNS- MAINTEXT AND PHOTOSIDEBAR-->
<!-- TemplateBeginIf cond="_document['LinksSidebar']" --><!-- TemplateBeginEditable name="EditRegion3" -->
<div id="linkssidebar"><!--START LEFT LINKSSIDEBAR DIV-->
<p>The Gazette<br />
The Coloradoan<br />
The North Forty News<br />
Colorado Springs Times</p>
</div><!--ENDS LINKSSIDEBAR DIV-->
<!-- TemplateEndEditable --><!-- TemplateEndIf -->
</div><!--ENDS INNERBODYBOX DIV THAT WRAPS ALL 3 COLUMNS BELOW THE HEADER -->
<div id="footer"> </div><!--CLEARS CONTENT BEFORE LOWER CONTENT BORDER-->
<br />
<br />
</div> <!--****ENDS BODYBOX DIV THAT ENCLOSES PAGE HEADER BELOW "HEADER" AREA,INNERBODYBOX (FOR ALL 3 COLUMNS OF CONTENT), and FOOTER DIV (TO CLEAR CONTENT) . MOVING THIS AFER THE LINKKSIDEBAR SEEMED TO MAKE IT ALGIN CORRECTLY. PUTTNG AFTER THE PHOTOSIDEBAR MADE THE MAINTEXT HAVE SCROLL BAR-->
</div><!--ENDS CENTRALPAGEBORDER DIV-->
</div><!--ENDS PAGEBG DIV-->
</div><!--ENDS WRAPPER TO MAKE PAGE LEFT JUSTIFY -->
</body>
</html>
CSS for Spry Menu Bar:
@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.MenuBarHorizontal2
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
/*margin-top: -10px; */
margin-right: 0;
margin-bottom: 0;
margin-left: 0px;
padding-top: 0;
padding-bottom: 0;
/* 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;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal2 li
list-style-type: none;
font-size: 95%;
position: relative;
text-align: left;
cursor: pointer;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
/* 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.MenuBarHorizontal2 ul
margin: 0;
padding: 0;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
/* 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.MenuBarHorizontal2 ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal2 ul li
width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal2 ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal2 ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal2 ul
border: 1px solid #9E2532;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal2 a
display: block;
cursor: pointer;
padding: 0.5em 0.75em;
color: #F3E8CC;
text-decoration: none;
background-color: #663300;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal2 a:hover, ul.MenuBarHorizontal2 a:focus
color: #FFF;
background-color: #663300;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal2 a.MenuBarItemHover, ul.MenuBarHorizontal2 a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal2 a.MenuBarSubmenuVisible
color: #FFF;
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.MenuBarHorizontal2 a.MenuBarItemSubmenu2
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 100% 50%;
/* 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.MenuBarHorizontal2 ul a.MenuBarItemSubmenu2
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 100% 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.MenuBarHorizontal2 a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 100% 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.MenuBarHorizontal2 ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 100% 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.MenuBarHorizontal2 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.MenuBarHorizontal2 li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
JAVASCRIPT FILE FOR MENU BAR HORIZONTAL:
/* 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);It has to do with all of your absolutely positioned elements. What's happening is that the menu is falling behind the absolutely positioned elements on your page. Since there is nothing there, it's like trying to click a link that is outside your home while you are staring through a window. Personally with that page setup you have now I really don't see a need for absolutely positioned elements. But if you feel you will require them as part of your design you need to ensure the z-index of your menu layer is greater than that of the body elements positioned below it.
-
Displaying drop down menu lists on :hover
I'm currently trying to implement a drop down menu into my website. My site is at http://www.derektoigo.com/assets/livesites/deploy/index.html (CSS - http://www.derektoigo.com/assets/livesites/deploy/css/style.css )
I've been working with CSS for a while and can employ mosts techniques, but this is my first time attempting to implement a drop down menu. The main reason I'm here is because I'm looking to better understand why my menu won't display at all and how to overlay these lists over other positioned objects on the page. I'd like to have my menu display horizontally in the black bar on the top of the page and have the ul's in the li's (drop downs) display when I hover over a menu link with some margin (about 30px) to the right of each link. Additionally I find that when I hover my mouse over a link unless both it and its drop down lists have a fixed width, the menu item will "jump" to the side; if possible instead I'd be interested in using flexible width for each menu item and just keeping the drop down lists set to a fixed width, but I don't know how to employ this without the margins being messed up. I'm also concerned about the slider region I implemented being pushed down as a result of the menu not being in the header bar.
I know this is kinda vague but to be honest I'm really not sure what to explain than otherwise just showing it to you, so if anyone can show me what I'm (not) doing in my CSS that should be different it would be really appreciated. Thanks so much.I don't see any menus on your index page.
Maybe this will help get you started. View source in browser to see how the code comes together.
http://alt-web.com/DEMOS/CSS2-Horiz-Drop-Menu.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com -
DW-MX-04 Drop-down menus won't work.
I'm using Dreamweaver MX 2004 (have been for several years, so I know my way around it). I want to create drop-down or fly-outs menu's to consolidate page links into categores in order to reduce the number of link tabs I have on each page. I've been able to create the menu's I needed (using: Tag Chooser\ Behaviors\ Show Pop-U Menu), but when I preview the pages in IE, the text only shows on the mouseover text (not on top) despite having the text color set as black in the Menu window. But it gets worse. When I uploaded the page to try it, the drop down menus don't show up at all when I hover over the main buttons and I get javascript errors.
Can anyone give me so assistance on how to resolve this?
I've checked the text color issue using the code view editing pane, and it matches the way I have it setup in the Pop-Up Menu. But that's the least of my worries if I can't get them to work at all when the pages are live.
Thanks...JEBMX2004 software is also somewhat antiquated and no longer supported by Adobe. So it shouldn't surprise you that the tools from nearly a decade ago are obsolete today. The web itself has changed significantly since 2004!
Web standards have moved from HTML3 to HTML5. Layouts have departed from old school nested tables to more efficient CSS. Unlike a decade ago, today's web devices include everything from hand held smartphones & tablets to laptops, desktops and TV displays. So it's not possible to stand still and keep pace with the evolving web. If you're not moving forward, you're falling behind.
CSS is not an extension. HTML = content. CSS = Cascading Style Sheets. CSS is used to style your content. With CSS you can make an ordinary list look like a very cool menu with buttons, borders, shadows, drop-down and rollover effects. If you master CSS, you can do some very creative things with it. However, coding skills are essential.
Below is an example of an unordered list styled with CSS to make a nice horizontal drop-menu.
http://alt-web.com/DEMOS/CSS-Multi-colored-drop-menu.shtml
To further illustrate the efficiency and power of CSS, look at CSS Zen Garden.
http://www.csszengarden.com/
Every page on the right panel contains exactly the same HTML code as the first. The only difference is the CSS code.
The shift to CSS is intended to help web designers keep styles separate from content. Learning to work with CSS will make a you better web designer and save countless hours of tedious re-coding when you decide to change the look of your site. It's much easier to edit one file instead of many.
Below are some links to help you learn more about how to work with CSS.
HTML & CSS Tutorials -
http://www.html.net/
http://w3schools.com/
http://www.csstutorial.net/
https://tutsplus.com/2013/03/the-modern-web-designer/
Have fun!
Nancy O.
Maybe you are looking for
-
Hello everyone, I have two diff interfaces both are outbound Interfaces to which there is common i/P IDOC , Both the interfaces are using BPM. When we trigger an IDOC from background SAP system , Interface 1 completes successfully . But The iNterfac
-
SAP and Work Market - Are you a presales consultant? Join the SAP presales community on Work Market.
Do you want to leverage your business, technical and interpersonal skills to position SAP software solutions to overcome business challenges and help prospective customers "Run Better"? Do you want to be rewarded financially and professionally for de
-
Please HELP! mousewheel issue!
Hi, I have a VBOX that contains a repeater that is creating a bunch of TextArea's within it that have htmltext values and they are selectable. The VBOX has "verticalScrollPolicy=true". When the vbox 1st renders the mouse wheel works and the scroll ba
-
Can you watch movies with lid closed on Powerbook G4 that's connected to TV
Hi there, is it possible to have a Powerbook G4 connected to a TV and watch movies with the Powerbook's lid closed.
-
Draws against syndicated facility
Hi, I have created different lines of credit like: 1. Short term loan 2. Medium term loan 3. Bill discounting 4. Letters of Credit etc. using T-code TCL1 I then create a Syndicated facility transaction (Product type 56B transaction type 200) using FT