Navigation treeview or flyout menus?

This forum is where we'll mirror posts that are of value to the community so they may be more easily found.
User avatar
Jaz
Captain (CAPT)
Captain (CAPT)
Posts: 245
Joined: Wed Nov 05, 2008 4:04 am
Location: Torrance, CA
Contact:

Re: Navigation treeview or flyout menus?

Post by Jaz » Wed Nov 05, 2008 4:17 am

First I would like to thank everyone who has worked in this. I would be lost without it.

I have tried using the ComponentArt tree here, http://216.139.236.188 There are a few features I am trying to work with in hopes of making navigation a bit easier.

1. Is there a way to make the thumbnails a bit bigger. I think 20px x 20px could give a lot more detail than the 16x16 that is standard.

2. Is there a way to make the text of the subcategories a different color to make it more apparent to the customer that they are looking at a subcategory.

3. I notice that the active category is bolded. While this is nice, it is subtle. Is there a way to format this text to make it a bit more apparent that it is the active link?

Also, has anyone tested this navigation with customers to see how they like it? I think it is very usable, but the little + and – buttons are not standard for web navigation and may confuse some people.

Any input would be greatly appreciated.

Thanks,

Jaz

User avatar
Sean@WMS
Ensign (ENS)
Ensign (ENS)
Posts: 20
Joined: Tue Nov 20, 2007 8:23 pm
Location: NW California
Contact:

Re: Navigation treeview or flyout menus?

Post by Sean@WMS » Wed Nov 05, 2008 10:53 am

Hi Jaz,

All of the styling issues you bring up here are controlled with the CSS. There are plenty examples of the CSS in this thread.

However, I find the ComponentArt flyout menu to be a MUCH nicer navigation option than the tree view. . . . and a heckuva lot easier to work with too.
Sean Connors
Web Merchant Services
Supplying the services you need to succeed online
www.WMSmerchantservices.com

KreftB
Ensign (ENS)
Ensign (ENS)
Posts: 11
Joined: Thu Jun 11, 2009 8:56 am

Re: Navigation treeview or flyout menus?

Post by KreftB » Fri Jun 12, 2009 11:15 am

Quick CSS question...I added the Category Tree View navigation discussed in this post and it works great. I would like the selected category background (width of the panel) to remain highlighted after it's selected. I have figured out how to make it bold but can't seem to get this additional piece to work properly. Probably an obvious question but I'm just learning CSS techniques.

Thanks,

Ben

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Navigation treeview or flyout menus?

Post by mazhar » Fri Jun 12, 2009 10:50 pm

If your store is online store URL would be very helpful.

KreftB
Ensign (ENS)
Ensign (ENS)
Posts: 11
Joined: Thu Jun 11, 2009 8:56 am

Re: Navigation treeview or flyout menus?

Post by KreftB » Fri Jun 19, 2009 8:55 am

Sorry for the delay...I didn't have an accessible URL until recent. I would like the left hand category box to retain the highlighted box that appears at hover when a subcategory is selected. Much like the font color is retained.

Thanks again for helping out.

Ben Kreft
http://www.animalloft.com

KreftB
Ensign (ENS)
Ensign (ENS)
Posts: 11
Joined: Thu Jun 11, 2009 8:56 am

Re: Navigation treeview or flyout menus?

Post by KreftB » Fri Jun 19, 2009 9:11 am

On another topic...I have a vertical nav menu implemented. In one category - DOG -the dropdown has many subcategories and the control is forcing the menu to expand particlly upward unless I scroll my screen down. Is there a easy way to "force" the menu to drow down and right regardless of screen size? I have the ExpandDirection property set to "DownRight".

Thanks,

Ben K
http://www.animalloft.com

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Navigation treeview or flyout menus?

Post by mazhar » Fri Jun 19, 2009 10:06 am

KreftB wrote:Sorry for the delay...I didn't have an accessible URL until recent. I would like the left hand category box to retain the highlighted box that appears at hover when a subcategory is selected. Much like the font color is retained.

