0

** like this reference website https://www.colorland.com/uk/ when we click on menu its showing shadow background black on body. i have tried with custom JavaScript i have applied custom JavaScript for call class with body but its not working if someone have related to my requirement please share.**

** please check code of my navigation **

<nav id="advancemenu" class="navigation advance-megamenu desktop-menu page-header" >

    <ul id="desktopmenu" class="advance-menu">

        <?php if($Homelink){ ?>

        <li class="level0 nav-0 level-top"><a href="<?php echo $this->getUrl('') ?>" class="level-top ui-corner-all"><span>Home</span></a></li>

        <?php } ?>

        <?php /* @escapeNotVerified */ echo $_menu; ?>

        <?php 

        if($customMenuStatus){

            $customMenuName = $_menuhelper->getCustomBlockName();

            $customMenuId = $_menuhelper->getCustomBlockId();   

            $customMenuUrl = $_menuhelper->getCustomBlockUrl(); 

        ?>

            <li class="level0 nav-custom level-top"><a href="<?php echo $customMenuUrl; ?>" class="level-top ui-corner-all"><span><?php echo $customMenuName; ?></span></a>

            <?php   if($customMenuId) { ?>

                <div class="popup-menu popup-custom">

                <div class="popup-menu-inner popup-category-custom">

                <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId($customMenuId)->toHtml(); ?>

                </div>

                </div>

            <?php } ?>

            </li>

        <?php } ?>

    </ul>

<?php  } else {  ?>

<nav class="navigation" >

    <ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>

        <?php /* @escapeNotVerified */ echo $_menu; ?>

    </ul>

<?php } ?>



    <ul id="mobilemenu" data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>

        <?php /* @escapeNotVerified */ echo $_menu; ?>

    </ul>
<div id="darkness"></div>
</nav>```

  • <style> ul.advance-menu { position: relative; z-index: 10; } ul.advance-menu li { background: #fff; } #darkness { background: rgba(0, 0, 0, 0.5); display: none; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 5; } </style> – zeshan rahman Jan 31 at 13:10
  • <script> $('ul.advance-menu').hover(function() { $('#darkness').fadeTo(200, 1); }, function() { $('#darkness').fadeTo(200, 0, function() { $(this).hide(); }); }); </script> – zeshan rahman Jan 31 at 13:11
  • please check my CSS and JS its not working – zeshan rahman Jan 31 at 13:14
0

Try this,

HTML:

<div class="page-overlay"></div>


STYLE:

<style>
    .page-overlay {
        display: none;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: black;
        opacity: .5;
        z-index: 90;
    }
</style>


SCRIPT:

<script>
    $('.menu-item').click(function(){
        $('.page-overlay').toggle();
    });
</script>
| improve this answer | |
0

The site is using fadeout. I would do this as a ui component but I am just going to keep it basic.

Generically you can add the less to app/design/frontend/{company}/{theme}/web/css/_custom.less

.page-overlay {
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: black;
    opacity: .5;
    z-index: 90;
}

I would add the rest to Magento Theme so you can also add the less to app/design/frontend/{company}/{theme}/Magento_Theme/web/css/source/_extend.less`

Add the html to app/design/frontend/{company}/{theme}/Magento_Theme/templates/html/overlay.phtml

<div id="page-overlay"></div>
<script>
  require([
    'jquery'
  ], function ($) {
    $('.menu-item')
      .click(function () {
        $('#page-overlay')
          .fadeToggle('fast');
      });
  })
</script>

Now create a layout in app/design/frontend/{company}/{theme}/Magento_Theme/layout/default.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="after.body.start">
            <block name="overlay" class="Magento\Framework\View\Element\Template" template="Magento_Theme::html/overlay.phtml" before="-"/>
        </referenceContainer>
    </body>
</page>

Update: Ok let's just extend menu.js app/design/frontend/{company}/{theme}/requirejs-config.js

var config = {
  "map": {
    "*": {
      "menu": "js/menu-custom"
    }
  }
};

app/design/frontend/{company}/{theme}/Magento_Theme/templates/html/overlay.phtml

<div id="page-overlay"></div>

