How to use Ex 3 menubar from DD Tab Menu with Ex 2 from DD Tabs

**applenut** · 10-22-2007, 07:29 PM

1) Script Title: DD Tab Menu & Drop Down Tabs (trying to combine)

2) Script URL (on DD): http://dynamicdrive.com/dynamicindex1/ddtabmenu.htm & http://dynamicdrive.com/dynamicindex1/droptabmenu.htm

3) Describe problem: I would like to use the included graphic Example #3 from the DD Tab menu (black & red) in Example #2 from the Drop Down Tabs script.

In other words, a drop down box of links from the black & red buttons (instead of a single link that is the function of the black & red buttons.)

Is there any way to do this? Which .css and .js files do I use and how do I combine the html code to make it work properly?

Thanks.

**ddadmin** · 10-23-2007, 02:19 AM

Inside bluetabs.css, just replace the top code chunk (everything starting with .bluetabs with the below instead:

Code:

.solidblockmenu ul{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(blockdefault.gif) center center repeat-x;
}

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}

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

.solidblockmenu li a:hover, .solidblockmenu li.selected a{
color: white;
background: transparent url(blockactive.gif) center center repeat-x;
}

Make sure the two image paths above are correct.

**applenut** · 10-23-2007, 03:51 PM

I'm evidently missing something. What am I doing wrong?

When I preview in Safari and Firefox both, all I get is a plain text list of links in the browser window. Here is the source of the page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Untitled</title>
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">

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

