No replies
emzipoo4u
emzipoo4u's picture
Offline
newbie
Last seen: 2 years 12 weeks ago
Timezone: GMT+1
Joined: 2012-01-02
Posts: 1
Points: 2

I am using the custom dcjq-mega-menu jquery plugin (jquery.dcmegamenu) and I want to put some text above the menu and some tabs below it but its adding a margin around the whole menu...I'm using the custom example which is available here..

http://www.designchemical.com/lab/jquery/demo/download/custom_mega_menu_styles.zip

I am trying to get the text to appear just above the menu with no gap. There seems to be an issue when using

  • as soon as i put that bit in then it creates this extra margin above and below the menu.
  • Extremely fed up with it now, need your help guys....

    index.html

    <div align="center" class="dcjq-mega-menu">
        <ul class="menu" id="mega-menu-tut" name="mega-menu-tut">
    <li>
     <a href="index.html">Home</a>
          </li>
                      <li><a href="#">Products</a>
                          <ul>
                            <li id="menu-item-1"><a href="#">Product Group 1</a>
                                <ul>
                                  <li>
                                    <div align="left"><a href="product1.html">Product1</a></div>
                                  </li>
                                  <li>
                                    <div align="left"><a href="product2.html">Product2</a></div>
                                  </li>
                                  <li>
                                    <div align="left"><a href="#">Product3</a>Product3</div>
                                  </li>
                                  <li>
                                    <div align="left"><a href="Product4.html">Product4</a></div>
                                  </li>
                                </ul>
                            </li>
                            <li id="menu-item-2"><a href="#">Product Group 2</a>
                                <ul>
                                  <li>
                                    <div align="left"><a href="#">Group 2 1</a></div>
                                  </li>
                                  <li>
                                    <div align="left"><a href="#">Group 2 3</a></div>
                                  </li>
                                                              </ul>
                            </li>
     
                      <li><a href="#">About Us</a>
                          <ul>
                            <li>
                              <div align="left"><a href="#">Company</a></div>
                            </li>
                            <li>
                              <div align="left"><a href="#">Jobs</a></div>
                            </li>
                                                    <li>
                              <div align="left"><a href="#">Returns</a></div>
                            </li>
                          </ul>
                      </li>
                      <li><a href="#">Technical</a>
                          <ul>
                                                    <li>
                              <div align="left"><a href="#">Ask a Question</a></div>
                            </li>
                          </ul>
                      </li>
                      <li>
                        <div align="left"><a href="#">Catalogue</a></div>
                      </li>
                      <li>
                        <div align="left"><a href="#">Contact us</a></div>
     
                      </li>
        </ul>
     
     

    CSS

    /* Reset code to remove theme inherent styling */
    .dcjq-mega-menu ul.menu ul, .dcjq-mega-menu ul.menu li {
    list-style: none; 
    padding: 0; 
    margin: 0;
    top: 0;
    }
    .dcjq-mega-menu ul.menu ul {
    display: none; /* Hides non-mega links */
    }
    .dcjq-mega-menu ul.menu .sub ul {
    display: block; /* overrides above hide */
    }
     
    /* Main menu styles */
    .dcjq-mega-menu ul.menu {
    background: #222 url(images/redbar.png) repeat-x 0 -80px; 
    width: 100%; 
    height: 40px; 
    top: 0px;
    border-right: 1px solid #1B1B1B; 
    border-left: 1px solid #1B1B1B; 
    position: relative; /* Important - required for positioning of mega menu */
    font: normal 13px Arial, sans-serif; 
    line-height: 14px;
    }
    .dcjq-mega-menu ul.menu li {
    float: left; 
    font-weight: bold;
    }
    .dcjq-mega-menu ul.menu li a {
    float: none; 
    display: block;  
    padding: 12px 25px; 
    background: url(images/redbar.png) repeat-x 100% 0; 
    color: #fff;
    text-shadow: 1px 1px 1px #000; 
    text-decoration: none;
    }
    .dcjq-mega-menu ul.menu li.mega-hover a, .dcjq-mega-menu ul.menu li a:hover {
    background-position: 100% -42px; 
    color: #000; 
    text-shadow: none;
    }
     
    /* Arrow tag for parent links */
    .dcjq-mega-menu ul.menu li a.dc-mega {
    padding-right: 38px; /* Additional padding for arrow */
    position: relative; /* Required for arrow positioning */
    }
    .dcjq-mega-menu ul.menu li a .dc-mega-icon {
    display: block; 
    position: absolute; 
    top: 18px; 
    right: 15px; 
    width: 8px; 
    height: 6px; 
    background: url(images/arrow.png) no-repeat 0 0;
    }
    .dcjq-mega-menu ul.menu li.mega-hover a .dc-mega-icon {
    background-position: 0 100%;
    }
     
    /* Mega Menu Styling */
    /* Mega Drop Down Container */
    .dcjq-mega-menu ul.menu li .sub-container {
    position: absolute; /* Required */
    background: url(images/bg_sub_left.png) no-repeat 0 100%; 
    padding-left: 10px; 
    margin-left: -3px;
    }
    .dcjq-mega-menu ul.menu li .sub {
    background: url(images/bg_sub.png) no-repeat 100% 100%; 
    padding: 20px 20px 20px 10px;
    }
    .dcjq-mega-menu ul.menu li .sub-container.mega .sub {
    padding: 20px 10px 0 0;
    }
    .dcjq-mega-menu ul.menu li .sub .row { /* Clear the sub-menu floats */
    width: 100%; 
    overflow: hidden; 
    clear: both;
    }
    .dcjq-mega-menu ul.menu li .sub li {
    float: none; 
    font-size: 1em; 
    font-weight: bold;
    }
    /* Sub-menu Headers */
    .dcjq-mega-menu ul.menu li .sub li.mega-hdr { /* Sub-menu headers - i.e. 2nd level navigation */
    float: left; /* Float the sub-menus and give them a fixed width to from the mega menu rows */
    width: 260px;
    margin: 0 10px 20px 10px;
    border: 1px solid #ccc; 
    }
    .dcjq-mega-menu ul.menu li .sub a { /* Clear the styles from the top-level links and set the font styles */
    background: none; 
    border: none; 
    text-shadow: none; 
    color: #111; 
    padding: 7px 10px; 
    display: block; 
    float: none; 
    text-decoration: none; 
    font-size: 0.9em; 
    }
    .dcjq-mega-menu ul.menu li .sub li.mega-hdr a.mega-hdr-a {
    padding: 7px 10px; 
    margin-bottom: 5px; 
    border-bottom: 1px solid #ccc; 
    text-transform: uppercase; 
    font-weight: bold; 
    color: #000; 
    background: #EAEAEA url(images/bg_hdr.png) repeat-x center center;
    }
    .dcjq-mega-menu ul.menu li .sub li.mega-hdr a.mega-hdr-a:hover {
    color: #000; 
    text-shadow: none;
    }
     
     
    /* Add the individual sub-menu backgrounds */
    .dcjq-mega-menu ul.menu li .sub li#menu-item-1 {
    background: url(images/cats.gif) no-repeat 135px 40px;
    }
    .dcjq-mega-menu ul.menu li .sub li#menu-item-2 {
    background: url(images/ems.gif) no-repeat 135px 40px;
    }
    .dcjq-mega-menu ul.menu li .sub li#menu-item-3 {
    background: url(images/pumps.gif) no-repeat 135px 40px;
    }
    .dcjq-mega-menu ul.menu li .sub li#menu-item-4 {
    background: url(images/) no-repeat 135px 40px;
    }
    .dcjq-mega-menu ul.menu li .sub li#menu-item-5 {
    background: url(images/coils.gif) no-repeat 135px 40px;
    }
    .dcjq-mega-menu ul.menu li .sub li#menu-item-6 {
    background: url(images/diesel.gif) no-repeat 135px 40px;
    }
     
    /* Style the 3rd level links */
    .dcjq-mega-menu ul.menu li .sub li ul li {
    margin-right: 90px;
    }
    .dcjq-mega-menu ul.menu .sub li.mega-hdr li a {
    color: #444;
    font-weight: normal; 
    padding: 3px 0 3px 25px; 
    background: url(images/bullet.png) no-repeat 10px 8px; 
    }
    .dcjq-mega-menu ul.menu .sub li.mega-hdr li a:hover {
    color: #990000;
    background-image: url(images/bullet_on.png); 
    }
     
    /* Styling for items with only 2 levels */
    .dcjq-mega-menu ul.menu li .sub-container.non-mega .sub {
    padding: 20px 20px 20px 10px;
    }
    .dcjq-mega-menu ul.menu li .sub-container.non-mega li {
    width: 190px; /* Set the drop down width */
    }
    .dcjq-mega-menu ul.menu li .sub-container.non-mega li a {
    padding: 7px 5px 7px 22px; 
    background: url(images/bullet.png) no-repeat 5px 12px;
    }
    .dcjq-mega-menu ul.menu li .sub-container.non-mega li a:hover {
    color: #990000;
    background-image: url(images/bullet_on.png);
    }