Thanks again for helping out.

Ben Kreft
http://www.animalloft.com
Open your menu control in Visual Studio and check its properties, there would be SelectedItemClass property put some class name in it and then update you CSS to have that class name your desired background color for selected image.

User avatar
gio50000
Commander (CMDR)
Commander (CMDR)
Posts: 123
Joined: Mon Feb 18, 2008 12:51 pm
Location: Orlando, FL
Contact:

Re: Navigation treeview or flyout menus?

Post by gio50000 » Sat Jun 20, 2009 10:01 am

@Rumbles - Thank you for the code and installation notes. I wish most of the code examples were this easy.

Treeview example on my site http://www.airshowshop.com.

Thanks,
Gio
Thank you,
Gio

User avatar
triplw
Commander (CMDR)
Commander (CMDR)
Posts: 144
Joined: Sat Jan 12, 2008 5:34 pm
Contact:

Re: Navigation treeview or flyout menus?

Post by triplw » Sat Jun 20, 2009 7:35 pm

Gio,
Nice site but I think the category "Gassware" is a typo.

User avatar
gio50000
Commander (CMDR)
Commander (CMDR)
Posts: 123
Joined: Mon Feb 18, 2008 12:51 pm
Location: Orlando, FL
Contact:

Re: Navigation treeview or flyout menus?

Post by gio50000 » Sun Jun 21, 2009 2:50 am

@triplw - good catch. Thank you.
Thank you,
Gio

User avatar
gio50000
Commander (CMDR)
Commander (CMDR)
Posts: 123
Joined: Mon Feb 18, 2008 12:51 pm
Location: Orlando, FL
Contact:

Re: Navigation treeview or flyout menus?

Post by gio50000 » Sun Jun 21, 2009 8:49 am

I would like to use the same logic but with <ul> and <li> tags. Can I replace this control with a CSS control? Any thoughts or ideas?

Gio
Thank you,
Gio

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Navigation treeview or flyout menus?

Post by mazhar » Mon Jun 22, 2009 9:34 am

gio50000 wrote:I would like to use the same logic but with <ul> and <li> tags. Can I replace this control with a CSS control? Any thoughts or ideas?

Gio
Here is a CSS based navigation, check second control posted in this thread
viewtopic.php?f=47&t=9150

User avatar
gio50000
Commander (CMDR)
Commander (CMDR)
Posts: 123
Joined: Mon Feb 18, 2008 12:51 pm
Location: Orlando, FL
Contact:

Re: Navigation treeview or flyout menus?

Post by gio50000 » Mon Jun 22, 2009 10:30 am

@mazhar - the css code works but its only useful if you don't have secondary categories. In other words it only displays the top level categories and no child level elements (see planes and boats example below).

Code: Select all

<ul>
<li>shoes</li>
<li>apparel</li>
    <ul>
        <li>planes</li>
        <li>boats</li>
    </ul>
<li>glassware</li>
<li>dvd</li>
<li>toys</li>
</ul>
Any thoughts on how to achieve this?

Gio
Thank you,
Gio

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Navigation treeview or flyout menus?

Post by mazhar » Tue Jun 23, 2009 1:45 am

It is rendering all categories. In fact you need to adjust some CSS code to make it render child categories in a nested fashion. For example have a look at following website's left nav which is making use of same control.
http://www.devonsuperstore.com/

User avatar
gio50000
Commander (CMDR)
Commander (CMDR)
Posts: 123
Joined: Mon Feb 18, 2008 12:51 pm
Location: Orlando, FL
Contact:

Re: Navigation treeview or flyout menus?

Post by gio50000 » Thu Jun 25, 2009 6:25 am

@mazhar - Excellent!
Thank you,
Gio

KreftB
Ensign (ENS)
Ensign (ENS)
Posts: 11
Joined: Thu Jun 11, 2009 8:56 am

