Navigation Drop-Down Menu

[VenMill]

Hello ... has anyone on their own created a drop down sub-menu for their main navigation within their 3d cart stores. I have no problem grabbing code and spry widgets from other sites that I have done in the past but because the pages are dynamic I can't figure out where to past the code to have it appear. I know I can pay to have them do it and if I can't figure it out on my own then I just might have to go that route but I would prefer not to. :confused:

Thank you for any help and/or suggestions.

[Go Live]

Now that's a big question for a first post. Without template number or code your not going to see an answer.

In general if you need a smart answer you will need to post a smarter question.

[piaf]

... In general if you need a smart answer you will need to post a smarter question.

OUCH! That was a bit harsh to tell a first time poster. If that had been me asking the question, I'd sure be turned off from further participation. :(

[rburton34]

OUCH! That was a bit harsh to tell a first time poster. If that had been me asking the question, I'd sure be turned off from further participation. :(

Agreed. Wondering why such a mean reply to an innocent question. He's just asking where within the template to paste certain code to perform a certain function.

[Go Live]

Not mean, honest.
Better then a goose egg.
So many times a goose egg hits the bottom of the page and one can never understand why.
I did provide a solution to the badly put question. Are you suggesting that it is better to be ignored? I am a strait shooter.He in need will take the steps or go without.

I have many unanswered questions and I'm not sure if the question is misunderstood or nobody cares to help out. But I would prefer a reply to keep the dream alive and have the opportunity to clearify.

Maybe some of you would prefer the goose egg and never get any help.

I am very new here and have provided way more help then I have received. I would rather receive an honest answer oppose to none. To each his own I'll keep my comments to myself if that pleases you.

I give praise were do. Thanks Laura for all your help and comfort provided by your kind replies. Maybe it's time I took a break.

Good Luck VenMill and Welcome aboard.

[piaf]

Now, to answer Ven's question....

Depending on your template, you'd need to find the area of your "frame.html" template where it says <!--START: CATEGORIES--> to make changes for your category navigation listings. From there until the line where it says <!--END: CATEGORIES--> is the section of code that would probably need to be replaced with any dynamic dropdown nav code you'd want to use.

Edit: AND BE SURE TO MAKE A BACKUP COPY OF YOUR FRAME.HTML TEMPLATE BEFORE YOU MAKE ANY CHANGES TO IT

[VenMill]

First of all ... thank you piaf for your explanation. I will continue further with that discussion in a second.

In regards to the back and forth and the comments about the lack of information supplied. I apologize for that. I was under the impression that this was a forum for open discussion ... particularly those who have experience helping those who are new at this, and as you can see yes I am new at this. My intent was to bring up the question and either receive a response of "no I have not done that" or "yes I have, can you please supply 'such and such' information/code ..." I would rather supply the appropriate information to someone instead of posting a ton of redundant information, especially not know what to supply.

Also just a side note VenMill's the company name ... my name is Jessica :)

Now back to the response. The template I am working with is V32005. Please understand that I have just started with this site so there is not much there yet but here is the link http://venmill.3dcartstores.com/

I am looking to have the top nav of "Home, Shop, Products ..." to have the drop-down sub menu when hovering over. I created those links not with the categories section but with the site content section. So I am can't seem to find where in the frame.html to add the code. I have already added the JS and CSS files to the site. It seems because its dynamic that the instructions that I am trying to follow don't match up to the site. I have pasted example code of what it is supposed to basically look like below ...

<!--Create a Menu bar widget and assign classes to each element-->
<ul id="menubar1" class="MenuBarHorizontal">
<li><a class="MenuBarItemSubmenu" href="#">Item 1</a>
<ul>
<li><a href="#">Item 1.1</a></li>
<li><a href="#">Item 1.2</a></li>
<li><a href="#">Item 1.3</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Item 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
<ul>
<li><a href="#">Item 3.1.1</a></li>
<li><a href="#">Item 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3.2</a></li>
<li><a href="#">Item 3.3</a></li>
</ul>
</li>
<li><a href="#">Item 4</a></li>

Now this is the code in the frame.html file ...

<td><!--START: FRAME_MENU-->
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<!--START: menuitems_view-->
<!--START: TOP_LINK_FORMAT-->
<td nowrap="nowrap"><a href="infopage.asp?page=[link_id]" class="menu" target="[link_target]">[link_name]</a></td>
<td align="center"><img src="assets/templates/[template]/images/menu-line.gif" hspace="10"></td>

<!--END: TOP_LINK_FORMAT-->
<!--END: menuitems_view-->
</tr>
</table>
<!--END: FRAME_MENU--></td>

If there is anything else I need to post please just ask and I am sorry if this is too much information. I appreciate any help that anybody is able to provide.

Thank you - Jessica

[Go Live]

Hi Jessica

I had a feeling you were a girl:) Just so you know on a week day if no reply with in 24hrs (99.9% of the time opportunity has gone) Either nobody has a clue or the question is not understood) My problem is I'm always misunderstood and hardly get answers)

I like your site look. Very good start. The blue logo and site green do clash a little. This can be fixed by placing a checkered grid in the upper left of your logo that can go from one color to the other in a transparent gradient fashion.

Your main image is a little smaller then the place holder and the image needs to be optimized as it is a large file size of 229.48 KB. This can be optimized to still look great at 74kb. The 5 images below are about 18kb each and can be optimized to about 6kb each

Your menu
First you will have to hide the "menu links" and replace with your own. It is not a good idea to have sub menus that are independent of the main menus. To hide the menus go to settings>general>store settings: Main store settings>Hide menu links. Check this box go to bottom of page save then bottom of page Clear Cache.

Here is the code you have now

