Need help setting up DD Tab Menu (5 Styles).

[Jarik]

1) Script Title: DD Tab Menu (5 Styles)

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

3) Describe problem: Hello. I need help setting up this menu. I haven't worked with CSS all that much so as simple as this menu is described to be, I am having some issues.

I've downloaded the zip file and extracted it. I then inserted the 'script to call' in the HEAD section of my page but am now unsure of what to do with step 2 and 3. Where do I place the HTML for menu tabs and HTML for the 2nd level contents? Do I need to modify anything in the ddtabmenu.js or any other CSS document?

I greatly appreciate any help. Thank you.

[ddadmin]

Both the code of Step 2 and Step 3 just go in the BODY section of your page, where you wish it to appear within your page contents. The .js and .css files do not need to be modified in order for the script to work as is.

If you still have problems, please post a link to the page on your site that contains the problematic script so we can check it out.

[Jarik]

ddadmin, thank you for your reply.

I've attached a link to my test page with what I've done so far. Please take a look at my page and let me know what I'm doing wrong. The tabs are not showing up.

http://jarikexchange.com/ddtabmenu/index.htm

Thank you.

[ddadmin]

Your page is missing the required .js and .css file references. Also, make sure those files are actually uploaded to your server first. For example:

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

/***********************************************
* DD Tab Menu script- © 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>

<!-- CSS for Tab Menu #1 -->
<link rel="stylesheet" type="text/css" href="ddtabmenufiles/ddtabmenu.css" />

<!-- CSS for Tab Menu #2 -->
<link rel="stylesheet" type="text/css" href="ddtabmenufiles/glowtabs.css" />

<!-- CSS for Tab Menu #3 -->
<link rel="stylesheet" type="text/css" href="ddtabmenufiles/solidblocksmenu.css" />

<!-- CSS for Tab Menu #4 -->
<link rel="stylesheet" type="text/css" href="ddtabmenufiles/ddcolortabs.css" />

<!-- CSS for Tab Menu #5 -->
<link rel="stylesheet" type="text/css" href="ddtabmenufiles/chromemenu.css" />

[Jarik]

Got it. The DD Tab Menu appears to be working correctly now...

http://jarikexchange.com/ddtabmenu/

...although I had to use "solidblockmenu" to reference the desired menu instead of "solidblocksmenu". Removing the "s" gave me the desired menu without error.

One other thing, how do I go about positioning the menu to desired location and customizing the menu in terms of look...i.e. table height, font, border size, etc.? Can this be done through the menu's CSS document, in this case solidblocksmenu.css?

Thank you again!

[ddadmin]

The menu's position on the page is simply dependent on where you put it, so just put the BODY portion of the page where you want it to appear. Yes, the CSS controls the overall look of the menu, though no tables are used in the markup, so there's no table height to change.

[Jarik]

Thank you.

Is it possible to center the menu contents to the center of the menu horizontally? I am able to semi do this in the below code but it rearranges my menu items right to left if changing the float item to "right".

.solidblockmenu li a{
float: right;
color: white;
padding: 5px 13px;
text-decoration: none;
border-right: 1px solid black;

Thank you.

[Jarik]

Bumping for ddadmin to see previous question.

Thank you.

[ddadmin]

In the case of Solid Block Menu, where it uses "float: left" to style the menu items, centering them can be tricky. I'm sure it's possible, but I haven't really looked into it yet. You may want to do a search on Google on this.