PDA

View Full Version : Newbie Drop Down Menu



winndknot
01-23-2009, 04:49 AM
Hello everyone, I am new to your forum and really need some assistance. I have Javascript, CSS, and Html that I am using to create a drop down menu. I have managed to make it, however when I publish it, it goes no where on the hover or even on the click. I would be very grateful if someone could tell me where I am going wrong...been looking at if for days and can't seem to find the problem, nor any help. Thanks for taking a look.

For viewing ease I copied and pasted the codes from Wordpad to a MS Word file, not able to upload (too large) so here is the codes:

CSS code named uploaded to hstrial-rprice on homestead and published
Named in Notepad: symphonycode.css


.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 14px arial;
border-bottom: 0px solid darkgoldenrod;
list-style-type: none;
margin-bottom: 0;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}

.basictab li{
display: inline;
margin: 0;
}

.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid black;
/*border-bottom: none;*/
background-color: #785a14; /* first level menu */
color: white;
}

.basictab li a:visited{
color: white;
}

.basictab li a:hover{
background-color: #3E3535; /*Grey29 */
color: white;
}

.basictab li a:active{
color: white; /*white */
}

.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #820000;
color: white;
}

.submenustyle{
padding: 2px 1px;
font: 13px arial;
border: 0px solid black;
border-top-width: 0;
width: auto;
display: none;
filter:alpha(opacity=0);
-moz-opacity:0;
}

* html .submenustyle{ /*IE only width definition*/
width: 100%;
}

.submenustyle a{
border-right: 0px solid white;
padding: 1px 5px;
background: white; /*suthers added*/
color: #820000;
text-decoration: none;
}

.submenustyle a:hover{
background-color: #CCCCCC; /* was #6D7B8D; */
}




Javacript code named symphonycode.js uploaded to hstrial-rprice on homestead and published




var mastertabvar=new Object()
mastertabvar.baseopacity=0
mastertabvar.browserdetect=""

function showsubmenu(masterid, id){
if (typeof highlighting!="undefined")
clearInterval(highlighting)
submenuobject=document.getElementById(id)
mastertabvar.browserdetect=submenuobject.filters? "ie" : typeof submenuobject.style.MozOpacity=="string"? "mozilla" : ""
hidesubmenus(mastertabvar[masterid])
submenuobject.style.display="block"
instantset(mastertabvar.baseopacity)
highlighting=setInterval("gradualfade(submenuobject)",50)
}

function hidesubmenus(submenuarray){
for (var i=0; i<submenuarray.length; i++)
document.getElementById(submenuarray[i]).style.display="none"
}

function instantset(degree){
if (mastertabvar.browserdetect=="mozilla")
submenuobject.style.MozOpacity=degree/100
else if (mastertabvar.browserdetect=="ie")
submenuobject.filters.alpha.opacity=degree
}


function gradualfade(cur2){
if (mastertabvar.browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (mastertabvar.browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (typeof highlighting!="undefined") //fading animation over
clearInterval(highlighting)
}

function initalizetab(tabid){
mastertabvar[tabid]=new Array()
var menuitems=document.getElementById(tabid).getElementsByTagName("li")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
menuitems[i].setAttribute("rev", tabid) //associate this submenu with main tab
mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute("rel") //store ids of submenus of tab menu
if (menuitems[i].className=="selected")
showsubmenu(tabid, menuitems[i].getAttribute("rel"))
menuitems[i].getElementsByTagName("a")[0].onmouseover=function(){
showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel"))
}
}
}
}

Here is what I have under the insert html element at HS

<ul id="maintab" class="basictab">
<li rel="Home"><a href="http://www.dreamsonthefly.com/index.html">Home</a><li>

<li rel="Owyhee River"<a href="http://www.dreamsonthefly.com/owyhee.html">Owyhee River</a>
</li>

<li rel="Steelhead"><a href="#">Steelhead</a></li>
<li rel="Rates"><a href="#">Rates</a><li>
<li rel="Bass"><a href="#">Bass</a></li>
<li rel="Wilderness"><a href="#">Wilderness</a></li>
<li rel="Flies"><a href="#">Flies</a></li>
<p>
<li rel="Our Guides"><a href="#">Our Guides</a></li>
<li rel="Corporate Trips"><a href="#">Corporate Trips</a></li>
<li rel="Education"><a href="#">Education</a></li>
<li rel="Blog"><a href="#">Blog</a></li>
<li rel="Contact Us"><a href="#">Contact Us</a></li>
<li rel="Trip Planning"><a href="#">Trip Planning</a></li>
</P></ul>