<td><table width="100%" border="0" cellpadding="0" cellspacing="0" style="background: url(assets/templates/[template]/images/menu-bg.gif) repeat-x;">
                <tr>
                  <td width="13"><img src="assets/templates/[template]/images/menu-l.gif" width="13" height="48"></td>
                  <td><!--START: FRAME_MENU-->
                    <table cellspacing="0" cellpadding="0" border="0">
                      <tr>
                        <!--START: menuitems_view-->
                        <!--START: TOP_LINK_FORMAT-->
                        <td nowrap="nowrap"><a href="infopage.asp?page=[link_id]" class="menu" target="[link_target]">[link_name]</a></td>
                        <td align="center"><img src="assets/templates/[template]/images/menu-line.gif" hspace="10"></td>
                        <!--END: TOP_LINK_FORMAT-->
                        <!--END: menuitems_view-->
                      </tr>
                    </table>
<!--END: FRAME_MENU--></td>

Replace with this and put your new menu in the table that I inserted for you.

<td><table width="100%" border="0" cellpadding="0" cellspacing="0" style="background: url(assets/templates/[template]/images/menu-bg.gif) repeat-x;">
                <tr>
                  <td width="13"><img src="assets/templates/[template]/images/menu-l.gif" width="13" height="48"></td>
                  <td>
												<table border="0" cellspacing="0" cellpadding="0" height="48">
													<tr>
														<td>Replace with your new menu</td>
													</tr>
												</table>
</td>

You can use the images provided to recreate the menu buttons or use screen capture for the button and add your own text and rollover image swaps.
If this is more then you were looking to do then 3dcart would be happy to create the dropdown menus for you. http://www.3dcart.com/ecommerce-dropdown-menus.html for a small fee.

This should give you the start that you were looking for. If you need help with the images just PM me an email address to send them to.

Going to the next step would be to slice the main image convert to B&W the lower buttons would perform a image swap to color in the main image. (just food for thought)

Have fun!

[VenMill]

Good Morning Go Live,

Thank you for the clear explanation and code. I was able to make the drop down menu work this morning. Now all I have to do is go into the css file and change the look and feel to match the site. I really do appreciate your help on it.

Also I appreciate your feedback on the images. I have been testing them to see what I like on the page and haven't yet optimized them but again thanks for mentioning it as I probably would have forgotten to do it. I think I will also take your recommendation on the roll over for the bottom links to the main image. That's a great way to connect the both.

If you have any time to just quickly explain a little more on what you mean by developing a grid for making the company logo look more cohesive I would appreciate it ... if you can't no problem as I appreciate what you have done. Also I am a complete moron because I can't seem to figure out what PM means :o

Thanks Jess

[VenMill]

Ok Total Idiot ... just figured it out after I posted the reply, its Private Message ... I'll get the hang of these forums. Thanks! Jess

[Go Live]

Nice job looks like it fit right in for you.

That's a great way to connect the both.

That's what I was thinking. Glad to assist.


Careful with adding to many gadgets. Keep it clean and simple. (after years of animation it took me a long time to obide by the KISS (keep it simple stupid) technique.

If you have any time to just quickly explain a little more on what you mean by developing a grid for making the company logo look more cohesive I would appreciate it ..

Something like below but with squares and then do a transperent gradient and place on your logo upper left.

[ ][ ][ ][ ][ ][ ]
[][ ][ ][ ]
[ ][ ]

But very nice start. You should give yourself more credit, you earned it.

Enjoy........

[NMTEACO]

Hi Jessica
If this is more then you were looking to do then 3dcart would be happy to create the dropdown menus for you. http://www.3dcart.com/ecommerce-dropdown-menus.html for a small fee.

Are they doing something special with the backend when you pay them to build this feature? I have tried for sometime in the past to build a dynamic dropdown menu with the stock system, and it seems that the way the PHP code pulls the data for the sub categories, its just not possible to populate the dropdown menus properly. (they are using the li tags)

Put I basically muddle through the coding by cutting and pasting code blocks, so maybe its just my lack of skill that was the limiting factor.

[Go Live]

To be honest there are always trade offs.
Much better look and control to do your own and update your own if and when new categories or pages are added.

Put I basically muddle through the coding by cutting and pasting code blocks, so maybe its just my lack of skill that was the limiting factor.

Not sure of the PHP code you are working with as we are on windows servers.

In the case with VanMill the extra categories were add on pages and not truly sub cats. So I was most glad to help her get the menu system she designed up and going.

On my site we have 440 categories up to 5 levels deep and use two rows of tabs to pull it off on three Z layers. Quite elaborate but very nice.
I know there are alot of menu snippets out there for the taking. The solution I use is a very expensive software one trick pony that does only dropdown menus that are expandable, semi transparent, you can even use animated gifs for buttons.

Now a days there are many solutions available just pick one you like and add your URLs. But if you would like it to be fully auto updating and use true subcategories then go for the 3dcart deal and you will never have to worry about it again.

Good Luck!

[Strider_Bike_USA]

Hi VenMill and Go Live,
Any chance you could help me figure out drop down menus?

I am using template v30014 for the site Balance bikes by Strider - Balance Bikes USA Portland, OR and I am trying to get a drop down menu to show the categories under the product menu. Not sure where to start!

Any advice would be so appreciated!

Thanks,
Cherie

[VenMill]

Hi Cherie,

I noticed that my drop down menu doesn't seem to work in IE that well. I have customers complaining now that they lose the drop downs ... so I wish I could help you more but as of right now I am considering changing my menu structure to something a little more friendly. How I originally got it working was from the comments and instructions Go Live sent me in this thread so if you want to play with it ... that would be the best suggestion as of right now.

Sorry I couldn't help more.

Jessica