07-13-2006
|
#1 (permalink)
|
|
A$s On Fiyah
Join Date: May 2005
Location: Ewa Beach, Hawaii
Posts: 601
|
Vertical Menu Problem
I am going to take another shot at this. First Ill explain that my navigation menu is suppose to slide out to the right.. So I decided to try some dynamic drive script. But now it wont even work in FF opera or IE. I have a feeling that I dont know. I really messed it up. Good thing I made a new page for this script. It has html, css and js. the navigation is pushed a little to the right, my iframe is pushed down also. I have no idea what I should do. I keep looking through the code and messing with certain parts thinking it will work.. but im stumped.. I have 2 days now. lol. I need this thing to work!
heres my code CSS & JS first which goes in the head
Code:
<style type="text/css">
#dropmenudiv{
position:relative;
background-color: #ffffff;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}
#dropmenudiv a{
width: 30px;
display: block;
text-indent: 0px;
border-bottom: 1px solid black;
padding: 0px 0;
text-decoration: none;
font-weight: bold;
}
#dropmenudiv a:hover{ /*hover background color*/
background-color: #ffffff;
}
/* Sample CSS definition for the example list. Remove if desired */
.navlist li {
list-style-type: none;
width: 100px;
background-color: #fffffff;
}
</style>
<script type="text/javascript">
/***********************************************
* AnyLink Vertical Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="http://www.pacificexpos.com/SpringNewProductsShow.htm">Show Information Page</a>'
menu1[1]='<a href="http://www.pacificexpos.com/BoothInfoSNPS.htm">Booth Information</a>'
menu1[2]='<a href="http://www.pacificexpos.com/SpringShowApp.pdf">Show Contract</a>'
menu1[3]='<a href="http://www.pacificexpos.com/SpecialEventsSNPS.htm">Special Events</a>'
menu1[4]-'<a href="http://wwww.pacificexpos.com/StrongMan.htm">Strong Man Competition</a>'
menu1[5]='<a href="http://www.pacificexpos.com/PicturesSNPS">Pictures</a>'
//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="http://www.pacificexpos.com/BetterHome&GardenShow.htm">Show Information Page</a>'
menu2[1]='<a href="http://www.pacificexpos.com/BoothInfoBHGS.htm">Booth Information</a>'
Menu2[2]='<a href="http://www.pacificexpos.com/HomeShowApp.pdf">Show Contract</a>'
menu2[3]='<a href="http://www.pacificexpos.com/SpecialEventsBHGS.htm">Special Events</a>'
menu2[4]='<a href="http://www.pacificexpos.com/PressReleaseBHGS.htm">Press Release</a>'
menu2[5]='<a href="http://www.pacificexpos.com/DiscountCouponBHGS.htm">Discount Coupon</a>'
menu2[6]='<a href="http://www.pacificexpos.com/PicturesBHGS.htm">Pictures</a>'
//Contents for menu 3
var menu3=new Array()
menu3[0]='<a href="http://www.pacificexpos.com/WeddingAffairShow.htm">Show Information Page</a>'
menu3[1]='<a href="http://www.pacificexpos.com/BoothInfoWS.htm">Booth Information</a>'
Menu3[2]='<a href="http://www.pacificexpos.com/WeddingShowApp.pdf">Show Contract</a>'
menu3[3]='<a href="http://www.pacificexpos.com/PicturesWS.htm">Pictures</a>'
//Contents for menu 4
var menu2=new Array()
menu4[0]='<a href="http://www.pacificexpos.com/FoodNewProductsShow.htm">Show Information Page</a>'
menu4[1]='<a href="http://www.pacificexpos.com/BoothInfoFNPS.htm">Booth Information</a>'
Menu4[2]='<a href="http://www.pacificexpos.com/FoodShowApp.pdf">Show Contract</a>'
menu4[3]='<a href="http://www.pacificexpos.com/SpecialEventsFNPS.htm">Special Events</a>'
menu4[4]='<a href="http://www.pacificexpos.com/PicturesFNPS.htm">Pictures</a>'
var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var horizontaloffset=2 //horizontal offset of menu from default location. (0-5 is a good value)
/////No further editting needed
var ie4=document.all
var ns6=document.getElementById&&!document.all
if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width: 160px" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x-obj.offsetWidth < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move menu up?
edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? (position at top of viewable window then)
edgeoffset=dropmenuobj.y
}
}
return edgeoffset
}
function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}
function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)
if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+horizontaloffset+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
}
return clickreturnvalue()
}
function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}
function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}
function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}
function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}
function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}
function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}
</script>
HTML in the body
Code:
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="200" border="2" align="center" cellpadding="2" bordercolor="#000000">
<tr>
<td><!-- ImageReady Slices (index.psd) -->
<table id="Table_01" width="876" height="716" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="3">
<img src="http://forums.biorust.com/images/index_01.jpg" width="195" height="186" alt=""></td>
<td>
<img src="http://forums.biorust.com/images/index_02.jpg" width="680" height="93" alt=""></td>
<td>
<img src="http://forums.biorust.com/images/spacer.gif" width="1" height="93" alt=""></td>
</tr>
<tr>
<td>
<img src="http://forums.biorust.com/images/index_03.jpg" width="680" height="79" alt=""></td>
<td>
<img src="http://forums.biorust.com/images/spacer.gif" width="1" height="79" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://forums.biorust.com/images/index_04.jpg" width="680" height="22" alt=""></td>
<td>
<img src="http://forums.biorust.com/images/spacer.gif" width="1" height="14" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://forums.biorust.com/images/index_05.jpg" width="195" height="21" alt=""></td>
<td>
<img src="http://forums.biorust.com/images/spacer.gif" width="1" height="8" alt=""></td>
</tr>
<tr>
<td rowspan="11">
<iframe src="MainFrame.htm" name="Main" width="680" height="526" scrolling="auto" frameborder="0"></iframe></td>
<td>
<img src="http://forums.biorust.com/images/spacer.gif" width="1" height="13" alt=""></td>
</tr>
<tr>
<td>
<img src="http://forums.biorust.com/images/index_07.jpg" width="195" height="40" alt=""></td>
<td>
<img src="http://forums.biorust.com/images/spacer.gif" width="1" height="40" alt=""></td>
</tr>
<tr><td>
<ul class="navlist">
<li class="navlist"><strong><img src="/images/index_08.jpg"></img></strong>
<ul style="border: 2px solid #000000">
<li onMouseover="dropdownmenu(this, event, menu1, '50px')" onMouseout="delayhidemenu()"><a href="BoothInfoSNPS.htm">Booth Information</a></li>
<li onMouseover="dropdownmenu(this, event, menu1, '50px')" onMouseout="delayhidemenu()"><a href="SpringShowAPP.pdf" target="_new">Show Contract (*download)</a></li>
<li onMouseover="dropdownmenu(this, event, menu1, '50px')" onMouseout="delayhidemenu()"><a href="SpecialEventsSNPS.htm">Special Events</a></li>
<li onMouseover="dropdownmenu(this, event, menu1, '50px')" onMouseout="delayhidemenu()"><a href="PressReleaseSNPS.htm">Strong Man</a></li>
<li onMouseover="dropdownmenu(this, event, menu1, '50px')" onMouseout="delayhidemenu()"><a href="PicturesSNPS.htm">Pictures</a></li>
</ul>
</li>
<li><strong><img src="/images/index_09.jpg"></img></strong>
<ul style="border: 2px solid #000000">
<li onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()"><a href="BoothInfoBHGS.htm">Booth Information</a></li>
<li onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()"><a href="HomeShowAPP.pdf" target="_blank">Show Contract (*download)</a></li>
<li onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()"><a href="SpecialEventsBHGS.htm">Special Events</a></li>
<li onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()"><a href="PressReleaseBHGS.htm">Press Release</a></li>
<li onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()"><a href="DiscountCoupon.htm">Discount Coupon</a></li>
<li onMouseover="dropdownmenu(this, event, menu2, '150px')" onMouseout="delayhidemenu()"><a href="PicturesBHGS">Pictures</a></li>
</ul>
</li>
<li><strong><img src="/images/index_10.jpg"></img></strong>
<ul style="border: 2px solid #000000">
<li onMouseover="dropdownmenu(this, event, menu3, '150px')" onMouseout="delayhidemenu()"><a href="BoothInfoWS.htm">Booth Information</a></li>
<li onMouseover="dropdownmenu(this, event, menu3, '150px')" onMouseout="delayhidemenu()"><a href="WeddingShowAPP.pdf" target="_blank">Show Contract (*download)</a></li>
<li onMouseover="dropdownmenu(this, event, menu3, '150px')" onMouseout="delayhidemenu()"><a href="PicturesWS.htm">Pictures</a></li>
</ul>
</li>
<li><strong><img src="/images/index_11.jpg"></img></strong>
<ul style="border: 2px solid #000000">
<li onMouseover="dropdownmenu(this, event, menu4, '150px')" onMouseout="delayhidemenu()"><a href="BoothInfoFNPS.htm">Booth Information</a></li>
<li onMouseover="dropdownmenu(this, event, menu4, '150px')" onMouseout="delayhidemenu()"><a href="FoodShowShowAPP.pdf">Show Contract (*Download)</a></li>
<li onMouseover="dropdownmenu(this, event, menu4, '150px')" onMouseout="delayhidemenu()"><a href="SpecialEventsFNPS.htm">Special Events</a></li>
<li onMouseover="dropdownmenu(this, event, menu4, '150px')" onMouseout="delayhidemenu()"><a href="PicturesFNPS.htm">Pictures</a></li>
</ul>
</li>
<li><strong><a href="http://www.philtradeexpo.com/"><img src="http://forums.biorust.com/images/index_12.jpg" border="0"></img></a></strong></li>
</ul></td></tr>
<tr>
<td>
<a href="http://www.tarachanel.com" target="_blank"><img src="http://forums.biorust.com/images/index_13.jpg" alt="" width="195" height="41" border="0"></a></td>
<td>
<img src="http://forums.biorust.com/images/spacer.gif" width="1" height="41" alt=""></td>
</tr>
<tr>
<td>
<a href="OOTExhibitors.htm" target="Main"><img src="http://forums.biorust.com/images/index_14.jpg" alt="" width="195" height="33" border="0"></a></td>
<td>
<img src="http://forums.biorust.com/images/spacer.gif" width="1" height="33" alt=""></td>
</tr>
<tr>
<td>
<a href="Questionnaire.htm" target="Main"><img src="http://forums.biorust.com/images/index_15.jpg" alt="" width="195" height="28" border="0"></a></td>
<td>
<img src="http://forums.biorust.com/images/spacer.gif" width="1" height="28" alt=""></td>
</tr>
<tr>
<td>
<a href="ContactUs.htm" target="Main"><img src="http://forums.biorust.com/images/index_16.jpg" alt="" width="195" height="40" border="0"></a></td>
<td>
<img src="http://forums.biorust.com/images/spacer.gif" width="1" height="40" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices --></td>
</tr>
</table>
</body>
</html>
</body>
</html>
got the script here.. http://www.dynamicdrive.com/dynamici...nkvertical.htm
can anyone.. please help me! im getting a little desperate..
__________________
google is my lover, whos yours?
|
|
|
|
07-13-2006
|
#2 (permalink)
|
|
Janitor of Lunacy
Join Date: May 2006
Location: Sitting in the Wishing Chair
Posts: 5,345
|
ecntrc: It seems like you're fighting a losing battle with this code. I copied your code and made a page so I could try it out myself and it didn't work properly in either Firefox or IE7 - maybe you should try some different code altogether: I have found some good Javascript menu code in the past at the following site:
http://javascript.internet.com/
I'm no expert on Javascript, so I'm afraid I can't help you further.
__________________
Religion: It's all fun and games until someone gets burned at the stake...
|
|
|
|
07-16-2006
|
#3 (permalink)
|
|
"Enter Random Text Here"
Join Date: Jun 2005
Location: Handsacre, UK
Posts: 37
|
Do you have an example URL?
Not sure but i think this is what you want
Code:
<html>
<head>
<style type="text/css">
/**************** menu coding *****************/
#menu {
width: 12em;
background: #eee;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu a, #menu h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0;
padding: 2px 3px;
}
#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}
#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}
#menu a:hover {
color: #a00;
background: #fff;
}
#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;}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
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.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="200" border="2" align="center" cellpadding="2" bordercolor="#000000">
<tr>
<td><!-- ImageReady Slices (index.psd) -->
<table id="Table_01" width="876" height="716" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="3"><img src="http://forums.biorust.com/images/index_01.jpg" width="195" height="186" alt=""></td>
<td><img src="http://forums.biorust.com/images/index_02.jpg" width="680" height="93" alt=""></td>
<td><img src="http://forums.biorust.com/images/spacer.gif" width="1" height="93" alt=""></td>
</tr>
<tr>
<td><img src="http://forums.biorust.com/images/index_03.jpg" width="680" height="79" alt=""></td>
<td><img src="http://forums.biorust.com/images/spacer.gif" width="1" height="79" alt=""></td>
</tr>
<tr>
<td rowspan="2"><img src="http://forums.biorust.com/images/index_04.jpg" width="680" height="22" alt=""></td>
<td><img src="http://forums.biorust.com/images/spacer.gif" width="1" height="14" alt=""></td>
</tr>
<tr>
<td rowspan="2"><img src="http://forums.biorust.com/images/index_05.jpg" width="195" height="21" alt=""></td>
<td><img src="http://forums.biorust.com/images/spacer.gif" width="1" height="8" alt=""></td>
</tr>
<tr>
<td rowspan="11">
<iframe src="MainFrame.htm" name="Main" width="680" height="526" scrolling="auto" frameborder="0"></iframe></td>
<td><img src="http://forums.biorust.com/images/spacer.gif" width="1" height="13" alt=""></td>
</tr>
<tr>
<td><img src="http://forums.biorust.com/images/index_07.jpg" width="195" height="40" alt=""></td>
<td><img src="http://forums.biorust.com/images/spacer.gif" width="1" height="40" alt=""></td>
</tr>
<tr>
<td><div id="menu">
<ul>
<li>
<ul>
<li><a href="#"><strong><img src="/images/index_08.jpg"></img></strong></a>
<ul>
<li><a href="BoothInfoSNPS.htm">Booth Information</a></li>
<li><a href="SpringShowAPP.pdf" target="_new">Show Contract (*download)</a></li>
<li><a href="SpecialEventsSNPS.htm">Special Events</a></li>
<li><a href="PressReleaseSNPS.htm">Strong Man</a></li>
<li><a href="PicturesSNPS.htm">Pictures</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<ul>
<li><a href="#"><strong><img src="/images/index_09.jpg">T</img></strong></a>
<ul>
<li><a href="BoothInfoBHGS.htm">Booth Information</a></li>
<li><a href="HomeShowAPP.pdf" target="_blank">Show Contract (*download)</a></li>
<li><a href="SpecialEventsBHGS.htm">Special Events</a></li>
<li><a href="PressReleaseBHGS.htm">Press Release</a></li>
<li><a href="DiscountCoupon.htm">Discount Coupon</a></li>
<li><a href="PicturesBHGS">Pictures</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<ul>
<li><a href="#"><strong><img src="/images/index_10.jpg">T</img></strong></a>
<ul>
<li><a href="BoothInfoWS.htm">Booth Information</a></li>
<li><a href="WeddingShowAPP.pdf" target="_blank">Show Contract (*download)</a></li>
<li><a href="PicturesWS.htm">Pictures</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<ul>
<li><a href="#"><strong><img src="/images/index_11.jpg">T</img></strong></a>
<ul>
<li><a href="BoothInfoFNPS.htm">Booth Information</a></li>
<li><a href="FoodShowShowAPP.pdf">Show Contract (*Download)</a></li>
<li><a href="SpecialEventsFNPS.htm">Special Events</a></li>
<li><a href="PicturesFNPS.htm">Pictures</a></li>
</ul>
</li>
<li><strong><a href="http://www.philtradeexpo.com/"><img src="http://forums.biorust.com/images/index_12.jpg" border="0"></img></a></strong></li>
</ul>
</li>
</ul>
</div></td>
</tr>
<tr>
<td><a href="http://www.tarachanel.com" target="_blank"><img src="http://forums.biorust.com/images/index_13.jpg" alt="" width="195" height="41" border="0"></a></td>
<td><img src="http://forums.biorust.com/images/spacer.gif" width="1" height="41" alt=""></td>
</tr>
<tr>
<td><a href="OOTExhibitors.htm" target="Main"><img src="http://forums.biorust.com/images/index_14.jpg" alt="" width="195" height="33" border="0"></a></td>
<td><img src="http://forums.biorust.com/images/spacer.gif" width="1" height="33" alt=""></td>
</tr>
<tr>
<td><a href="Questionnaire.htm" target="Main"><img src="http://forums.biorust.com/images/index_15.jpg" alt="" width="195" height="28" border="0"></a></td>
<td><img src="http://forums.biorust.com/images/spacer.gif" width="1" height="28" alt=""></td>
</tr>
<tr>
<td><a href="ContactUs.htm" target="Main"><img src="http://forums.biorust.com/images/index_16.jpg" alt="" width="195" height="40" border="0"></a></td>
<td><img src="http://forums.biorust.com/images/spacer.gif" width="1" height="40" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices --></td>
</tr>
</table>
</body>
</html>
</body>
</html>
You can see it at http://iamsancho.co.uk/test/test.php
You will also need http://iamsancho.co.uk/test/csshover.htc
|
|
|
|
|
07-16-2006
|
#4 (permalink)
|
|
A$s On Fiyah
Join Date: May 2005
Location: Ewa Beach, Hawaii
Posts: 601
|
http://www.pacificexpos.com/menu.html and http://www.pacificexpos.com/menu2.html
http://www.pacificexpos.com/navigationmenu.html
lol i did it so damn much that i dont know which one is my original code but i am thinking its the last link.. its only css. yeah the last link is my original code. i was going to try that out, your code but i cant. lol. my dreamweaver on here expired. since im on vacation i gotta wait till i get back to my computer in washington. thanks.. ill go look for a um.. something like notepad for mac. my first time using a mac for work. crazy. i dont even know how to uninstall ps, dw and the cute ftp. anyone know how? thanks again..
__________________
google is my lover, whos yours?
|
|
|
|
|
07-17-2006
|
#5 (permalink)
|
|
"Enter Random Text Here"
Join Date: Jun 2005
Location: Handsacre, UK
Posts: 37
|
I had a look at your site and have adapted the code to give you a better idea of the menu You can see it here http://iamsancho.co.uk/test/navigationmenu.html
It will work in IE (including IE7) and firefox
The code is below, but you will have to change image paths 
Code:
<html>
<head>
<title>PACIFIC EXPOS - HAWAII'S LEADING CONSUMER TRADE SHOW COMPANY</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/*** Nav bar style<strong></strong>s ***/
ul.nav,
.nav ul{
/*Remove all spacings from the list items*/
margin: 0;
padding: 0;
cursor: default;
list-style-type: none;
}
ul.nav{
width: 25ex;
/*Optional, to make the navigation bar positions on the left of the content*/
float: left;
margin-right: 0em;
}
ul.nav>li{
margin: 0;
padding: 3px 7px;
}
ul.nav li>ul{
/*Make the sub list items invisible*/
display: none;
position: absolute;
width: 20ex;
left: 35ex;
margin-top: -8em;
margin-left: 15px;
}
ul.nav li:hover>ul{
/*When hovered, make them appear*/
display : block;
}
.nav ul li a{
/*Make the hyperlinks as a block element, sort of a hover effect*/
display: block;
border-color:#000000;
border-left: thin;
border-right: thin;
border-bottom: thin;
border-top: thin;
padding: 2px 10px;
}
/*** Menu styles (customizable) ***/
ul.nav,
.nav ul,
.nav ul li a{
background-color: #fff;
color: #000;
font-family:"Georgia", "Times New Roman", Times, serif;
font-size:12px;
}
.nav ul a:hover{
font-family:"Georgia", "Times New Roman", Times, serif;
font-size:12px;
border: solid 1px #FFCC00;
background-color: #000000;
color:#FFCC00;
}
ul.nav li:active,
.nav li a:active{
background-color: #;
color: #000;
}
ul{
border: 0px solid #000;
}
.nav a{
text-decoration: none;
}
#menu {
width: 12em;
background: #eee;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu a, #menu h2 {
/*font: bold 11px/16px arial, helvetica, sans-serif;*/
display: block;
/*border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;*/
margin: 0;
padding: 0/*2px 3px*/;
}
#menu h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}
#menu a {
color: #000;
background: #fff;
text-decoration: none;
}
#menu a:hover {
color: #a00;
background: #fff;
}
#menu li {
position: relative;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 101%;
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;}
#menu img
{
border: none;
}
</style>
<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css" media="screen">
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.7em/1.4em arial, helvetica, sans-serif;
}
</style>
<![endif]-->
</head>
<body leftmargin="0" topmargin="0" bgcolor="#ffffff" marginheight="0" marginwidth="0">
<table align="center" border="2" bordercolor="#000000" cellpadding="2" width="200">
<tbody>
<tr>
<td><!-- ImageReady Slices (index.psd) -->
<table id="Table_01" border="0" cellpadding="0" cellspacing="0" height="716" width="876">
<tbody>
<tr>
<td rowspan="3"><img src="navigationmenu_files/index_01.jpg" alt="" height="186" width="195"></td>
<td><img src="navigationmenu_files/index_02.jpg" alt="" height="93" width="680"></td>
<td><img src="navigationmenu_files/spacer.gif" alt="" height="93" width="1"></td>
</tr>
<tr>
<td><img src="navigationmenu_files/index_03.jpg" alt="" height="79" width="680"></td>
<td><img src="navigationmenu_files/spacer.gif" alt="" height="79" width="1"></td>
</tr>
<tr>
<td rowspan="2"><img src="navigationmenu_files/index_04.jpg" alt="" height="22" width="680"></td>
<td><img src="navigationmenu_files/spacer.gif" alt="" height="14" width="1"></td>
</tr>
<tr>
<td rowspan="2"><img src="navigationmenu_files/index_05.jpg" alt="" height="21" width="195"></td>
<td><img src="navigationmenu_files/spacer.gif" alt="" height="8" width="1"></td>
</tr>
<tr>
<td rowspan="11">
<iframe src="navigationmenu_files/MainFrame.htm" name="Main" frameborder="0" height="526" scrolling="auto" width="680"></iframe></td>
<td><img src="navigationmenu_files/spacer.gif" alt="" height="13" width="1"></td>
</tr>
<tr>
<td><img src="navigationmenu_files/index_07.jpg" alt="" height="40" width="195"></td>
<td><img src="navigationmenu_files/spacer.gif" alt="" height="40" width="1"></td>
</tr>
<tr>
<td><div id="menu">
<ul>
<li>
<ul>
<li><a href="#"><strong><img src="navigationmenu_files/index_08.jpg"/></strong></a>
<ul style="border: 2px solid rgb(0, 0, 0);">
<li><a href="http://www.pacificexpos.com/BoothInfoSNPS.htm">Booth Information</a></li>
<li><a href="http://www.pacificexpos.com/SpringShowAPP.pdf" target="_new">Show Contract (*download)</a></li>
<li><a href="http://www.pacificexpos.com/SpecialEventsSNPS.htm">Special Events</a></li>
<li><a href="http://www.pacificexpos.com/PressReleaseSNPS.htm">Strong Man</a></li>
<li><a href="http://www.pacificexpos.com/PicturesSNPS.htm">Pictures</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<ul>
<li><a href="#"><strong><img src="navigationmenu_files/index_09.jpg"/></strong></a>
<ul style="border: 2px solid rgb(0, 0, 0);">
<li><a href="http://www.pacificexpos.com/BoothInfoBHGS.htm">Booth Information</a></li>
<li><a href="http://www.pacificexpos.com/HomeShowAPP.pdf" target="_blank">Show Contract (*download)</a></li>
<li><a href="http://www.pacificexpos.com/SpecialEventsBHGS.htm">Special Events</a></li>
<li><a href="http://www.pacificexpos.com/PressReleaseBHGS.htm">Press Release</a></li>
<li><a href="http://www.pacificexpos.com/DiscountCoupon.htm">Discount Coupon</a></li>
<li><a href="http://www.pacificexpos.com/PicturesBHGS">Pictures</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<ul>
<li><a href="#"><strong><img src="navigationmenu_files/index_10.jpg"/></strong></a>
<ul style="border: 2px solid rgb(0, 0, 0);">
<li><a href="http://www.pacificexpos.com/BoothInfoWS.htm">Booth Information</a></li>
<li><a href="http://www.pacificexpos.com/WeddingShowAPP.pdf" target="_blank">Show Contract (*download)</a></li>
<li><a href="http://www.pacificexpos.com/PicturesWS.htm">Pictures</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li>
<ul>
<li><a href="#"><strong><img src="navigationmenu_files/index_11.jpg"/></strong></a>
<ul style="border: 2px solid rgb(0, 0, 0);">
<li><a href="http://www.pacificexpos.com/BoothInfoFNPS.htm">Booth Information</a></li>
<li><a href="http://www.pacificexpos.com/FoodShowShowAPP.pdf">Show Contract (*Download)</a></li>
<li><a href="http://www.pacificexpos.com/SpecialEventsFNPS.htm">Special Events</a></li>
<li><a href="http://www.pacificexpos.com/PicturesFNPS.htm">Pictures</a></li>
</ul>
</li>
<li><strong><a href="http://www.philtradeexpo.com/"><img src="navigationmenu_files/index_12.jpg" border="0"></img></a></strong></li>
</ul>
</li>
</ul>
</div></td>
</tr>
<tr>
<td><a href="http://www.tarachanel.com/" target="_blank"><img src="navigationmenu_files/index_13.jpg" alt="" border="0" height="41" width="195"></a></td>
<td><img src="navigationmenu_files/spacer.gif" alt="" height="41" width="1"></td>
</tr>
<tr>
<td><a href="http://www.pacificexpos.com/OOTExhibitors.htm" target="Main"><img src="navigationmenu_files/index_14.jpg" alt="" border="0" height="33" width="195"></a></td>
<td><img src="navigationmenu_files/spacer.gif" alt="" height="33" width="1"></td>
</tr>
<tr>
<td><a href="http://www.pacificexpos.com/Questionnaire.htm" target="Main"><img src="navigationmenu_files/index_15.jpg" alt="" border="0" height="28" width="195"></a></td>
<td><img src="navigationmenu_files/spacer.gif" alt="" height="28" width="1"></td>
</tr>
<tr>
<td><a href="http://www.pacificexpos.com/ContactUs.htm" target="Main"><img src="navigationmenu_files/index_16.jpg" alt="" border="0" height="40" width="195"></a></td>
<td><img src="navigationmenu_files/spacer.gif" alt="" height="40" width="1"></td>
</tr>
</tbody>
</table>
<!-- End ImageReady Slices --></td>
</tr>
</tbody>
</table>
</body>
</html>
Last edited by sancho; 07-17-2006 at 09:05 PM..
|
|
|
|
|
07-17-2006
|
#6 (permalink)
|
|
Janitor of Lunacy
Join Date: May 2006
Location: Sitting in the Wishing Chair
Posts: 5,345
|
In IE6, the submenus appear, but they disappear as soon as I try to click on any of the options.
Same thing happens in IE7.
Slightly better in Firefox, but still a bit hit-and-miss.
__________________
Religion: It's all fun and games until someone gets burned at the stake...
Last edited by Tamlin; 07-17-2006 at 05:28 PM..
|
|
|
|
|
07-17-2006
|
#7 (permalink)
|
|
The deadline was when?
Join Date: Oct 2005
Location: A Yankee in Nashville, TN
Posts: 500
|
Quote:
|
Originally Posted by ecntrc
ll go look for a um.. something like notepad for mac. my first time using a mac for work. crazy. i dont even know how to uninstall ps, dw and the cute ftp. anyone know how? thanks again..
|
Your Mac will probably have TextEdit on it already.
If you want to dump a program, go into the Applications folder and throw it in the trash.
|
|
|
|
|
07-17-2006
|
#8 (permalink)
|
|
"Enter Random Text Here"
Join Date: Jun 2005
Location: Handsacre, UK
Posts: 37
|
The left % was too high on the css below.  Have fixed on demo url and code above.
#menu ul ul ul {
position: absolute;
top: 0;
left: 101%;
width: 100%;
}
|
|
|
|
|
07-18-2006
|
#9 (permalink)
|
|
A$s On Fiyah
Join Date: May 2005
Location: Ewa Beach, Hawaii
Posts: 601
|
Thanks for doing that for me. I really appreciate it. For some reason, I dont know if its this computer becuse when I try to click on links on any website sometimes it lets me and sometimes it dosent and i dont know why. So when I hover over the image for the list to show, it shows, but when i move my mouse to click on a link the list disappears. If it works in your FF and IE then it must be my computer. If I get my laptop from my client then ill go ahead and take a look at it more. I hate this computer so much you guys have no idea. I dont know if its only me but I have to feel 100% comfortable at a computer before doing work. But thats just me. If it needs to be done then I just handle it. But is it ok if I give my client that address to take a look at it? LEt me know Thanks again
__________________
google is my lover, whos yours?
|
|
|
|
|
07-18-2006
|
#10 (permalink)
|
|
Just unleashed!
Join Date: Jul 2005
Location: Inbetween
Posts: 2,402
|
no i get the same problem to, but if you hold your mouse button the box won't disappear......and i only ahve the problem with the second "button".....
im using ff for the ones who want to know.
edit: my ff has crashed, a little virus.....when i took a second look the problem was gone
__________________
Youre all wrong! Martians do exist!
|
|
|
|
|
07-18-2006
|
#11 (permalink)
|
|
"Enter Random Text Here"
Join Date: Jun 2005
Location: Handsacre, UK
Posts: 37
|
Sure i dont mind if you let them look at the url
Glad i could help
Sancho
|
|
|
|
| |