Announcement

Collapse
No announcement yet.

trying to do a drop down nav menu

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • trying to do a drop down nav menu

    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:
    HTML Code:
    [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.
    HTML Code:
    <!--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

  • #2
    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.
    TheCartDesigner.com
    Not 3dcart Owned or Operated
    100% Independent 3dcart Expert


    Follow Us on Twitter

    Comment


    • #3
      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

      Comment


      • #4
        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.*
        Last edited by thecartdesigner; 02-08-2012, 01:28 PM.
        TheCartDesigner.com
        Not 3dcart Owned or Operated
        100% Independent 3dcart Expert


        Follow Us on Twitter

        Comment


        • #5
          oh wow thank you so much!

          Comment


          • #6
            sent you PM
            TheCartDesigner.com
            Not 3dcart Owned or Operated
            100% Independent 3dcart Expert


            Follow Us on Twitter

            Comment


            • #7
              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

              Comment


              • #8
                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
                TheCartDesigner.com
                Not 3dcart Owned or Operated
                100% Independent 3dcart Expert


                Follow Us on Twitter

                Comment


                • #9
                  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!
                  Joanne Barker
                  VS Web Design
                  [email protected]

                  Comment


                  • #10
                    Originally posted by vswebdesign View Post
                    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!

                    Comment


                    • #11
                      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

                      Comment


                      • #12
                        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.
                        Last edited by thecartdesigner; 06-27-2012, 12:16 PM.
                        TheCartDesigner.com
                        Not 3dcart Owned or Operated
                        100% Independent 3dcart Expert


                        Follow Us on Twitter

                        Comment


                        • #13
                          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
                          - Peace
                          www.ifilters.net

                          Comment


                          • #14
                            Originally posted by 3dcartdesigns View Post
                            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.
                            - Peace
                            www.ifilters.net

                            Comment


                            • #15
                              Originally posted by user001 View Post
                              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.
                              Last edited by thecartdesigner; 06-27-2012, 12:18 PM.
                              TheCartDesigner.com
                              Not 3dcart Owned or Operated
                              100% Independent 3dcart Expert


                              Follow Us on Twitter

                              Comment

                              Working...
                              X