<div id="Home" class="submenustyle">
</div>

<div id="Steelhead" class="submenustyle">

<a href="http://www.dreamsonthefly.com/Granderonde.html">Grande Ronde</a>
<a href="http://www.dreamsonthefly.com/faqssteel.html">Faq's About Steelhead</a>
</div>


<div id="Smallmouth Bass" class="submenustyle">
<a href="http://www.dreamsonthefly.com/bass.html">Why Smallmouth Bass on a Fly</a>
<a href="http://www.dreamsonthefly.com/bass.html">Smallmouth on the Grande Ronde</a>
<a href="http://www.dreamsonthefly.com/bassl.html">Smallmouth Bass on Other Rivers</a>
</div>

<div id="Rates" class="submenustyle">
<a href="http://www.dreamsonthefly.com/singlerates.html">Single Day Guide Rates for Trout</a>
<a href="http://www.dreamsonthefly.com/multidayrates.html">Multi-day Guided Trips f</a>
</div>


<div id="Wilderness" class="submenustyle">
<a href="http://www.dreamsonthefly.com/wilderness.html">A Quiet Walk with the Wilderness</a>
<a href="http://www.dreamsonthefly.com/diamond.html">Diamond D Ranch</a>
</div>

<div id="Flies" class="submenustyle">
<a href="http://www.dreamsonthefly.com/flies.html">About Dave Tucker's Flies</a>
<a href="http://www.dreamsonthefly.com/allflyinfo.html"Steelhead Flies</a>
<a href="http://www.dreamsonthefly.com/troutflies.html">Trout Flies</a>
<a href="http://www.dreamsonthefly.com/atlanticsalmonflies.html">Beautiful Atlantic Salmon Flies</a>
</div>


<div id="Our Guides" class="submenustyle">
<a href="http://www.dreamsonthefly.com/newguides.html">About Dave Tucker</a>
<a href="http://www.dreamsonthefly.com/newguides.html">About Rhonda Price</a>
<a href="http://www.dreamsonthefly.com/newguides.html">About John Schaeffer</a>
<a href="http://www.dreamsonthefly.com/newguides.html">About Zach Mayhew</a>
<a href="http://www.dreamsonthefly.com/newguides.html">About our camp crew</a>
</div>

<div id="Corporate Trips" class="submenustyle">
<a href="http://www.dreamsonthefly.com/corporatepackages.html">Team Building</a>
<a href="http://www.dreamsonthefly.com/corporatepackages.html">Customer Incentives</a>
<a href="http://www.dreamsonthefly.com/corporatepackages.html">Employee Incentives</a>
</div>

<div id="Education" class="submenustyle">
<a href="http://www.dreamsonthefly.com/education.html">Knots</a>
<a href="http://www.dreamsonthefly.com/education.html">The Great Release</a>
<a href="http://www.dreamsonthefly.com/education.html">Ettiquite on the Water</a>
</div>

<div id="Blog" class="submenustyle">
<a href="http://dreamsonthefly.blogspot.com">Where are We, What are We Doing?</a>
</div>

<div id="Contact Us" class="submenustyle">
<a href="http://www.dreamsonthefly.com/comments.html">Contact Us</a>
<a href="http://www.dreamsonthefly.com/comments.html">Guest Book</a>
<a href="http://www.dreamsonthefly.com/comments.html">Sign Up for Our Newsletter</a>
</div>

<div id="Trip Planning" class="submenustyle">
<a href="http://www.travelstoremaker.com/cgit/porch?agentid=dreamsonthefly">Easy Airline Reservations </a>
<a href="http://www.flybook.com/">Make Your Guide Reservations Here</a>
<a href="http://www.dreamsonthefly.com/">What You Need to Bring</a>
</div>

<script type="text/javascript">
//initialize tab menu, by passing in ID of UL
initalizetab("maintab")
</script>


Here is what I have in the advanced tab in the page properties for the site.

<link rel="stylesheet" type="text/css" href="http://www.dreamsonthefly.com/symphonycode.css" />

