CODEWITHSUNDEEP
javascripthtmlcssdrop-down-menu
Howard Hee
Howard Hee

Reputation: 929

CSS style not apply to second dropdown menu

I created 2 same dropdown menu in navigation bar. When point to main menu, the sub menu will auto display. And when scroll down, the background for sub menu will auto changed to white color. But it only affect in first sub menu, the sub menu for second main menu is not. I am calling same class, but why the css not apply to second sub menu? Below is my sample code.

/**
 * cbpAnimatedHeader.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
var cbpAnimatedHeader = (function () {

    var docElem = document.documentElement,
            header = document.querySelector('.navbar-default'),
            subheader = document.querySelector('.dropdown-menu'),
            didScroll = false,
            changeHeaderOn = 150;

    function init() {
        window.addEventListener('scroll', function (event) {
            if (!didScroll) {
                didScroll = true;
                setTimeout(scrollPage, 250);
            }
        }, false);
    }

    function scrollPage() {
        var sy = scrollY();
        if (sy >= changeHeaderOn) {
            classie.add(header, 'navbar-shrink');
            classie.add(subheader, 'navbar-shrink');
        } else {
            classie.remove(header, 'navbar-shrink');
            classie.remove(subheader, 'navbar-shrink');
        }
        didScroll = false;
    }

    function scrollY() {
        return window.pageYOffset || docElem.scrollTop;
    }

    init();

})();
<link href="https://dl.dropboxusercontent.com/u/50282572/bootstrap.min.css" rel="stylesheet"/>
<link href="https://dl.dropboxusercontent.com/u/50282572/style.css" rel="stylesheet"/>
<body id="index" class="index-page" style="height:1000px;">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container" style="" id="">
      <div class="collapse navbar-collapse" style="" id="bs-example-navbar-collapse-1">
        <ul class="nav nav-justified">
          <li class="hidden" id="">
            <a href="#page-top" class="" target="" data-value=""></a>
          </li>

          <li class="dropdown" id="listory">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
Menu 1
<i class="fa fa-angle-down"></i>
</a>
            <ul class="dropdown-menu">
              <li class=""><a href="index.php?page=story1" class="page-scroll" target="" data-value="">White Color When scroll</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
             Menu 2
              <i class="fa fa-angle-down"></i>
            </a>
            <ul class="dropdown-menu">
              <li class="" id=""><a href="logout.php" class="page-scroll" target="" data-value="">White Color When scroll</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div style="height:500px;background:blue;"></div>
<script src="http://demo.sc.chinaz.com/Files/DownLoad/moban/201511/moban810/js/jquery-2.1.1.js"></script>
<script src="http://demo.sc.chinaz.com/Files/DownLoad/moban/201511/moban810/js/bootstrap.min.js"></script>
<script src="http://demo.sc.chinaz.com/Files/DownLoad/moban/201511/moban810/js/classie.js"></script>
</body>

View in full page to see the navigation menu

Screenshot: enter image description here enter image description here

Upvotes: 1

Views: 332

Answers (3)

Howard Hee
Howard Hee

Reputation: 929

Finally I solved it by myself. Thanks @Johannes and @Aminesrine for the tips. Previous code unable to handle multiple element with same class name. I just changed the js as below by added loop to check, and it's worked.

var cbpAnimatedHeader = (function () {

var docElem = document.documentElement,
        header = document.querySelector('.navbar-default'),
        subheader = document.querySelectorAll('.dropdown-menu'),
        didScroll = false,
        changeHeaderOn = 150;

function init() {
    window.addEventListener('scroll', function (event) {
        if (!didScroll) {
            didScroll = true;
            setTimeout(scrollPage, 250);
        }
    }, false);
}

function scrollPage() {
    var sy = scrollY();
    if (sy >= changeHeaderOn) {
        classie.add(header, 'navbar-shrink');

        var i;
        for (i = 0; i < subheader.length; i++) {
            classie.add(subheader[i], 'navbar-shrink');
        }
    } else {
        classie.remove(header, 'navbar-shrink');

        var i;
        for (i = 0; i < subheader.length; i++) {
            classie.remove(subheader[i], 'navbar-shrink');
        }
    }
    didScroll = false;
}

function scrollY() {
    return window.pageYOffset || docElem.scrollTop;
}

init();

})();

Upvotes: 0

Aminesrine
Aminesrine

Reputation: 2140

This style

.navbar-default .nav-justified li {
background-color: rgba(255,255,255,0.5);
}

is applied correctly to the two sub-menu, just the first sub menu has an additional style:

@media (min-width: 768px)
.dropdown-menu.navbar-shrink {
background-color: #fff;
margin: 0;
}

if you delete the white background from this style you will notice that the 2 sub-menu will get the same style.
The first sub-menu ul has an an extra class navbar-shrink.

edit :

So you want navbar-shrink class to be added to 2 sub-menu, the problem is on the js code, you can replace

classie.add(header, 'navbar-shrink');

with

$('.dropdown-menu').addClass('navbar-shrink');

probably 

header = document.querySelector('.navbar-default');
classie.add(header, 'navbar-shrink');

is selecting only the first occurence of the class, and not all class occurences.

/**
 * cbpAnimatedHeader.js v1.0.0
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2013, Codrops
 * http://www.codrops.com
 */
