Can PixoPoint Menu do these?

[idesign123]

I am considering purchasing ‘Premium support’ services to get additional help from you on my menu customization. Before purchasing it though, I need to know if the things I want to do are even possible. Here are the customizations I want to make…

* Temporary url is http://74.220.213.203/

[b:7ee023jh]1) Divider Graphics [/b:7ee023jh](top level)
I would like to insert an image between the main menu items. I initially thought I might be able to accomplish this by adding the graphics to the background image (like you do on your site). But I don’t like this idea because the section names are HTML, and will change over time. I also can’t just do it via the "border-right" CSS tag – the divider needs to be an image. Is it possible to modify my code so I can insert a (tiny) image between the menu items?

[b:7ee023jh]2) Image at bottom of dropdown menu.[/b:7ee023jh]
This one is likely an unusual request, but it’s as technique I use all the time in my menus, and I would really like to continue using it on WordPress if possible. If you look at my dropdown menus, you’ll see that there is a gradient at the top. This is accomplished via a background image setting on the <ul> tag. What I want to do is add a gradient to the bottom of the dropdown menu as well. This one would be done with a small horizontal image placed in the dropdown menu itself. I know how to do this by hand-coding, but am not sure if it’s possible with your program (I’m hoping it is).

[b:7ee023jh]3) Dropdowns of Different Widths[/b:7ee023jh]
Currently all the dropdown menus are the same width. The amount of content varies quite a lot though, and it would be better if the menus could be different widths. It is especially noticable on the "LEDs" dropdown. I did some research and found a program called "Supersubs" that appears to be an add-on to Superfish. That would be the ideal solution as it resizes widths automatically. But I would also be fine with a manual way to set individual dropdown widths.

[b:7ee023jh]4) Arrows on Second Level only[/b:7ee023jh]
I would really like to have the "arrows" feature on the second level (currently just the "LEDs" section. But I can’t have arrows show up on the top menu. During my research, I found <a href="http://www.highdots.com/forums/jquery/superfish-auto-arrows-sub-menus-291350.html">this page</a> that explained how to do this – but I’m not familiar enough with the Superfish program to understand how to apply the advice.

I obviously don’t expect you to explain all this for free. At this point all I need is an answer regarding which of these items you could help me accomplish (so I know whether to purchase ‘premium’ services). A simple answer like "yes on 1&2, but no on 3&4" is fine.

By the way, this is by far the best WordPress menu plugin I could find! I tried 4 others, and eventually came back to yours. Of course, if it could do all the items listed here, it would be PERFECT in my book!

[imported_Ryan]

&quot;idesign123&quot; wrote:

* Temporary url is http://74.220.213.203/

Unfortunately that link does not appear to be working.

&quot;idesign123&quot; wrote:

[b:22ln4trb]1) Divider Graphics [/b:22ln4trb](top level)
I would like to insert an image between the main menu items. I initially thought I might be able to accomplish this by adding the graphics to the background image (like you do on your site). But I don’t like this idea because the section names are HTML, and will change over time. I also can’t just do it via the "border-right" CSS tag – the divider needs to be an image. Is it possible to modify my code so I can insert a (tiny) image between the menu items?

You wouldn’t technically add the image [b:22ln4trb]between[/li][/list] the menu items, you would stretch out the side of the existing menu item to make it look like there was an image between them. So yes, that’s definitely doable.

&quot;idesign123&quot; wrote:

2) Image at bottom of dropdown menu.[/b:22ln4trb]
This one is likely an unusual request, but it’s as technique I use all the time in my menus, and I would really like to continue using it on WordPress if possible. If you look at my dropdown menus, you’ll see that there is a gradient at the top. This is accomplished via a background image setting on the <ul> tag. What I want to do is add a gradient to the bottom of the dropdown menu as well. This one would be done with a small horizontal image placed in the dropdown menu itself. I know how to do this by hand-coding, but am not sure if it’s possible with your program (I’m hoping it is).

Hmmm, that’s not really popular without javascript, CSS3 multi-image backgrounds or extra markup. Depending on your exact requirements, it may be easiest to custom build something into your theme which manually adds the extra markup for you. So this is doable, but depending on your requiresments would likely require a little more than just using an existing plugin for the job. We can do that as part of premium support though.

&quot;idesign123&quot; wrote:

[b:22ln4trb]3) Dropdowns of Different Widths[/b:22ln4trb]
Currently all the dropdown menus are the same width. The amount of content varies quite a lot though, and it would be better if the menus could be different widths. It is especially noticable on the "LEDs" dropdown. I did some research and found a program called "Supersubs" that appears to be an add-on to Superfish. That would be the ideal solution as it resizes widths automatically. But I would also be fine with a manual way to set individual dropdown widths.

Yes, that can be setup. It’s preferable to use CSS for that if possible though. To use CSS for that purpose you need to know exactly what’s going to be in the menu though so that you can manually set the widths for each dropdown.

&quot;idesign123&quot; wrote:

[b:22ln4trb]4) Arrows on Second Level only[/b:22ln4trb]
I would really like to have the "arrows" feature on the second level (currently just the "LEDs" section. But I can’t have arrows show up on the top menu. During my research, I found <a href="http://www.highdots.com/forums/jquery/superfish-auto-arrows-sub-menus-291350.html">this page</a> that explained how to do this – but I’m not familiar enough with the Superfish program to understand how to apply the advice.

You could also do that with Superfish. That’s much better off being done with CSS and allows you to have anything you want as the arrow.

I’ll email you a link to a draft blog post which explains the best way to get your dream menu and a nice demonstration of the arrow effect. I can’t post either of them here as some of the information in them isn’t suitable for public announcement just yet.

&quot;idesign123&quot; wrote:

By the way, this is by far the best WordPress menu plugin I could find! I tried 4 others, and eventually came back to yours. Of course, if it could do all the items listed here, it would be PERFECT in my book!

Technically the plugin can already do the arrows feature as that’s just a CSS issue. I’m working on a new CSS generator which can do that automatically though (I started working on it last night).

The background image on the dropdown is a tricky one … although depending on your exact requirements it may already be possible with the existing plugin (I’m still thinking about this and coming up with ideas). It would still require CSS modifications though.

The Supersubs issue is something I may look at including support for in the future. The latest beta version of the plugin (https://geek.hellyer.kiwi/pixopoint-menu-plugin-beta-0-8/) separates out the Superfish functionality from the main plugin and will eventually be available as a separate download so I may incorporate it into that as part of your premium support service if you liked.

[idesign123]

Ok, I’m ready to ask my initial questions.
Let’s start with #1 – "Divider Graphics (top level)"

My Pixopoint menu is located at http://vcclite.com/
The menu links are done in HTML, over a graphic background image.

What I want to do is add a small "image" between the main menu items.

You said that the solution would NOT be to insert this image after </li>, but instead that I would "stretch out the side of the existing menu item to make it look like there was an image between them".

After looking at how I have my menu setup, is this still the solution you would recommend? If so, please explain.

Thanks.

[imported_Ryan]

The following code will add an arrow to between the links for your current site:
[code:co948cl2]#pixopoint_menu1 li {
padding: 0 20px 0 0;
background:url(arrow.jpg) top right no-repeat;
}
#pixopoint_menu1 li:last-child {
background:none;
}
#pixopoint_menu1 li li {
background:none;
padding:0;
}[/code:co948cl2]

The following sets padding to the right hand side of each menu item, and applies a background image which will only show in that area of padding since it is aligned to the top right and is set to not-repeat:
[code:co948cl2]#pixopoint_menu1 li {
padding: 0 20px 0 0;
background:url(arrow.jpg) top right no-repeat;
}[/code:co948cl2]

The following prevents the image from displaying on the last menu item so that they only appear between the menu items. Note, this doesn’t work in IE6, but it degrades gracefully so isn’t generally something which is considered a problem these days:
[code:co948cl2]#pixopoint_menu1 li:last-child {
background:none;
}
[/code:co948cl2]

The following makes sure that the image does not appear in the dropdowns as well and that the padding is reset.
[code:co948cl2]#pixopoint_menu1 li li {
background:none;
padding:0;
}[/code:co948cl2]

If you have any more questions, would like the code integrated into your site for you or if you need more assistance with anything whatsoever, please do not hesitate to ask ” title=”Smiley” />

[idesign123]

Yep, that worked perfectly ” title=”Smiley” />

Moving onto request #2…
[b:3b0gsd11]"Image at bottom of dropdown menu"[/b:3b0gsd11]

If you look at my dropdown menus on http://vcclite.com/ you’ll see that there is a gradient on the dropdown menus. This is accomplished via a background image setting on the <ul> tag. What I want to do is have an image at the bottom of the dropdown menu as well. Specifically, I want to put http://vcclite.com/wp-content/themes/in … nu_bot.jpg at the bottom of every dropdown menu.

You said this one might be a little tricky.
Would you mind taking a look?

* login info was sent previously via email – let me know if you need me to resend.

[idesign123]

Hi Ryan,

Can you help me with request #2? (see message above)

* Not a big rush – just thought I would follow up.

[imported_Ryan]

This question was dealt with via email. In case the solution is of use to some of you, here it is below:

---

There is no convenient way to do this while having it work in IE6. To make it work in IE6, you would need to either alter the HTML markup or explicitly specify individual ID’s in the CSS as you need to apply one of the images to the first or last list items instead of the surrounding UL tag.

Here is a version with CSS which uses an image for the first list item:
https://geek.hellyer.kiwi/demo/vcc/

You can see the changes in the following chunk of CSS, which makes use of the first-child pseudo class which is not supported in IE6.
[code:10nombcf]
#pixopoint_menu1 ul ul {
position:absolute;
left:-999em;
top:35px;
width:188px;
background:#e7f6fd url("http://vcclite.com/wp-content/themes/inove/img/menu_bot.jpg") 0 100% no-repeat;
padding:0 0 6px 0;
}
#pixopoint_menu1 ul ul li:first-child {
padding:16px 0 0 0;
background:#e7f6fd url("http://vcclite.com/wp-content/themes/inove/img/menusub_back.gif") repeat-x;
}
[/code:10nombcf]

[Author]

Posts