trying to do a drop down nav menu

[brinkjewelry]

I read through the whole forum here and I am at a loss, I am trying to add a drop down menu on my site, for the top navigation menu. I have looks through a few shops that have this, and i just can't figure this out. I was trying to use the dynamic drive menu found here:
Dynamic Drive DHTML Scripts- Chrome CSS Drop Down Menu
I uploaded the JS files and CSS file to my site, and added the HTML and it doesn't even show :(
here is my header where I reference the js and CSS files:

[META]
<link rel="stylesheet" type="text/css" href="assets/templates/v30014/menu/chrometheme/chromestyle.css" />
<script type="text/javascript" src="assets/templates/v30014/menu/chromejs/chrome.js"></script>
<script language="JavaScript" src="assets/templates/common/js/utilities.js" type="text/JavaScript"></script>
<link rel="StyleSheet" href="assets/templates/[template]/css/[stylesheet]" type="text/css" media="screen">
<!--START: FRAME_RSSFEEDS-->

and here is the menu where I want to place it.

<!--START: FRAME_MENU-->
        <table cellspacing="0" cellpadding="5" border="0" id="Table3">
          <tr>
            <td>**</td>
            <!--START: menuitems_view-->
            <!--START: TOP_LINK_FORMAT-->
            <td>
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="#" rel="dropmenu1">Resources</a></li>
<li><a href="#" rel="dropmenu2">News</a></li>
<li><a href="#" rel="dropmenu3">Search</a></li>	
</ul>
</div>

<!--1st drop down menu -->                                                   
<div id="dropmenu1" class="dropmenudiv">
<a href="http://www.dynamicdrive.com/">Dynamic Drive</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>


<!--2nd drop down menu -->                                                
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://www.cnn.com/">CNN</a>
<a href="http://www.msnbc.com">MSNBC</a>
<a href="http://news.bbc.co.uk">BBC News</a>
</div>

<!--3rd drop down menu -->                                                   
<div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
<a href="http://www.google.com/">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>
<a href="http://www.msn.com">MSN</a>
</div>
</td>
            <!--END: TOP_LINK_FORMAT-->
            <!--END: menuitems_view-->
          </tr>
        </table>
        <!--END: FRAME_MENU-->

I would ideally like a dynamic solution, but if i need to code it like that, I'm OK with that.
does anyone have any help they can give me?
-Chris

[thecartdesigner]

Do you need a multi-level drop down or a single level? If its a single level drop down you have access to it already through 3dcart. If its a multi-level you need I have a very well tested Dynamic Drive drop menu script that worked quite well and you are welcome to use it. (Not Dynamic though)

As far as what you have right now.. Ditch the pre-built 3dcart call tags <!----> around the menu. You want to be able to see it before anything else. Make sure all you file paths are correct and that all of the style ID's or Class' are correct with the CSS file.

[brinkjewelry]

i just need it to go page>subpage, so i think just a single level.
which dynamic drive script did you use?
thanks so much!
-Chris

[thecartdesigner]

Hey Chris,

I use to use the "ddlevelsmenu" which is multi tier but again "Not dynamic". Sounds like you just need a single level which would be dynamic. Send me a PM with the template you are using and I will get you the code, script, and css you will need for your template specifically.

*just scrolled back up and saw the template # in your posted code. I'll get it put together for ya tonight.*

[brinkjewelry]

oh wow thank you so much!

[thecartdesigner]

sent you PM

[Strider_Bike_USA]

Drop down help...please

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

Any advice would be so appreciated!

Thanks,
Cherie

[thecartdesigner]

I see that you changed templates. With what you are wanting you would need to have a custom coded drop menu, which is somewhat of a pain if you intend on adding extra pages and or categories.

The easiest solution would be to add the category drop menu below the global header in your current template. You can however use the category drop menu as your primary at the top and make extra pages (i.e. "home, contact us, etc") categories and link them direct to their menu links or extra page links.

Send me a pm with what you would like and I will try to help you out the best I can without getting into the need to charge for custom work.

Again, the easiest and quickest solution would be to put the cat menu below your logo in your current template.

Thanks,
Shaun

[vswebdesign]

I'm using v32010 template and also would like to implement a simple drop-down menu. If you would like to share the code, I would be most appreciative.

foxhollowherbs.3dcartstores.com

Thanks!

[mueller]

I'm using v32010 template and also would like to implement a simple drop-down menu. If you would like to share the code, I would be most appreciative.

foxhollowherbs.3dcartstores.com

Thanks!

Second that!

[brian.bills]

multi-column drop down nav

I was wondering if anyone has ever coded their own multi-column drop down nav before?

If you go to LittleDressUpShop.3dcartstores.com - I paid 3dcart to develop a custom navigation menu that would include multiple columns because I knew we would have quite a few sub-pages, which they did but the developers said the width of the drop down HAS to be fixed so if you hover over the 'On Sale Clearance' we have one sub-page listed and it is still showing two columns which looks horrible.

