Forums
View unanswered posts | View active topics It is currently Tue Oct 21, 2014 5:57 am



Reply to topic  [ 1 post ] 
 Horizonal Nav Menu With Sub Menus Not Working Correctly 
Author Message

Joined: Sat Dec 28, 2013 12:29 pm
Posts: 2
Post Horizonal Nav Menu With Sub Menus Not Working Correctly
I have a Nav Menu made from a list item. Underneath an LI is another UL. In order to position and hide the sub menu until hover, it was positioned absolute.

Hovering over the list item that reveals the drop down menu creates some strange events with PIE. Here is a list of the strange events:
1)Hover over the correct LI and then move away to the left or right over the next LI. The background still appears even though it should not once you leave the correct LI.
2)I had to use display hidden, because when you hover over the LI the background appears quite a bit down the page and off to the right until you are below the LI at which time it "moves" to the correct position.
3)Coming into the LI from the other LI items to the left and right of the target LI will show the menu but no background so you can't read the menu. Once you drop down below the LI the background shows up. I am sure this has something to do with #2.

I was able to get it working somewhat on IE8, but in compatibility mode (IE7 effectively) that was a no go. The behavior was strange enough and the drop down menu hid behind a div even though I attempted to add z-index and also relative positioning. Just wouldn't work.

Here is the toolbar HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<title></title>
<!--Begin Meta Data-->
<meta content="FrugalWebDesigns.com" name="author">
<meta name="title" content="">
<meta name="abstract" content=" ">
<meta name="resource-type" content="document">
<meta name="robots" content="INDEX,FOLLOW">
<meta name="revisit-after" content="10 days">
<meta name="description" content="">
<meta name="keywords" content=" ">
<meta name="classification" content="">
<!--COME BACK TO COMPLETE FOR GOOGLE SITE VERIFICATION-->
<!-- Causes ipad to jerk and size clumsily
<meta name="google-site-verification" content=""> <meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0;'> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name = "viewport" content = "width=980"> -->
<!--END Meta Data-->
<!--Begin Links-->
<link rel="shortcut icon" type="image/x-icon" href="">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--END Links-->
<!-- BEGIN JAVASCRIPT -->
<!--[if lt IE 9]><script src="Javascript/dist/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script type="text/javascript"> window.location = "http://www.finedesignsandgraphics.com/ie8.html";</script><![endif]-->
<script src="Javascript/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="avascript/ReloadOnResize.js"></script>
<script type="text/javascript" src="avascript/Scroller.js"></script>
<script type="text/javascript" src="Javascript/Clock.js"></script>
<!-- END JAVASCRIPT -->
<!-- BEGIN GOOGLE ANALYTICS -->

<!-- END GOOGLE ANALYTICS -->
<!--Start of Zopim Live Chat Script-->

<!--End of Zopim Live Chat Script-->
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1//style.css" media="screen">
<script type="text/javascript" src="engine1//jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<body class="mainbody" onload="startmarquee();GetClock();">
<section class="mainwrapper">

<nav>
<ul class="mainnav">
<li class="mainlink"><a href="http://finedesignsandgraphics.com/">Home</a></li>
<li class="mainlink"><a href="http://finedesignsandgraphics.com/Services.html">Services
Offered</a></li>
<li class="portfoliolink" onclick="return true"><a class="minus6pix" href="http://finedesignsandgraphics.com/Portfolio.html">Portfolio</a>
<!--DROPDOWN MENU BEGINS-->
<ul class="mainnav">
<li><a class="anchorsub" href="http://finedesignsandgraphics.com/Vehicle.html">Vehicle
Graphics + Van Lettering</a></li>
<li><a class="anchorsub" href="http://finedesignsandgraphics.com/Full.html">Vehicle
Wraps + Box Truck Graphics</a></li>
<li><a class="anchorsub" href="http://finedesignsandgraphics.com/Trailer.html">Trailer
Graphics + Store Front Lettering </a></li>
<li><a id="lastlink" class="anchorsub" href="http://finedesignsandgraphics.com/Signs.html">Signs
+ Banners + A-frames</a></li>
</ul>
</li>
<!--DROPDOWN MENU ENDS-->
<li class="mainlink"><a href="http://finedesignsandgraphics.com/Quote.html">Request
A Quote</a></li>
<li class="mainlink"><a href="http://finedesignsandgraphics.com/Aboutus.html">About
Us</a></li>
</ul>
</nav>