/***********************************************
* Drop Down Tabs Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("tamashiinavmenu", 0)
</script>

</head>

<body bgcolor="#FFFFFF">

<div id="tamashiinavmenu" class="bluetabs">
<ul>
<li><a href="video/index.html" title="Tamashii Press Traditional Japanese Karate DVD Main Page" rel="dropmenu1dvd">Karate DVDs</a></li>
<li><a href="books/index.html" title="Tamashii Press Traditional Japanese Karate Books Main Page" rel="dropmenu2books">Karate Books</a></li>
<li><a href="misc/subscribe.html" rel="dropmenu3subscribe">Subscriber Advantage</a></li>
<li><a href="service/index.html" title="Tamashii Press Customer Service, Order Guidelines, Shipping, etc" rel="dropmenu4service">Customer Service</a></li>
</ul>
</div>


<div id="dropmenu1dvd" class="dropmenudiv">

<a href="video/instructional/index.html">Instructional Karate DVDs</a>
<a href="video/historical_documentary/index.html" title="Traditional Karate Historical, Documentary, and Feature DVDs">Historical, Documentary, & Features Karate DVDs</a>
</div>


<div id="dropmenu2books" class="dropmenudiv">
<a href="books/randall_hassell/index.html" title="Randall Hassell Books available from Tamashii Press">by Randall Hassell</a>
<a href="books/elmar_schmeisser/index.html" title="Elmar T Schmeisser books available from Tamashii Press">by Elmar T. Schmeisser</a>
<a href="books/stan_schmidt/index.html" title="Stan Schmidt Karate books available from Tamashii Press">by Stan Schmidt</a>

<a href="books/stricevic/modern_karate.html" title="Modern Karate: Scientific Approach to Conditioning and Training by Milorad Stricevic available from Tamashii Press">by Milorad Stricevic</a>
<a href="books/rod_butler/enoeda_shotokan.html" title="karate books by Rod Butler">by Rod Butler</a>
</div>


<div id="dropmenu3subscribe" class="dropmenudiv">
<a href="misc/subscribe.html">Save 10% Today...</a>
</div>


<div id="dropmenu4service" class="dropmenudiv">
<a href="about.html" title="About Tamashii Press Traditional Karate Books, DVDs, and Videos">About Tamashii Press</a>
<a href="service/privacy.html">Privacy Policy</a>

<a href="service/order_methods.html">Order & Payment Methods</a>
<a href="service/shipping.html#ratesUS" title="Tamashii Press.com U.S. Shipping Rates">Shipping Rates - U.S.</a>
<a href="service/shipping.html#ratesOther" title="Tamashii Press.com International Shipping Rates">Shipping Rates - ALL OTHER COUNTRIES</a>
<a href="service/customs.html" title="Tamashii Press.com Customs Information">Customs Information</a>
<a href="service/exchange.html">Exchange & Return Policy</a>
<a href="service/resellers.html" title="Learn how to make money by re-selling Tamashii Press traditional karate DVDs and books">Big Discounts for Martial Art Club Resellers and Pro Shops</a>
<a href="service/environment.html" title="Tamashii Press.com Environmental Policy">Tamashii Press Environmental Policy</a>

<a href="sitemap.html" title="Tamashii Press Sitemap">Sitemap</a>
<a href="service/contacts.html">Contact Tamashii Press</a>
</div>

</body>
</html>

**ddadmin** · 10-23-2007, 07:24 PM

Based on the above code you're missing the reference to the external CSS file.

**applenut** · 10-23-2007, 09:48 PM

OK, thanks. I added that and now I get the blockdefault tabs on screen, but the blockactive (red) will not set to a default no matter what number I put in the script (0, 1, 2, 3). It does change on hover, though.

None of the drop downs work. Instead, upon page load I get one big list of text links displaying under the tab bar.

I appreciate your helpfulness. Maybe you should see an actual webpage of this, so please visit http://www.tamashiipress.com/1NEW_NAVIGATION.html

Thanks

**ddadmin** · 10-24-2007, 09:20 AM

Your code to initialize the script:

Code:

<script type="text/javascript">
tabdropdown.init("tamashiinavmenu", 1)
</script>

Should be moved to the end of the page, or at least after the HTML for all the drop down menus.

**applenut** · 10-24-2007, 05:40 PM

OK, thanks! Now the nav bar looks the way it should.

However, it loads by default the contents of all 4 of the drop down menus as 1 long list. After I mouse over all 4 of the main nav links each drop down menus disappears from the screen, and then it behaves normally. Except, each drop down menu (except for the first one) starts lower on the screen than the end of the previous drop down menu. Also, the default bar is not stretching out beyond the menus tabs, isn't it supposed to do that, or is there a css setting I need to change? This occured in both Safari 2 and FireFox 2 for Mac. I don't have access to a Windows machine to test it there.

I uploaded this version of the page to the same address as is in my previous post.

Thanks again for your assistance,
Greg

**ddadmin** · 10-24-2007, 11:19 PM

The good and bad news at the same time is that the problem is not just limited to Mac, but all browsers. I scanned your .css file, and you need to remove the following ending parenthesis:

Code:

.solidblockmenu li a:hover, .solidblockmenu li.selected a{
color: white;
background: transparent url(../graphics/blockactive.gif) center center repeat-x;
}
}

It's my fault, I had that added in the code I posted as well (now fixed).

**applenut** · 10-25-2007, 02:53 PM

Thank you so much - it now works perfectly!

Another question, if you don't mind, how can I extend the black bar beyond the edges of the actual tab links? In other words, just extending the black graphic (without any links) so it fills the page a little better?

Also, can I make submenus that branch out from the main drop down when certain items are hovered over?

Thank you for your continued assistance
Greg

**ddadmin** · 10-26-2007, 12:59 AM

Hmm by default the black bar should expand the width of the entire page, as seen here: http://www.dynamicdrive.com/style/cs...id-block-menu/ I reckon it's not doing that on your page because it's contained inside a TABLE. Try moving it outside.

By submenus, do you mean more than 1 level of submenu as in the current set up? There's no easy way to do that right now unfortunately.

Thread: How to use Ex 3 menubar from DD Tab Menu with Ex 2 from DD Tabs

Thread Tools

Search Thread

How to use Ex 3 menubar from DD Tab Menu with Ex 2 from DD Tabs

Bookmarks

Bookmarks

Posting Permissions