9 replies to this topic

[zoom4267]

Editors note: Previously didn't work in ie6
it works in ie7 and FF

here is the code
#menu {
width: 12em;
background: transparent;
}

#menu ul {
list-style: none;
margin:0;
padding: 0;
}


#menu a, #menu h2 {
font: bold 12px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: transparent;

padding: 2px 3px;
margin-top: 0pt;

margin-right: 0pt;

margin-bottom: 0pt;

margin-left: 9pt;

padding-top: 2px;

padding-right: 3px;

padding-bottom: 2px;

padding-left: 3px;
}

#menu h2 {
color: #00aeef;
background: #000;
text-transform: uppercase;
}

#menu a {
color: #CC00FF;
background: transparent;
text-decoration: none;
}

#menu a:hover {
color: #CC00FF;
background: transparent;
TEXT-DECORATION: underline;

}
#menu li {

position: relative;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}
div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

body {
behavior: url(csshover.htc);
font-size: 100%;
}
#menu ul li {
float: left;
width: 100%;
}
#menu ul li a {
height: 1%;
}

#menu a, #menu h2 {
font: bold 0.9em/1.4em arial, helvetica, sans-serif;

}


<div id="menu">

<ul>
<li><h2>Animals</h2>
<ul>
<li><a href="http://www.printfection.com/GraphicWear/Dogs/_s_147356" title="">Dogs</a>
<ul>
<li><a href="http://www.printfection.com/GraphicWear/Dogs/_s_147356" title=""> Westie</a></li>
<li><a href="http://www.printfection.com/GraphicWear/Dogs/_s_147356" title="">Basset Hound</a></li>
</ul>
</li>
</ul>
</li>
</ul>


<ul>
<li><h2>Names and Initials</h2>
<ul>
<li><a href="http://www.printfection.com/GraphicWear/Name-Designs/_s_148039" title="">Heart Initials</a>
<ul>
<li><a href="http://www.printfection.com/GraphicWear/Name-Designs/_s_148039" title="">Heart with B</a></li>
</ul>
</li>
</ul>
</li>
</ul>


<ul>
<li><h2>Patriotic</h2>
<ul>
<li><a href="http://www.printfection.com/GraphicWear/Hillary/_s_148256" title="">Hillary</a>
<ul>
<li><a href="http://www.printfection.com/GraphicWear/Stars/_s_148270" title="">Star</a></li>
<li><a href="http://www.printfection.com/GraphicWear/3-Stars/_s_148271" title="">3 Star</a></li>
</ul>
</li>

<li><a href="http://www.printfection.com/GraphicWear/McCain/_s_148258" title="">McCain</a>
<ul>
<li><a href="http://www.printfection.com/GraphicWear/Stars/_s_148370" title="">Star</a></li>
<li><a href="http://www.printfection.com/GraphicWear/3-Stars/_s_148371" title="">3 Star</a></li>
</ul>
</li>

<li><a href="http://www.printfection.com/GraphicWear/Obama/_s_148257" title="">Obama</a>
<ul>
<li><a href="http://www.printfection.com/GraphicWear/Obama/_s_148257" title="">Star</a></li>
<li><a href="http://www.printfection.com/GraphicWear/Obama/_s_148257" title="">3 Star</a></li>
</ul>
</li>


</ul>
</li>
</ul>

<ul>
<li><h2>Logo Designs</h2>
<ul>
<li><a href="http://www.printfection.com/GraphicWear/Logo-Designs/_s_147134" title="">Skytopdesigns Logo</a>
<ul>
</ul>
</li>
</ul>
</li>
</ul>

<ul>
<li><h2>Auto</h2>
<ul>
<li><a href="http://www.printfection.com/GraphicWear/Auto/_s_147575" title="">Retro</a>
<ul>
<li><a href="http://www.printfection.com/GraphicWear/Auto/_s_147575" title="">Mustang</a></li>
<li><a href="http://www.printfection.com/GraphicWear/Auto/_s_147575" title="">Chevy</a></li>
<li><a href="http://www.printfection.com/GraphicWear/Auto/_s_147575" title="">Classic</a></li>
</ul>
</li>
</ul>
</li>
</ul>


<ul> <li><h2>Grunge</h2>
<ul>
<li><a href="http://www.printfection.com/GraphicWear/Grifffin/_s_147135" title="">Griffin</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

<ul>

</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Edited by rc69, 14 March 2008 - 04:38 PM.

[zoom4267]

Editors note: New problem with verticle flyouts
here is the code
what am i missing?

* {
padding: 0;
margin: 0;
font-family: Arial, sans-serif;
}
body {
margin: 5px;
font-size: 12px;
}
ul {
list-style: none;
width: 125px;
}