Not to mention the crappy fact that they are listing and sorting the sub-pages in order by going like this (when you have more than 20 subpages the alphabetization gets all messed up and is hard to figure out (hover over Princess Dress Ups to see an example):

(column1) (column2)
subpageA subpageB
subpageC supbageD
subpageE subpageF

What I wanted (which they did not do) was to dynamically create the 2nd column of subpages after X amount of subpages was created. And when there were 2 columns the sorting would be down column 1 and then continue down column 2. Hope that makes sense.

I need to see if I can either fix this on my own or if anyone else could develop this for me or there is some code already out there!

This is a dynamic menu using the 'Extra Pages' and creating sub-pages for the Extra Pages. I can provide further explanation if necessary.

Thanks,
B

[thecartdesigner]

If anyone needs help with adding or changing a standard or CSS drop menu you can send me a pm. I will help the best I can.

Keep in mind though that I am on Baby Alert right now...lol. My wife is due very soon and I don't think the kid is going to wait much longer. So I may not reply immediately, but I will reply as soon as I can.

Thanks

Noah, I sent you a reply.

[user001]

Here is some raw code for a Category dropdown menu using CSS and jQuery.
Im using this on my site and works 100%.
This is a straight copy and paste so you'll need to go over it and fix it for you.

To list the subcategories try using the "<!--START: SUB_CATEGORY_FORMAT-->" and fix jQuery as needed (see jQuery: The Write Less, Do More, JavaScript Library for jQuery help).

-----------------------
The jQuery - This goes in the head section.

<script type="text/javascript">
jQuery.noConflict();

jQuery(document).ready(function($){
//MAIN DROPDOWN MENU
$(".dropdown-menu").hover(function(){
$(this).children("ul").stop(true, true).delay(200).slideDown().fadeIn();
},function(){
$(this).children("ul").stop(true, true).delay(200).slideUp().fadeOut();
});
$(".dropdown-menu ul li").hover(function(){
$(this).css("background-color", "#333333").children("ul").stop(true, true).fadeIn();
},function(){
$(this).css("background-color", "").children("ul").stop(true, true).fadeOut();
});
//
$(".dropdown-menu a").click(function(){
$(".dropdown-menu a").removeClass("dropdown-menu-active");
$(this).addClass("dropdown-menu-active");

});
});
</script>
-----------------------

The HTML -
<!-- DROPDOWN MENU -->
<div class="dropdown-menu grid_3">
<span class="dropdown-title">By Categories</span>
<ul>
<!--START: CATEGORIES-->
<!--START: CATEGORY_FORMAT-->
<li><a href="view_category.asp?cat=CATID">CATEGORY</a>
<!--END: CATEGORY_FORMAT-->
<ul>
<!--START: SUB_CATEGORY_FORMAT-->
<li><a href="view_category.asp?cat=CATID">CATEGORY</a></li>
<!--END: SUB_CATEGORY_FORMAT-->
</ul>

</li>
<!--END: CATEGORY_FORMAT-->
<!--END: CATEGORIES-->
</ul>
</div>
<!-- / DROPDOWN MENU -->
-----------------------

The CSS -
.dropdown-menu {
background: url("../images/btn-bg.jpg") repeat-x scroll center top transparent;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
height: 30px;
line-height: 30px;
margin: 9px 0 0;
overflow: hidden;
position: relative;
width: auto;
}

.dropdown-title {
background: url("../images/dropdown-arrow.png") no-repeat scroll 93px 12px transparent;
color: #444444;
display: block;
font-size: 12px;
height: 30px;
padding-left: 5px;
text-shadow: 0 1px 0 #F5F5F5;
width: auto;
}

.dropdown-menu ul {
background: url("../images/feedback-bg.jpg") no-repeat scroll left top #2B2B2B;
box-shadow: 0 1px 2px 0 #999999;
display: none;
height: auto;
left: 0;
list-style: none outside none;
padding: 5px 0;
position: absolute;
top: 30px;
width: 160px;
}

.dropdown-menu ul li {
margin: 0;
position: relative;
width: auto;
}

.dropdown-menu ul li a {
color: #FFFFFF;
display: block;
font-size: 11px;
height: 30px;
padding-left: 5px;
text-decoration: none;
}
-----------------------


Hope someone finds this helpful

[user001]

If anyone needs help with adding or changing a drop menu you can send me a pm. I will help the best I can.

Keep in mind though that I am on Baby Alert right now...lol. My wife is due very soon and I don't think the kid is going to wait much longer. So I may not reply immediately, but I will reply as soon as I can.

Thanks

Noah, I sent you a reply.

Congrats!! I just had a baby girl last week, June 18. This is my first one so still learning the ropes lol. If this is your first all I can say is to rest as much as possible, they eat and poop every couple hours... none stop... and no off switch. But somehow its all worth when they smile at you.
Good luck, you'll feel great after a 3 hour nap lol.

[thecartdesigner]

Congrats!! I just had a baby girl last week, June 18. This is my first one so still learning the ropes lol. If this is your first all I can say is to rest as much as possible, they eat and poop every couple hours... none stop... and no off switch. But somehow its all worth when they smile at you.
Good luck, you'll feel great after a 3 hour nap lol.

This is number 4...lol. Just so you know... the learning never stops if you have another because none of them are ever the same....lol. But always worth it!

Anyone that needs a good code should sure try 001's code above.. It may have some jquery, but it appears pretty light.