</body>
</html>


=================and here is the CSS================



img
{
max-width: 100%; /*container for background-required to keep aspect ratio when shrinking*/
border:none; /*IE 8,9,10 add borders to images that are also links*/

}



body
{
max-width: 100%; /*container for background-required to keep aspect ratio when shrinking*/
height: auto; /*container for background-required to keep aspect ratio when shrinking*/
padding:0; /*removes edge around body*/
margin:0; /*removes edge around body*/
font-family:vijaya;
background-color:black;
/*background: black url('../Background/CarbonFiber.jpg');*//*possible option-left background black for now*/

}







.mainwrapper
{

background: black url('../Background/CarbonFiberSmall.jpg') center top; /*IE8 fall back if no javascript*/
background: url('../Background/CarbonFiber.jpg'), black;
max-width:100%; /*required to scale image (background image) within it's container*/

background-repeat:repeat-y;
background-size:100%;
-pie-background: url('../Background/CarbonFiber.jpg')repeat-y contain, black; /*IE 6-8*/
behavior: url(Javascript/PIE/PIE.htc);

}


/*================================================================
Main Toolbar Navigation-including IE7 via PIE (IE8 is below)
=================================================================*/

.minus6pix
{
margin-right:-6px; /*add class to any anchor that has a drop down menu to remove extra space*/
}

.mainnav /*UL class is main nav*/
{
clear:both;
text-align:center;
width:100%;
height:auto;
margin:0;
padding:0;
background: url('../Background/grey-gradient.jpg');
white-space:nowrap;
box-shadow: 5px 5px 10px grey; /*causes space at bottom of link*/
word-spacing: -.3em; /* Effectively collapses white-space in the UL between LI Items except for IE7*/
z-index:10;
position:relative;



}

ul.mainnav /*same as above since the UL has the class.*/
{

}

.mainnav li
{
position:relative; /*required to place the absolute sub menu at the edge of the list item*/
display:inline;
list-style-type:none;
font-size:27px; /*for IE 8 and below-doesn't recognize REM-match font size to REM size*/
font-size:1.7rem; /*fall back for browsers that don't use vw font size.*/
/*come back font-size: 2.45vw; */
border-right:1px solid black;

font-weight:bold;
word-spacing:normal; /* Reset word-spacing to normal value */


}

.mainnav li:first-child
{
border-left:1px solid black;

}

.mainnav li a
{

text-decoration:none;
color:black;
padding: 0px 1.5% 0px 1.5%;
transition:color .25s ease .1s;
/*IE7*/*margin-right:-6px;/*word spacing doesn't work here*/
}

.mainnav li:hover>a
{
color:white;
background: #262626;
padding: 0px 1.5% .1% 1.5%; /*padding around anchor*/
/*IE7*/*margin-right:-6px;/*word spacing doesn't work here*/

}





/*========================================
Sub Menu for Main Navigation
========================================*/

.mainnav ul
{
position:absolute; /*prior list items must be relative*/
/*chg*/height:0; /*reduces sub menu to zero height so it doesn't show unless hovered over*/
/*chg*/overflow:hidden; /*hides sub menu when height is zero*/
transition:opacity .25s ease .1s;
/*chg*/opacity:0;
top:100%;
left:0;
margin-top:.70%;
margin-left:-1.5%;
width:auto; /*native width is 100% of parent list item so must make larger*/
white-space:nowrap; /*required so the sub menu list items don't wrap at 100% of LI*/
box-shadow: 5px 5px 10px grey; /*change color of box shadow here. can omit if same as main menu*/
border-radius:0px 0px 10px 10px;
padding-right:15px; /*adds padding after text in sub menu. Can't use percent varies with browser*/
/*IE7*/*top:101.25%;
/*IE7*/*left:13%;
z-index:15;
}

