Announcement

Collapse
No announcement yet.

Adding Drop Down Menu -- Where does code go?

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

  • Adding Drop Down Menu -- Where does code go?

    Hey All,
    I need some help here. I'd like to replace the standard top navigation menu with a CSS drop down menu that I created using Easy Button and Menu Maker. Every time I input the code snippet in the frame.html file, the whole template goes nuts. I'm using template v32005. Can someone tell me where the code gets pasted? Also do I need to make any other modifications to the frame.html file or the CSS.

    The program also generates some image files which I placed in the assets/templates/v32005/images folder. Is that correct?

    If anyone else is using EB&MM, please assist with a short step-by-step.

    Feel free to PM me.

    Thanks, Rockones
    Sana's Urban Design



    sanas_ddmenu_code.txt

  • #2
    Originally posted by rockones View Post
    Hey All,
    I need some help here. I'd like to replace the standard top navigation menu with a CSS drop down menu that I created using Easy Button and Menu Maker. Every time I input the code snippet in the frame.html file, the whole template goes nuts. I'm using template v32005. Can someone tell me where the code gets pasted? Also do I need to make any other modifications to the frame.html file or the CSS.
    [ATTACH]244[/ATTACH]

    It looks like your trying to build your menu by hand? It is possible to have the dropdown menu generated on they fly by 3dart to use your categories. This better because when you hide or create a category then it will show up. The downside is that you can only have one level deep. MAINCATEGORY>SubCatagory

    Here is the template code:

    HTML Code:
    <nav id="categorylinks">
    <ul id="nav" style="text-align:center;">
    <!--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: CATEGORIES--> 
    </ul>
    </nav>
    Now as far as the way the menus look, you use css to get what you want. Place the following code in your css file:

    Code:
    #nav{
        list-style:none;
        font-weight:bold;
        margin-bottom:10px;
        <span class="code-comment">/* Clear floats */</span>
        float:left;
        width:100%;
        <span class="code-comment">/* Bring the nav above everything else--uncomment if needed.
        position:relative;
        z-index:5;
        */</span>
    }
    #nav li{
        float:left;
        margin-right:10px;
        position:relative;
    }
    #nav a{
        display:block;
        padding:5px;
        color:#fff;
        background:#333;
        text-decoration:none;
    }
    #nav a:hover{
        color:#fff;
        background:#6b0c36;
        text-decoration:underline;
    }
    
    <span class="code-comment">/*--- DROPDOWN ---*/</span>
    #nav ul{
        background:#fff; <span class="code-comment">/* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */</span>
        background:rgba(255,255,255,0); <span class="code-comment">/* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */</span>
        list-style:none;
        position:absolute;
        left:-9999px; <span class="code-comment">/* Hide off-screen when not needed (this is more accessible than display:none;) */</span>
    }
    #nav ul li{
        padding-top:1px; <span class="code-comment">/* Introducing a padding between the li and the a give the illusion spaced items */</span>
        float:none;
    }
    #nav ul a{
        white-space:nowrap; <span class="code-comment">/* Stop text wrapping and creating multi-line dropdown items */</span>
    }
    #nav li:hover ul{ <span class="code-comment">/* Display the dropdown on hover */</span>
        left:0; <span class="code-comment">/* Bring back on-screen when needed */</span>
    }
    #nav li:hover a{ <span class="code-comment">/* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */</span>
        background:#6b0c36;
        text-decoration:underline;
    }
    #nav li:hover ul a{ <span class="code-comment">/* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */</span>
        text-decoration:none;
    }
    #nav li:hover ul li a:hover{ <span class="code-comment">/* Here we define the most explicit hover states--what happens when you hover each individual link. */</span>
        background:#333;
    }

    Comment


    • #3
      Thx NMTEACO.
      I pasted the CSS and HTML codes in their respective places. As soon as I cleared the cache and refreshed the view, the full category list in the left column disappeared.
      I reverted back to the previous save to get the categories back, but any idea of what could have caused the categories to drop? Anything I should be on the lookout for?

      rockones

      Comment


      • #4
        maybe I misunderstood... this dropdown menu would take the place of your category menu.

        It seems like your wanting to do a additional menu?

        Comment


        • #5
          Just a side note when using a custom drop menu within 3dcart tags... Be sure to go (Settings-->General-->Store Settings) scroll down to "Main Store Settings" and make sure that you UNCHECK both boxes available for "Hide Subcategories"
          TheCartDesigner.com
          Not 3dcart Owned or Operated
          100% Independent 3dcart Expert


          Follow Us on Twitter

          Comment


          • #6
            The goal is to remove the top nav menu (home, about, contact...) and replace it with a horizontal CSS drop down menu. The left side category menu can stay as is.

            Thx,

            Rockones

            Comment


            • #7
              Any further input from the savvy forum minds?

              Rockones

              Comment


              • #8
                I can try to lend a helping hand. If you can pm me the code and css for your menu, I will figure out how it needs to be placed in your template.

                Thanks,
                Shaun
                TheCartDesigner.com
                Not 3dcart Owned or Operated
                100% Independent 3dcart Expert


                Follow Us on Twitter

                Comment

                Working...
                X