Milonic provide full featured pull down web menus for some of the worlds largest companies
click here to see what it can do for you

Download Milonic DHTML Menu
Buy Milonic DHTML Menu

Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:45

Need your help on menu style


Poster: perldev
Dated: Friday May 6 2005 - 17:20:34 BST

Desired menu should look like this: Image

The code is as follows:
<div class="navbar">
<div class="topline"></div>
<script type="text/javasript" src="menu_data.js"></script>
<div class="bottomline"></div>
<div class="graybar"></div>
</div>

With the implementation, the menu looks like this: Image

I don't know how to cover the white line underneath the active tab/menu, to make it connecting with the graybar. Any suggestion will be highly appreciated!


Poster: Ruth
Dated: Friday May 6 2005 - 18:19:40 BST

Hi,

Can you give me what the classes are and the menu data.js file? Without knowing what you have any suggestion might be in left field.

Or better yet, do you have a test page so I can get everything, including images?

Ruth


Poster: perldev
Dated: Friday May 6 2005 - 20:31:51 BST

Here is the menu demo


Poster: Ruth
Dated: Friday May 6 2005 - 22:26:50 BST

There isn't any way that comes to mind for hiding an item border when you
open a submenu, unless you position the submenu to open up over the
bottom of that item. That said, the other border problem where it looks
bigger is due to the fact that you have those line divs which in essense
make a 'border' on top and bottom and a border around the nav div, and
you have a border on the menu. If you change the border=1 to border=0
in the menu and turn it off, then the lines you have seem to be a border
around the menu. I think the bottom still looks too big, but that is the divs
not the menu since you have the border turned off. I think you have to
either move the bottom line div up. I think what is showing is the white of
the page because there seems to be space between the top of that
bottomline div and the place where the menu is. You can check it by
putting in an actual colored background on the page itself body
{background:#ff0000} that makes it red and you will see a red line
between the bottom of the menu and that white line of bottomline div.

The only way I can think more or less to do what you want is to make
images, you would need 3 images for each item. The image would have a
border all the way around, if the item had a submenu the overimage would
have no border on the bottom, if it didn't have a submenu you'd need a
border. The 3rd image would be the pageimage and you'd need one for
each item in the pagebgcolor #666666, and by the looks of the Home in
your top picture, those images would not have any border on the bottom.
That also means making an image for the space after the open an account
and having the menu span 100%, putting itemwidths in the actual items
and letting the last item take whatever is left.

Perhaps someone else has some solution, but the menu can't control what
happens to your div borders and those are the ones that have to
'disappear'. If you do it the way you have it now, the only solution I see is
getting the submenu to open up over the bottom of the item by a pixel or
so.

Lastly, there are two things 1) your submenu is opening way down the
page about 100 pixels below the item, that's because the menu is in the div
and it will cause that problem on some browsers when it's in a div 2) you
have alignment="left"; in the submenu code. As far as I know there is no
alignment left for the menu. If you want to align the text left, then it's
align="left";

Hope that helps.

Ruth


Poster: perldev
Dated: Saturday May 7 2005 - 5:48:47 BST

Ruth, thanks you so much! The menu was in a table, which is much easier to control. You are right, using image could be a solution; probably it's the only solution if stick with the current design; Or back to table.


Poster: Ruth
Dated: Saturday May 7 2005 - 7:43:09 BST

Hi,

You would be better to use a table, there can be problems when putting it in a div, it is one of the things it says not to do. That's because the menu itself has divs. I've seen a couple of sites where they did a header div for logo, then below that a table for the menu and then below that they do the divs for the content thereby leaving the menu outside of the divs.

Ruth