var cbpAnimatedHeader = (function () {

    var docElem = document.documentElement,
            header = document.querySelector('.navbar-default'),
            subheader = document.querySelector('.dropdown-menu'),
            didScroll = false,
            changeHeaderOn = 150;

    function init() {
        window.addEventListener('scroll', function (event) {
            if (!didScroll) {
                didScroll = true;
                setTimeout(scrollPage, 250);
            }
        }, false);
    }

    function scrollPage() {
        var sy = scrollY();
        if (sy >= changeHeaderOn) {
            classie.add(header, 'navbar-shrink');
            $('.dropdown-menu').addClass('navbar-shrink');
        } else {
            classie.remove(header, 'navbar-shrink');
            classie.remove(subheader, 'navbar-shrink');
        }
        didScroll = false;
    }

    function scrollY() {
        return window.pageYOffset || docElem.scrollTop;
    }

    init();

})();
<link href="https://dl.dropboxusercontent.com/u/50282572/bootstrap.min.css" rel="stylesheet"/>
<link href="https://dl.dropboxusercontent.com/u/50282572/style.css" rel="stylesheet"/>
<body id="index" class="index-page" style="height:1000px;">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container" style="" id="">
      <div class="collapse navbar-collapse" style="" id="bs-example-navbar-collapse-1">
        <ul class="nav nav-justified">
          <li class="hidden" id="">
            <a href="#page-top" class="" target="" data-value=""></a>
          </li>

          <li class="dropdown" id="listory">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
Menu 1
<i class="fa fa-angle-down"></i>
</a>
            <ul class="dropdown-menu">
              <li class=""><a href="index.php?page=story1" class="page-scroll" target="" data-value="">White Color When scroll</a></li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
             Menu 2
              <i class="fa fa-angle-down"></i>
            </a>
            <ul class="dropdown-menu">
              <li class="" id=""><a href="logout.php" class="page-scroll" target="" data-value="">White Color When scroll</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div style="height:500px;background:blue;"></div>
<script src="http://demo.sc.chinaz.com/Files/DownLoad/moban/201511/moban810/js/jquery-2.1.1.js"></script>
<script src="http://demo.sc.chinaz.com/Files/DownLoad/moban/201511/moban810/js/bootstrap.min.js"></script>
<script src="http://demo.sc.chinaz.com/Files/DownLoad/moban/201511/moban810/js/classie.js"></script>
</body>

Upvotes: 1

Johannes
Johannes

Reputation: 67778

The javascript not adding class navbar-shrink to the second .dropdown-menu is definitely the reason.

If you can access and alter the script you quoted in the question, try to change this line 

subheader = document.querySelector('.dropdown-menu'),

to this:

subheader = document.getElementsByClassName('dropdown-menu'),

Upvotes: 1

Related Questions