Separator Images

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:21

Separator Images

Poster: marty
Dated: Monday July 5 2004 - 12:56:56 BST

Separator images can make a huge difference to the style of your menu, their size and alignment are completely adjustable to compliment your design.

If you have any requests for particular separator images, post them here and we may just have what you're after.

-Marty

Poster: marty
Dated: Monday July 5 2004 - 13:01:30 BST

Cubes

Poster: rudy
Dated: Thursday July 15 2004 - 20:38:18 BST

Any chance to see a URL with "Cubes" in action in a menu?

marty wrote:

Cubes

Poster: John
Dated: Thursday July 15 2004 - 20:55:51 BST

Sure. Just save the image to your machine, then call its name as separatorimage="cube_sep.gif"; (or whatever you choose to call it).

Poster: fredlongworthhighschool
Dated: Monday July 26 2004 - 15:43:51 BST

Hmmm. When I try that I get the image but really thin so you can only see the tops of the boxes.

Poster: John
Dated: Monday July 26 2004 - 21:01:30 BST

Andy, does the image look OK in Fireworks or Photoshop (whatever), or is it just bad in the menu?

Poster: marty
Dated: Monday July 26 2004 - 21:28:18 BST

I've used this image before in examples and it's fine, perhaps you just need to adjust the separatorheight?

-Marty

Poster: fredlongworthhighschool
Dated: Tuesday July 27 2004 - 11:27:33 BST

I've tried up to a height of 80 but it doesn't seem to be making a difference.

Can you post a line of code which you've used?

Poster: John
Dated: Tuesday July 27 2004 - 14:41:07 BST

80 may have been overkill, Andy, given it's only a 5px graphic.

Poster: John
Dated: Tuesday July 27 2004 - 14:59:11 BST

Hmmm - scratch that. I can't get it to show at all...

Poster: marty
Dated: Tuesday July 27 2004 - 15:31:15 BST

http://www.milonic.com/forumimages/test/cubes_menu

I think the separatorsize is 5 but don't quote me on that!

-Marty

Poster: Ruth
Dated: Tuesday July 27 2004 - 15:31:36 BST

It only seems to show in a vertical menu. If you decrease the size it cuts off part of the image, if you increase it, I tried 10, it doubled the image rather than increasing the image size.

Ruth

Poster: marty
Dated: Tuesday July 27 2004 - 15:34:40 BST

Hi Ruth,

You'll need to use a vertical image for a horizontal menu as the menu isn't quite clever enough yet to change the orientation etc.

-Marty

Poster: marty
Dated: Tuesday July 27 2004 - 15:45:57 BST

This one should do the trick, depending what sort of gap you want inbetween.

-Marty

Poster: John
Dated: Tuesday July 27 2004 - 15:50:26 BST

I still can't get it to show at all, and I don't really see anything different in our code. 5 is correct, Marty.

Thanks.

Poster: fredlongworthhighschool
Dated: Wednesday July 28 2004 - 8:55:05 BST

What's not helping me is that we have just moved to a new intranet server and the changes aren't showing as quickly as they were before.

So, you make a change and don't see a difference, and end up changing it again before it's had time to activiate!

Separator Image not showing up

Poster: webdragon
Dated: Tuesday December 28 2004 - 9:33:28 GMT

Hi everyone, its me again!

This time I am stuck on putting a separator image in my menu.

When I put separatorimage=img_separator.gif then it doesn't display.

I have tried to mess around with the height and width settings but haven't had any luck. I even copyed it to the same folder as the menu, but nothing.

Please could you have a look and see if I'm doing something stupid?

Thanks!

This is one of the styles in my menu_data.js

Code:

with(subNavStyle=new mm_style()){
onbgcolor="#F8F9FA";
oncolor="#3DC900";
offbgcolor="#FFFFFF";
offcolor="#0066B3";
separatorcolor="#DCDCDC";
separatorsize="1";
separatorwidth=190;
separatorheight=25;
separatorimage="img_separator.gif";
padding=2;
fontsize="10px";
fontweight="bold";
fontfamily="Verdana, Arial, Tahoma, Sans-Serif";
}

This is my submenufile:

Code:

<script type="text/javascript">
                        with(milonic=new menuname("mission")){
                        style=subNavStyle;
                        alwaysvisible=1;
                        orientation="vertical";
                        position="relative";
                        aI("text=Mission Leadership;url=missionLeadership.asp;image=images/img_blueArrow.gif;overimage=images/img_greenArrow.gif;itemheight=30px;");
                        aI("text=Behaviours;url=behaviours.asp;image=images/img_blueArrow_sub.gif;offcolor=#0066B3;offbgcolor=#FFFFFF;pagecolor=#E8710F;headerbgcolor=#FFFFFF;headercolor=#F8F9FA;pagecolor=#F8F9FA;itemheight=30px;");
                        aI("text=Process;url=process.asp;image=images/img_blueArrow_sub.gif;offcolor=#0066B3;offbgcolor=#FFFFFF;pagecolor=#F8F9FA;headerbgcolor=FFFFFF;headercolor=#F8F9FA;pagecolor=#FFFFFF;itemwidth=190px;itemheight=30px;");
                        aI("text=Performance;url=performance.asp;image=images/img_blueArrow_sub.gif;offcolor=#0066B3;offbgcolor=#FFFFFF;pagecolor=#F8F9FA;headerbgcolor=#F8F9FA;headercolor=#E8710F;pagecolor=#F8F9FA;itemwidth=190px;itemheight=30px;pageborder=1px dashed #ffffff;");
                        }
                        drawMenus(); // Then draw the second sub menu.
</script>

Industrial Strength JavaScript and DHTML Menus

Separator Images

Separator Image not showing up