ul a {
color: #FFF;
text-decoration: none;
display: block;
padding: 5px 5px 5px 10px;
width: 125px;
background: #333;
}

ul a:hover {
color: #4BD8FF;
text-decoration: none;
background: #3C3C3C;
}
ul li {
border-bottom: 1px solid #FFF;
float: left;
position: relative;
}
ul li ul {
list-style: none;
position: absolute;
left: 140px;
top: 0;
display: none;
width: 125px;
border-left: 1px solid #FFF;
}

ul li:hover ul { display: block; }



<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="gallery.html">Gallery</a>
<ul>
<li><a href="gallery1.html">Gallery 1</a></li>
<li><a href="gallery2.html">Gallery 2</a></li>
<li><a href="gallery3.html">Gallery 3</a></li>
<li><a href="gallery4.html">Gallery 4</a></li>
</ul>
</li>

<li><a href="products.html">Products</a></li>
</ul>

thanks

Edited by rc69, 14 March 2008 - 04:38 PM.

[rc69]

An <html>, <head>, <style> and <body> declaration (along with their closing tags)...

Could you elaborate on your problem a bit?
What is a vertical flyout? A CSS rollover menu?
What about it isn't working?
If it's breaking your layout, could you post a screenshot?

[zoom4267]

i dont seem to have good times with menus

i am using a js menu from javascriptkit.com

it works fine for the most part,

i have one flyout but it only comes out on the home page(index) the other pages it wont come out

and it dosnt stay out long enough to click on the other menu items

i dont know enough about js to find what code does that, i would appreceiat some guidance on that.

here is the code, its identical on all pages, even the js and css file

	<ul id="verticalmenu" class="glossymenu">
<li><a href="appliance_link.html">Appliances &amp; Fireplaces </a></li>
<li><a href="Kitchen.html" >Kitchen &amp; Bathroom </a></li>
<li><a href="Renovate.html">Renovations, Remodel &amp; Rebuild </a></li>
<li><a href="flooring.html">Flooring</a></li>
<li><a href="roofing.html" >Roofing, Guttering, Siding Metalwork</a></li>
<li><a href="windows.html">Windows &amp; Doors </a></li>
<li><a href="interiordec.html" >Interior Decorating &amp; Furnishing</a>
<li><a href="landscape.html" >Landscape, Pools, Spas, Decks & Outdoor Kitchens</a></li>
<li><a href="realestate.html">Real Estate & Financial </a></li>
<li><a href="misc.html" >Miscellaneous Services</a>
	<ul>
   
	<li><a href="#">Catering/ Restaurant</a></li>
	  <li><a href="#">Photograpers</a></li>
		<li><a href="#">Insect & Pest Control</a></li>
		  <li><a href="#">Solar Energy, Energy Audits</a></li>
		   <li><a href="#">Graphic Design</a></li>
	  <li><a href="#">Generators</a></li>
		<li><a href="#">Home Inspections</a></li>
	</ul>
</li>
<li><a href="assoc.html" >Association Links</a></li>
<li><a href="events.html">Upcoming Events </a></li>
<li><a href="articles.html" >Articles Archive</a>
<li><a href="advert.html" >Advertise With Us</a></li>
<li><a href="contact.html">Contact Us </a></li>
</ul>

js

var menuids=new Array("verticalmenu") //Enter id(s) of UL menus, separated by commas
var submenuoffset=-2 //Offset of submenus from main menu. Default is -2 pixels.

function createcssmenu(){
for (var i=0; i<menuids.length; i++){
  var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
	for (var t=0; t<ultags.length; t++){
	var spanref=document.createElement("span")
		spanref.className="arrowdiv"
		spanref.innerHTML="&nbsp;&nbsp;"
		ultags[t].parentNode.getElementsByTagName("a")[0].appendChild(spanref)
	ultags[t].parentNode.onmouseover=function(){
	this.getElementsByTagName("ul")[0].style.left=this.parentNode.offsetWidth+submenuoffset+"px"
	this.getElementsByTagName("ul")[0].style.display="block"
	}
	ultags[t].parentNode.onmouseout=function(){
	this.getElementsByTagName("ul")[0].style.display="none"
	}
	}
  }
}


if (window.addEventListener)
window.addEventListener("load", createcssmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", createcssmenu)

and the css

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid white;
}

.glossymenu li{
position: relative;
}

.glossymenu li ul{ /*SUB MENU STYLE*/
position: absolute;
width: 190px; /*WIDTH OF SUB MENU ITEMS*/
left: 0;
top: 0;
display: none;
filter:alpha(opacity=100);
-moz-opacity:1;
}

