CODEWITHSUNDEEP
jqueryhtmlcssjquery-uidrop-down-menu
IAMTHESTIG
IAMTHESTIG

Reputation: 418

jQuery UI (toggle) Drop Down Menu Overlaps To Other Menus

The menus are overlapping onto other menus. When you click the first menu "About Us" it opens. But when you click "Products", the "About Us" don't close so the "Products" menu overlaps to "About Us" menu.

jsfiddle

HTML

<body>
<nav>
   <ul class="nav">
        <li><a href="#"></a></li>
        <li class="menuabout"><a>About</a>
             <ul class="subnav01 clearfix">
                  <li><a href="#">About One</a></li>
                  <li><a href="#">About Two</a></li>
                  <li><a href="#">About Three</a></li>
                  <li><a href="#">About Four</a></li>
                  <li><a href="#">About Five</a></li>
                  <li><a href="#">About Six</a></li>
             </ul>
        </li>
        <li class="menuproducts"><a>Products</a>
             <ul class="subnav02 clearfix">
                  <li><a href="#">Product One</a></li>
                  <li><a href="#">Product Two</a></li>
                  <li><a href="#">Product Three</a></li>
                  <li><a href="#">Product Four</a></li>
                  <li><a href="#">Product Five</a></li>
                  <li><a href="#">Product Six</a></li>
             </ul>
        </li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
   </ul>             
</nav>

​

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    height: 100%;
    background: darkgray;
}

.nav {
    width: 100px;
    position: absolute;
    top: 30px;
    right: 20px;
    list-style: none;
}

.nav li {
    margin: 0 0 10px 0;
    font-family: Helvetica;
    font-size: 11px;
    text-align: right;
    text-transform: uppercase;
    line-height: 1;
}

.nav li:nth-child(5) {
    margin: 0;
}

.nav li a {
    height: 10px;
    padding: 10px 10px 10px 0;
    color: white;
    text-decoration: none;
    display: block;
    cursor: pointer;
    position: relative;
}

.subnav01, .subnav02 {
    width: 300px;
    position: absolute;
    top: 29px;
    left: -300px;
    display: none;
}
.subnav01 li, .subnav02 li {
    width: 150px;
    margin: 0;
    text-align: center;
    float: left;
}

.subnav01 li a, .subnav02 li a {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background: dodgerblue;
    height: 10px;
    display:block;
}

.subnav01 li a:hover, .subnav02 li a:hover {
    background: dimgray;
}

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

.active > a {
    background: dodgerblue !important;
}​

JS/jQuery/jQuery UI/

jQuery(document).ready(function($){
    $(".menuabout").on("click", function(){
        $(".subnav01").toggle ("slide", {direction: "right"}, "slow");
        $(this).toggleClass("active");
    });
    $(".menuproducts").on("click", function(){
        $(".subnav02").toggle ("slide", {direction: "right"}, "slow");
        $(this).toggleClass("active");
    });
});​

Upvotes: 2

Views: 2642

Answers (2)

roman
roman

Reputation: 117485

well you can try something like this. I've changed you class to menu for all menu elements, so you can use one function for all of them

JSFIDDLE

jQuery(document).ready(function($){
    $(".menu").on("click", function(){
        deactivateAll(this);
        toggle(this);
    });

    function deactivateAll(current) {
        $( "li" ).each(function( index, elem ){
            if (elem != current && $(elem).hasClass("active")) {
                toggle(elem);
            }
        });
    }

    function toggle(elem) {
        $(elem).find("ul").toggle ("slide", {direction: "right"}, "slow");
        $(elem).toggleClass("active");
    }
});​

Upvotes: 2

refugene
refugene

Reputation: 383

This works: (Fiddle)

jQuery(document).ready(function($){
    $(".menuabout").on("click", function(){
        reset();
        $(".subnav01").toggle ("slide", {direction: "right"}, "slow");
        $(this).toggleClass("active");
    });
    $(".menuproducts").on("click", function(){
        reset();
        $(".subnav02").toggle ("slide", {direction: "right"}, "slow");
        $(this).toggleClass("active");
    });
    function reset() {
        $("ul.nav li").removeClass("active");
        $("ul.nav li ul").hide();        
    }
});​

Also you could refactor your code a bit so that it doesn't repat so much. Adding more root navigation elements would mean copying your code every time :)

Upvotes: 1

Related Questions