Got Horizontal drop down menu working...but

[winndknot]

Hi All...Now I need to change the format to list the sub 's vertically in a nice neat box. any suggestions would help. Thanks in advance.

here is the link I would like to change:

http://www.dreamsonthefly.com/dreamstemplate.html

[Nile]

Can you tell me what you mean by that. Maybe a better description, or an example that you've seen somewhere else? Thanks.

Warning: Please include a link to the DD(or javascriptkit) script in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.
Please include your code so that we can take a look at it, we can't do much without it.

[winndknot]

See the sub menu's here: http://www.flyfishingmagazines.com/

[Snookerman]

Do you mean something like this:
http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/ (http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/)

[Nile]

Checkout the following.
http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_2/
http://www.dynamicdrive.com/style/csslibrary/item/jquery_multi_level_css_menu_horizontal_blue/
http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm
http://dynamicdrive.com/dynamicindex1/blmmenu/index.htm
http://dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm
http://dynamicdrive.com/dynamicindex1/chrome/index.htm

Maybe one of those will help.
You might find even more just looking by your self. :D
http://dynamicdrive.com/dynamicindex1/index.html
http://dynamicdrive.com/dynamicindex1/indexc.html
http://dynamicdrive.com/dynamicindex1/indexb.html

[winndknot]

Exactly. I am wondering if I can just adjust my code (s) not sure which one needs changing to make this work on my site. I had such a time getting the codes right in the first place and would love to just be able to make a couple of changes to the existing codes.

Thanks for responding so fast.

[Nile]

Can you tell me which menu you are using, I listed 6 examples. (and 3 bunch of examples). If your using any in my 6 examples, please tell me which - if your not, tell me which your using anyways. :)

[winndknot]

2 level Horizontal Tab Menu- by JavaScript Kit (www.javascriptkit.com)

[Nile]

Like I said above, please post a script to the page and not only to javascriptkit.com, I would also suggest using one of my examples. But find the following and add the highlighted.


.submenustyle a{
border-right: 1px dashed black;
padding: 1px 5px;
text-decoration: none;
display: block;
}

[winndknot]

Sorry I didn't post as you had indicated...I am kind new to all of this. thank you for helping me.



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"))
}
}
}
}

[Nile]

Can you please try the code I posted 1 post above... Again, I suggest using one of the scripts I posted here (http://www.dynamicdrive.com/forums/showpost.php?p=181655&postcount=5), and that means redoing the menu - but it doesn't take much work.

[winndknot]

Here is my JS code:

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"))
}
}
}
}


and here is my css code:


.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: #789040; /* 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; */
}


and here is my html code with all my links:

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

<script type="text/javascript" src="http://www.dreamsonthefly.com/symphony.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>

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

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

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

<li rel="Bass"><a href="http://www.dreamsonthefly.com/Bass.html">Bass</a></li>
<p>

<li rel="Guides"><a href="http://www.dreamsonthefly.com/Newguides.html">Guides</a></li>

<li rel="Rates"><a href="http://www.dreamsonthefly.com/newlodging.html">Rates</a></li>

<li rel="Contact Us"><a href="http://www.dreamsonthefly.com/Contact.html">Contact Us</a></li>

<li rel="Flies"><a href="http://www.dreamsonthefly.com/flies.html">Flies</a></li>

<li rel="Links"><a href="http://www.dreamsonthefly.com/links.html">Links</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>
</div>

<div id="Owyhee" class="submenustyle">
<a href="http://www.dreamsonthefly.com/Owyhee.html">Owyhee River</a>
</div>

<div id="Bass" class="submenustyle">
<a href="http://www.dreamsonthefly.com/Bass.html">Smallmouth Bass</a>
</div>

<div id="Guides" class="submenustyle">
<a href="http://www.dreamsonthefly.com/newguides.html">About our guides</a>
</div>

<div id="Rates" class="submenustyle">
<a href="http://www.dreamsonthefly.com/newlodging.html">Rates</a>
</div>

<div id="Contact Us" class="submenustyle">
<a href="http://hspublish.homestead.com/~site/Scripts_NewGuest/NewGuest.dll?CMD=CMDGetViewEntriesPage&STYLE=simple%2F&ENTRYID=&FORWARDFLAG=true&GBID=13426517&DISPLAY=31&TARGETURL=default&EMAILADDRESS=ENC__82c7991f3c4452684679def62c2567e781d79b61fecfaffb6f6d&EM=true&CUSTOMVALUE=false&H_H=8102453&H_P=1&H_A=21865789&H_V=2&H_I=0&H_U=6807556.html">Guest Book</a>
<a href="http://www.travelstoremaker.com/cgit/porch?agentid=dreamsonthefly.html">Airline Reservations</a>
</div>


<div id="Flies" class="submenustyle">
<a href="http://www.dreamsonthefly.com/allflyinfo.html">Flies for Steelhead</a>
<a href="http://www.dreamsonthefly.com/troutflies.html">Trout Flies</a>
<a href="http://www.dreamsonthefly.com/atlanticsalmonflies.html">Atlantic Salmon Flies</a>
</div>

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



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

there are some of the codes that already say "block" so I am still a bit confused as to which ones I change. I am sorry, I don't mean to be difficult.

[Nile]

Change:


.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: #789040; /* 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;
}
To:


.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: #789040; /* 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;
display: block;
}

[winndknot]

thank you so much, that worked.

[Nile]

I'm glad to help you winndknot. Your welcome. :)

[winndknot]

just a couple of questions, if I may.

1)How do I get it moved over from the page?
2)How do I get a border around it
3)How do I get color into the bordered area

Thanks again Nile

[Nile]

Can you update your example please?

[winndknot]

Okay, I figured out how to get a border, but now am trying to figure out how to adjust it's size and background color.
here goes

http://www.dreamsonthefly.com/dreamstemplate.html

[Nile]

Background color:


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

[winndknot]

ok, the color of the border changed not the background and the submenu titles are all crammed together.

Size?
Alignment...I would like them to align under the particular menu tab


Ahemmmm....I think my brain is not functioning properly

[winndknot]

Well I am up and running, however I would really like to move the submenu boxes below the appropriate main menu tabs...can you assist Nile, just one more time???

[Nile]

Please look at the following post.
http://www.dynamicdrive.com/forums/showpost.php?p=181655&postcount=5