.glossymenu li a{
background: white url(images/glossyback.gif) repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: #333333;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}

.glossymenu .arrowdiv{
position: absolute;
right: 2px;
background: transparent url(images/arrow.gif) no-repeat center right;
}

.glossymenu li a:visited, .glossymenu li a:active{
color: #333333;
}

.glossymenu li a:hover{
background-image: url(images/glossyback2.gif);
}

/* Holly Hack for IE \*/
* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }
/* End */

Edited by zoom4267, 14 March 2008 - 01:20 PM.

[PaintingBlack]

Could I get a link to your website, and where you got the menu from?

Also, I wouldn't recommend using plain javascript menus, there are many other ways of making a menu that are 100x more effective. Try using something like the Mootools AJAX framework, if you're advanced enough.

[zoom4267]

thanks but i changed the site, i couldnt get any menu to work properly

thanks

[PaintingBlack]

You uh, may want to take some XHTML lessons. That code is completely invalid and makes no sense, which oddly enough might be the problem.

[zoom4267]

i am having a horrible time with this menu

i have tried so many, most are JS i only have one menu item with a sub categories

ive googled, done a bunch in the tutorial section here and most of the problem is that they only work on the index page

not on the rest of the pages?

thanks sooo much

Replies Merged - USE EDIT

okay, im trying this route

seems easy but when i published it the flyout said "false"

i uploaded all of the scripts that were made by the spry

what am i missing?

thanks

[rc69]

If they work on the index, they work on the rest of the pages. The reason they wouldn't is that you are either not including something (like the .js file), or you are naming something incorrectly.

Could you provide a link to the site so we can look at all the pages?

p.s. Since you appear to be changing things quite frequently, make sure you provide a link to an example that did work on at least the index.

p.s.s. Since you're having so many problems with menus, i merged all the topics into one big menu problem so people can refer to what you have tried. Please continue with this topic as long as this is the case.

Edited by rc69, 14 March 2008 - 04:37 PM.

[zoom4267]

your right, im not the greatest coder,

when i made the menu for the index file i copied and pasted the code right from one html page to another, figuring that would work. i put th ecode in the css file,

but like you said though if it works on the index it will work on the other pages, i donk know what im missing, ill back track,

Replies Merged

okay, this is from javascriptkit.com


http://www.skytopdes...me/graphic.html

i took the code from the site and put it right into my html

and th efly out dosnt work

thanks and im sorry if i am being a pain about this


okay, there must be something in my html that is blocking the ability to fly out, i did it in a fresh page and it worked,

please dont say *duh*

here is the code for the 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">
<link href="wayne.css" rel="stylesheet" type="text/css" />
<head>


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

<script type="text/javascript" src="cssverticalmenu.js">

/***********************************************

* CSS Vertical List Menu- by JavaScript Kit (www.javascriptkit.com)
* Menu interface credits: http://www.dynamicdrive.com/style/csslibrary/item/glossy-vertical-menu/ 
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more

***********************************************/

</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Graphic Design</title>

<meta name="description" content="Graphic Design  " />
<meta name="keywords" content="Interior Decorating & Furnishings   " />
<meta name="robots" content="index,follow">