<script type="text/javascript" src="http://www.dreamsonthefly.com/symphonycode.js">
/***********************************************
* 2 level Horizontal Tab Menu- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/

</script>

vwphillips
01-23-2009, 06:43 PM
you have HTML errors , missing tags + spaces in id name(not allowed)

<body>
<ul id="maintab" class="basictab">
<li rel="Home"><a href="http://www.dreamsonthefly.com/index.html">Home</a></li>

<li rel="Owyhee River"><a href="http://www.dreamsonthefly.com/owyhee.html">Owyhee River</a></li>

<li rel="Steelhead"><a href="#">Steelhead</a></li>
<li rel="Rates"><a href="#">Rates</a><li>
<li rel="Bass"><a href="#">Bass</a></li>
<li rel="Wilderness"><a href="#">Wilderness</a></li>
<li rel="Flies"><a href="#">Flies</a></li>
<p>
<li rel="OurGuides"><a href="#">Our Guides</a></li>
<li rel="CorporateTrips"><a href="#">Corporate Trips</a></li>
<li rel="Education"><a href="#">Education</a></li>
<li rel="Blog"><a href="#">Blog</a></li>
<li rel="ContactUs"><a href="#">Contact Us</a></li>
<li rel="TripPlanning"><a href="#">Trip Planning</a></li>
</P></ul>

<div id="Home" class="submenustyle">
</div>

<div id="Steelhead" class="submenustyle">

<a href="http://www.dreamsonthefly.com/Granderonde.html">Grande Ronde</a>
<a href="http://www.dreamsonthefly.com/faqssteel.html">Faq's About Steelhead</a>
</div>


<div id="Smallmouth Bass" class="submenustyle">
<a href="http://www.dreamsonthefly.com/bass.html">Why Smallmouth Bass on a Fly</a>
<a href="http://www.dreamsonthefly.com/bass.html">Smallmouth on the Grande Ronde</a>
<a href="http://www.dreamsonthefly.com/bassl.html">Smallmouth Bass on Other Rivers</a>
</div>

<div id="Rates" class="submenustyle">
<a href="http://www.dreamsonthefly.com/singlerates.html">Single Day Guide Rates for Trout</a>
<a href="http://www.dreamsonthefly.com/multidayrates.html">Multi-day Guided Trips f</a>
</div>


<div id="Wilderness" class="submenustyle">
<a href="http://www.dreamsonthefly.com/wilderness.html">A Quiet Walk with the Wilderness</a>
<a href="http://www.dreamsonthefly.com/diamond.html">Diamond D Ranch</a>
</div>

<div id="Flies" class="submenustyle">
<a href="http://www.dreamsonthefly.com/flies.html">About Dave Tucker's Flies</a>
<a href="http://www.dreamsonthefly.com/allflyinfo.html"Steelhead Flies</a>
<a href="http://www.dreamsonthefly.com/troutflies.html">Trout Flies</a>
<a href="http://www.dreamsonthefly.com/atlanticsalmonflies.html">Beautiful Atlantic Salmon Flies</a>
</div>


<div id="OurGuides" class="submenustyle">
<a href="http://www.dreamsonthefly.com/newguides.html">About Dave Tucker</a>
<a href="http://www.dreamsonthefly.com/newguides.html">About Rhonda Price</a>
<a href="http://www.dreamsonthefly.com/newguides.html">About John Schaeffer</a>
<a href="http://www.dreamsonthefly.com/newguides.html">About Zach Mayhew</a>
<a href="http://www.dreamsonthefly.com/newguides.html">About our camp crew</a>
</div>

<div id="CorporateTrips" class="submenustyle">
<a href="http://www.dreamsonthefly.com/corporatepackages.html">Team Building</a>
<a href="http://www.dreamsonthefly.com/corporatepackages.html">Customer Incentives</a>
<a href="http://www.dreamsonthefly.com/corporatepackages.html">Employee Incentives</a>
</div>

<div id="Education" class="submenustyle">
<a href="http://www.dreamsonthefly.com/education.html">Knots</a>
<a href="http://www.dreamsonthefly.com/education.html">The Great Release</a>
<a href="http://www.dreamsonthefly.com/education.html">Ettiquite on the Water</a>
</div>

<div id="Blog" class="submenustyle">
<a href="http://dreamsonthefly.blogspot.com">Where are We, What are We Doing?</a>
</div>

<div id="ContactUs" class="submenustyle">
<a href="http://www.dreamsonthefly.com/comments.html">Contact Us</a>
<a href="http://www.dreamsonthefly.com/comments.html">Guest Book</a>
<a href="http://www.dreamsonthefly.com/comments.html">Sign Up for Our Newsletter</a>
</div>

<div id="TripPlanning" class="submenustyle">
<a href="http://www.travelstoremaker.com/cgit/porch?agentid=dreamsonthefly">Easy Airline Reservations </a>
<a href="http://www.flybook.com/">Make Your Guide Reservations Here</a>
<a href="http://www.dreamsonthefly.com/">What You Need to Bring</a>
</div>


still does not work, I may try to look to morrow

winndknot
01-25-2009, 03:05 PM
got it solved.