Extend the function adding in fade in and fade out calls app/design/frontend/{company}/{theme}/web/js/custom-menu.js

    define([
    'jquery',
    'jquery/ui',
    'mage/menu'],

      function($) {
        $.widget('custom.menu', $.mage.menu, {

        /**
         * @private
         */
        _toggleDesktopMode: function () {
          var categoryParent,
            html;

          this._on({
            /**
             * Prevent focus from sticking to links inside menu after clicking
             * them (focus should always stay on UL during navigation).
             */
            'mousedown .ui-menu-item > a': function (event) {
              event.preventDefault();
            },

            /**
             * Prevent focus from sticking to links inside menu after clicking
             * them (focus should always stay on UL during navigation).
             */
            'click .ui-state-disabled > a': function (event) {
              event.preventDefault();
            },

            /**
             * @param {jQuer.Event} event
             */
            'click .ui-menu-item:has(a)': function (event) {
              var target = $(event.target)
                .closest('.ui-menu-item');

              if (!this.mouseHandled && target.not('.ui-state-disabled').length) {
                this.select(event);

                // Only set the mouseHandled flag if the event will bubble, see #9469.
                if (!event.isPropagationStopped()) {
                  this.mouseHandled = true;
                }

                // Open submenu on click
                if (target.has('.ui-menu').length) {
                  this.expand(event);
                } else if (!this.element.is(':focus') &&
                  $(this.document[0].activeElement)
                    .closest('.ui-menu').length
                ) {
                  // Redirect focus to the menu
                  this.element.trigger('focus', [true]);

                  // If the active item is on the top level, let it stay active.
                  // Otherwise, blur the active item since it is no longer visible.
                  if (this.active && this.active.parents('.ui-menu').length === 1) { //eslint-disable-line
                    clearTimeout(this.timer);
                  }
                }
              }
            },

            /**
             * @param {jQuery.Event} event
             */
            'mouseenter .ui-menu-item': function (event) {
              var target = $(event.currentTarget),
                submenu = this.options.menus,
                ulElement,
                ulElementWidth,
                width,
                targetPageX,
                rightBound;

              if (target.has(submenu)) {
                ulElement = target.find(submenu);
                ulElementWidth = ulElement.outerWidth(true);
                width = target.outerWidth() * 2;
                targetPageX = target.offset().left;
                rightBound = $(window)
                  .width();
                $('#page-overlay')
                  .fadeIn();

                if (ulElementWidth + width + targetPageX > rightBound) {
                  ulElement.addClass('submenu-reverse');
                }

                if (targetPageX - ulElementWidth < 0) {
                  ulElement.removeClass('submenu-reverse');
                }
              }

              // Remove ui-state-active class from siblings of the newly focused menu item
              // to avoid a jump caused by adjacent elements both having a class with a border
              target.siblings()
                .children('.ui-state-active')
                .removeClass('ui-state-active');
              this.focus(event, target);
            },

            /**
             * @param {jQuery.Event} event
             */
            'mouseleave': function (event) {
              this.collapseAll(event, true);
              var target = $(event.currentTarget),
                submenu = this.options.menus;
              if (target.has(submenu)) {
                $('#page-overlay')
                  .fadeOut();
              }
            },

            /**
             * Mouse leave.
             */
            'mouseleave .ui-menu': 'collapseAll'
          });

          categoryParent = this.element.find('.all-category');
          html = $('html');

          categoryParent.remove();

          if (html.hasClass('nav-open')) {
            html.removeClass('nav-open');
            setTimeout(function () {
              html.removeClass('nav-before-open');
            }, this.options.hideDelay);
          }
        },
      }
    )
  }
)
| improve this answer | |
  • I did this based off the linked site. If there is any real interest in this ticket. I will change this to extend the nav js component and show the overlay if the nav is open. – user3685048 Jan 30 at 22:04
  • above script is not wokring – zeshan rahman Jan 30 at 22:20
  • It depends how your menu is being used. If you have hover and not click then this will not work but this is how the one from your site worked. If it is click try .nav-item or what ever your top level menu item is called. – user3685048 Jan 31 at 6:28
  • took one last try at it – user3685048 Jan 31 at 7:17
  • i am using hover menu – zeshan rahman Jan 31 at 10:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.