<style type="text/css">
<!--
.style1 {color: #336699}
.style2 {color: #336699; font-weight: bold; }
body {
	background-color: #DDDDDD;
}
-->
</style>
</head>

<body>

<div id="wrapper">
	<div id="main">
		<div id="header"><div class="headerLinks"><div class="floatLeft"><strong></strong></div>
<div class="floatRight">| <a href="index.html"><strong>Home</strong></a></div>
</div>
<div class="headerImage"><a href="/index.php" title="Greater Philadelphia House and Home Magazine"><img src="images/h&hheader1.jpg" width="800" height="155" /></a></div>
<div class="headerInfo"><a href="mailto:info@housemagazine.com" title="Click here to email general inquiries to info@housemagazine.com."> </div>
</div>
<div id="content">
			<div id="leftColMain">
				<div id="mainNav">
	<div class="mainNavCap">Business Directory</div>
	<div class="mainNavBase">
	<div id="DynCSSMenu1" class="vertical">
<ul class="simple">

	<ul id="verticalmenu" class="glossymenu">
	
<li><a href="appliance_link.html">Appliances &amp; Fireplaces </a></li>
<li><a href="Kitchen.html" >Kitchen &amp; Bathroom </a></li>
<li><a href="Renovate.html">Renovations, Remodel &amp; Rebuild </a></li>
<li><a href="flooring.html">Flooring</a></li>
<li><a href="roofing.html" >Roofing, Guttering, Siding Metalwork</a></li>
<li><a href="windows.html">Windows &amp; Doors </a></li>
<li><a href="interiordec.html" >Interior Decorating &amp; Furnishing</a>
<li><a href="landscape.html" >Landscape, Pools, Spas, Decks & Outdoor Kitchens</a></li>
<li><a href="realestate.html">Real Estate & Financial </a></li>
<li><a href="misc.html" >Miscellaneous Services</a>
	<ul>
   
	<li><a href="catering.html">Catering/ Restaurant</a></li>
	  <li><a href="photographers.html">Photograpers</a></li>
		<li><a href="insect.html">Insect & Pest Control</a></li>
		  <li><a href="solar.html">Solar Energy, Energy Audits</a></li>
		   <li><a href="graphic.html">Graphic Design</a></li>
	  <li><a href="generators.html">Generators</a></li>
		<li><a href="home_inspect.html">Home Inspections</a></li>
	</ul>
</li>
<li><a href="assoc.html" >Association Links</a></li>

<li><a href="#">References</a>
	<ul>
	<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
	<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
	<li><a href="http://www.javascriptkit.com/dhtmltutors/cssreference.shtml">CSS Reference</a></li>
	</ul>
</li>

<li><a href="events.html">Upcoming Events </a></li>
<li><a href="articles.html" >Articles Archive</a>
<li><a href="advert.html" >Advertise With Us</a></li>
<li><a href="contact.html">Contact Us </a></li>
</ul>
	
	
	
</ul>


	
<br />	</div>
		
	<div class="hBar"></div>
	<div><div class="ccForm" style="padding-bottom:8px;"><form name="ccoptin" action="http:" target="_blank" method="post">
<div class="ccTitle">Join the House &amp; Home Magazine mailing list</div>
<div class="ccBox">Email Address:<br/><input name="ea" type="text" class="formField" size="15" /> 
<input type="submit" name="go" value="Go" class="formButton" /></div>
<input type="hidden" name="m" value="1100780178210" />
<input type="hidden" name="p" value="oi" />
</form></div></div>
	<div class="hBar"></div>
	<br/><div class="drawing">
<a href="/drawing/"></a></div>
<br/>
	</div>
</div>
</div>
			<div id="centerColSubMain">
				<div class="centerColSubCap_400">Graphic Design	</div>
				<div class="centerColSubBase_400">
				  <div class="page">
																																<div class="dListing">
																		<div class="dName">
																		  <p class="style2"><strong>Hilco Creative </strong></p>
																		  <a href="link_redir.php?dID=287" target="_blank" title="Artesano Ironworks"></a></div>									
																		<div class="dURL">
																		  <p><a href="http://www.hilcocreative.com/">www.hilcocreative.com</a></p>
																		  </div>								</div>
								<div class="hBar"></div>
																						
																		<div class="hBar"></div>
				  </div>
				</div>
			</div>
		</div>
		<div id="footer">

<div class="footerNav">
	<div class="footerNavCap">
	<div class="footerNavBase">
	<div class="footerLinks"><a href="index.html">Home</a> |<a href="appliance_link.html">  Appliances &amp; Fireplaces</a> |<a href="Kitchen.html">  Kitchen & Bathroom</a> |  <a href="Renovate.html">Renovations, Remodel &amp; Rebuild </a>|<a href="flooring.html">  Flooring</a> |  <a href="roofing.html">Roofing, Siding, Guttering, Metalwork</a><a href="/directory/index.php?dID=5"></a> |  <a href="windows.html">Windows &amp; Doors</a><a href="/directory/index.php?dID=6"></a> |  <a href="interiordec.html">Interior Decorating &amp; Furnishing</a><a href="/directory/index.php?dID=7"></a> |  <a href="landscape.html">Landscape, Pools, Spas, Decks, Outdoor Kitchens</a><a href="/directory/index.php?dID=8"></a> |  <a href="realestate.html"> <a href="/directory/index.php?dID=11">Real Estate &amp; Financial</a> |  <a href="misc.html"> <a href="/directory/index.php?dID=12">Miscellaneous</a>|  <a href="assoc.html">Association Links</a>  | Events  | Advertise | Contact Us</div>
	</div>
	</div>
</div>

<div class="footerInfo">
	<div class="copyright">&copy; 2008 Oklahoma City Metro House &amp; Home</div>
	<div class="designer">Site design &amp; maintenance by <a href="http://www.skytopdesigns.com.com" target="_blank" title="Site design &amp; maintenance by skytopdesigns.com.">Skytopdesigns.com</a></div>
</div>

</div>
	</div>
</div>
</body>
</html>

Edited by zoom4267, 14 March 2008 - 06:58 PM.
replies merged - please use your edit