.mainnav li:hover>ul
{
opacity:1;
height:auto; /* shows the list when the li is hovered over*/


}



.mainnav ul li
{
border:none; /*remove border from sub menu list items*/
height:auto;

}

.mainnav ul li:first-child
{
border:none; /*remove first child border from sub menu list items*/

}


.mainnav ul li a
{
text-align:left;
display:list-item;
list-style-image: url('../Icons/RightArrow.png');
list-style-position:inside; /*required so that arrows are part of the highlighted item and change to white arrows*/
height:auto; /*required or the list will show up when mouse is near it*/
font-size:100%; /*Keeps font from exceeding sub menu box-keeps font-size consistent*/
padding-left:1%;
margin-top:1%;
margin-right:-25%; /*allows highlight to extend past the text*/
/*IE7*/*list-style-image:none;
/*IE7*/*list-style:none;
/*IE7*/*background:url('../Icons/RightArrow.png') no-repeat 1% 65%;
/*IE7*/*padding-left:4%;



}

.mainnav ul li:first-child>a /*allows more space between main list and first list item--tricky!*/
{
margin-top:3%;

}

.mainnav ul li:hover a
{
text-align:left;
display:list-item;
list-style-image: url('../Icons/RightArrowWhite.png');
list-style-position:inside;
border:none; /*border from sub menu list items*/
height:auto; /*required or the list will show up when mouse is near it*/
padding-left:1%;
margin-top:1%;
border-radius: 0;
/*IE7*/*list-style-image:none;
/*IE7*/*list-style:none;
/*IE7*/*background:#262626 url('../Icons/RightArrowWhite.png') no-repeat 1% 65%;
/*IE7*/*padding-left:4%;

}

.mainnav ul li:first-child>a:hover /*allows more space between main list and first list item when hovered too--tricky!*/
{
margin-top:3%;

}


=============================================================================

NOW THE IE8 Changes I had to make to get PIE working somewhat

===========================================================================

/*=========================================================================

====================TRUE IE8 HACK-might target IE 10 too?=================

======================================================================*/


