CODEWITHSUNDEEP
javascriptjquerycss
Andrew
Andrew

Reputation: 21

Adding opacity layer to a HTML section with sidebar.js / jQuery

I am using Sidebar.js and would like to add an CSS opacity setting to the main container section when the sidebar is revealed. (Similar to hypebeast.com when you click the three bar icon).

I not sure whether to add an overlay div and then hide/show it with jQuery or whether a function can be added to the sidebar js to do it (this seems the way to go).

I would like to control the opacity with CSS but if it's in the js then that's fine as well.

Any help welcomed.

My html:

<div class="wrapper jsc-sidebar-content jsc-sidebar-pulled">
    <nav>
        <a href="#" class="fa fa-bars jsc-sidebar-trigger"></a>
    </nav>
    <section>
        <!--content with opacity on clicking above nav-->           
    </section>
</div>
<nav class="sidebar jsc-sidebar" id="jsi-nav">
    <!-- nav bar content -->
</nav>

Side bar js and jquery

<script src="js/lib/jquery.min.js"></script>
<script src="js/sidebar.js"></script>
<script>
        $('#jsi-nav').sidebar({
            trigger: '.jsc-sidebar-trigger',
            scrollbarDisplay: true,
            pullCb: function () { console.log('pull'); },
            pushCb: function () { console.log('push'); }
        });

        $('#api-pull').on('click', function (e) {
            e.preventDefault();
            $('#jsi-nav').data('sidebar').push();
        });
        $('#api-push').on('click', function (e) {
            e.preventDefault();
            $('#jsi-nav').data('sidebar').pull();
        });

    </script>

Upvotes: 0

Views: 954

Answers (1)

Vitorino fernandes
Vitorino fernandes

Reputation: 15971

demo - http://jsfiddle.net/victor_007/79sb2rq9/

add and remove class for wrapper and using pseudo add a overlay

.wrapper.overlay {
    position:relative;
}
.wrapper.overlay:before {
    content:'';
    background:black;
    opacity:.5;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    z-index:1;
}

Upvotes: 1

Related Questions