Re: Navigation treeview or flyout menus?

Post by KreftB » Thu Jun 25, 2009 7:01 pm

Thanks Mazhar!

User avatar
gio50000
Commander (CMDR)
Commander (CMDR)
Posts: 123
Joined: Mon Feb 18, 2008 12:51 pm
Location: Orlando, FL
Contact:

Re: Navigation treeview or flyout menus?

Post by gio50000 » Sun Jun 28, 2009 7:52 am

@mazhar - Is there a way to add Featured Products to the AllCategories.ascx code? It has to be dynamically rendered like the other categories so I can make use of the CSS pseudo classes.

Thanks,
Gio
Thank you,
Gio

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Navigation treeview or flyout menus?

Post by mazhar » Mon Jun 29, 2009 5:04 am

gio50000 wrote:@mazhar - Is there a way to add Featured Products to the AllCategories.ascx code? It has to be dynamically rendered like the other categories so I can make use of the CSS pseudo classes.

Thanks,
Gio
Use this version of control
Attachments
AllCategories.zip
(932 Bytes) Downloaded 411 times

User avatar
gio50000
Commander (CMDR)
Commander (CMDR)
Posts: 123
Joined: Mon Feb 18, 2008 12:51 pm
Location: Orlando, FL
Contact:

Re: Navigation treeview or flyout menus?

Post by gio50000 » Mon Jun 29, 2009 7:44 am

@Mazhar - The updated code doesn't display featured products?

Gio
Thank you,
Gio

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Navigation treeview or flyout menus?

Post by mazhar » Mon Jun 29, 2009 7:59 am

Make sure that you have some products marked as featured on your store.

User avatar
gio50000
Commander (CMDR)
Commander (CMDR)
Posts: 123
Joined: Mon Feb 18, 2008 12:51 pm
Location: Orlando, FL
Contact:

Re: Navigation treeview or flyout menus?

Post by gio50000 » Mon Jun 29, 2009 8:13 am

@mazhar - I do see my site http://www.airshowshop.com. Thoughts?
Thank you,
Gio

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Navigation treeview or flyout menus?

Post by mazhar » Mon Jun 29, 2009 8:37 am

Hmm seems that you have featured products setup. Make sure that you are using the updated version of AllCategories control. It may be the case that you got two versions of control and still needs to point to correct control.

User avatar
Kalamazoo
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 42
Joined: Wed Apr 01, 2009 6:10 pm

Re: Navigation treeview or flyout menus?

Post by Kalamazoo » Tue Jul 06, 2010 12:10 pm

Just to pick up on this great topic. What exactly does Able Solutions provide developers for use in the 7.0 releases? Is it any Component Art control listed here by chance? http://www.componentart.com/products/as ... x#controls

Thanks,

Phil Chrisman

User avatar
Shopping Cart Admin
AbleCommerce Admin
AbleCommerce Admin
Posts: 3055
Joined: Mon Dec 01, 2003 8:41 pm
Location: Vancouver, WA
Contact:

Re: Navigation treeview or flyout menus?

Post by Shopping Cart Admin » Tue Jul 06, 2010 2:01 pm

Hello Phil,

That's correct, but they are for use only within the AbleCommerce application.
Thanks for your support

Shopping Cart Guru
AbleCommerce.com
Follow us on Facebook

User avatar
Kalamazoo
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 42
Joined: Wed Apr 01, 2009 6:10 pm

Re: Navigation treeview or flyout menus?

Post by Kalamazoo » Tue Jul 06, 2010 2:17 pm

Hey Mike:

Keeps getting better and better!

Let me get this straight, buy a $995 package and get an additional $800 dollars of value with Component Arts Web.UI to use all throughout your AbleCommerce store. That's about the best deal on the planet for "off-the-shelf" ecommerce software that is ALSO PCI-DSS version 1.2 compliant we as well.

Should you buy AbleCommerce? huhm.... let me think...

Thanks,

Phil Chrisman

Post Reply