@media \0screen
{


/*========================================
Main Toolbar Navigation
========================================*/



.minus6pix
{
margin-right:-6px; /*add class to any anchor that has a drop down menu to remove extra space*/
}

.mainnav /*UL class is main nav*/
{
clear:both;
text-align:center;
width:100%;
height:auto;
margin:0;
padding:0;
background-image: url('../Background/grey-gradient.jpg');
white-space:nowrap;
box-shadow: 5px 5px 10px grey; /*causes space at bottom of link*/
word-spacing: -.3em; /* Effectively collapses white-space in the UL between LI Items */
/*IE8-PIE Quirk*/position:relative;

}

ul.mainnav /*same as above since the UL has the class.*/
{

}

.mainnav li
{
position:relative; /*required to place the absolute sub menu at the edge of the list item*/
display:inline;
list-style-type:none;
font-size:27px; /*for IE 8 and below-doesn't recognize REM-match font size to REM size*/
font-size:1.7rem; /*fall back for browsers that don't use vw font size.*/
/*come back font-size: 2.45vw; */
border-right:1px solid black;
font-weight:bold;
word-spacing:normal; /* Reset word-spacing to normal value */

}

.mainnav li:first-child
{
border-left:1px solid black;

}

.mainnav li a
{

text-decoration:none;
color:black;
padding: 0px 1.5% 0px 1.5%;
transition:color .25s ease .1s;

}

.mainnav li:hover>a
{
color:white;
background: #262626;
padding: 0px 1.5% .1% 1.5%; /*padding around anchor*/


}





/*========================================
Sub Menu for Main Navigation - IE8 only
========================================*/

.mainnav ul
{
position:absolute; /*prior list items must be relative*/
/*chg*/height:0; /*reduces sub menu to zero height so it doesn't show unless hovered over*/
/*chg*/overflow:hidden; /*hides sub menu when height is zero*/
transition:opacity .25s ease .1s;
/*chg*/opacity:0;
top:100%;
left:0;
margin-top:.70%;
margin-left:-1.5%;
width:auto; /*native width is 100% of parent list item so must make larger*/
white-space:nowrap; /*required so the sub menu list items don't wrap at 100% of LI*/
box-shadow: 5px 5px 10px grey; /*change color of box shadow here. can omit if same as main menu*/
border-radius:0px 0px 10px 10px;

padding-right:15px; /*adds padding after text in sub menu. Can't use percent varies with browser*/
/*IE8*/padding-right:0%;
/*IE8*/behavior: url(Javascript/PIE/PIE.htc);
/*IE8*/visibility:hidden; /*to hide and show the dropdown menu using PIE*/
/*IE8-PIE Quirk*/left:-370%;
/*IE8-PIE Quirk*/width:16em;
/*IE8 and Pie Quirk*/z-index:20; /*must be larger than section 1 or toolbar will fall behind.*/

}
.mainnav li:hover>ul
{
opacity:1;
height:auto; /* shows the list when the li is hovered over*/
/*IE8*/visibility:visible;
/*IE8-PIE Quirk*/overflow:visible;
}

.mainnav ul li
{
border:none; /*remove border from sub menu list items*/
height:auto;
/*IE8-PIE Quirk*/display:list-item;
/*IE8-PIE Quirk*/left:105%;

/*IE8-PIE Quirk*/width:100%;/*jog this and the margin-left to cover only the background with the hover color*/
/*IE8-PIE Quirk*/margin-left:-3.8%; /*jog this and the width to cover only the background with the hover color*/

}


.mainnav ul li:first-child
{
border:none; /*remove first child border from sub menu list items*/

}


.mainnav ul li:first-child
{
border:none; /*remove first child border from sub menu list items*/

}

.mainnav ul li a
{
text-align:left;
display:list-item;
list-style-image: url('../Icons/RightArrow.png');
list-style-position:inside; /*required so that arrows are part of the highlighted item and change to white arrows*/
height:auto; /*required or the list will show up when mouse is near it*/
font-size:100%; /*Keeps font from exceeding sub menu box-keeps font-size consistent*/
padding-left:1%;
margin-top:1%;
margin-right:0; /*allows highlight to extend past the text*/
/*IE8*/list-style-image:none;
/*IE8*/list-style-position:outside;
/*IE8*/padding-left:8%;
/*IE8*/background:url('../Icons/RightArrow.png') no-repeat 1% 65%;

/*IE8-PIE Quirk*/padding-left:7%;
}


.mainnav ul li:first-child>a /*allows more space between main list and first list item--tricky!*/
{
margin-top:3%;

}

.mainnav ul li:hover a
{
text-align:left;
display:list-item;
list-style-image: url('../Icons/RightArrowWhite.png');
list-style-position:inside;
border:none; /*border from sub menu list items*/
height:auto; /*required or the list will show up when mouse is near it*/
padding-left:1%;
margin-top:1%;
border-radius: 0;
/*IE8*/list-style-image:;
/*IE8*/list-style-position:outside;
/*IE8*/background:#262626 url('../Icons/RightArrowWhite.png') no-repeat 1% 65%;
/*IE8*/padding-left:7%;
/*IE8-PIE Quirk*/list-style-image:none;


}

.mainnav ul li:first-child>a:hover /*allows more space between main list and first list item when hovered too--tricky!*/
{
margin-top:3%;

}




I am primarily sending this so the developers can test my findings and improve PIE for use with drop down menus. At this time, I am using PIE for the site even with it's quirks. They aren't bad enough to be a problem, just not as professional looking as I would like.

Many other affects on static items such as backgrounds, rounded corners, etc works great, so keep up the good work.

I am using the Beta 2.0 version.

A noteworthy item. I had to make adjustments without PIE (before I found PIE) and those are the /*IE* comments*/ Later I added PIE and called those adjustments /*IE8 Pie Quirk*/ so you can keep apart the regular IE8 adjustments from the ones that PIE required.


Mon Dec 30, 2013 2:34 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 1 post ] 

Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.