Photoshop Question posted in
The official user guide can be found here.

how to change the background colour of entire body except a sidebar div – Photoshop

How can I overlay and dim screen, after click on a menu button?

<ul id="gn-menu" class="gn-menu-main">
                <li class="gn-trigger">
                    <a class="gn-icon gn-icon-menu"><span>Menu</span></a>
                    <nav class="gn-menu-wrapper">
                        <div class="gn-scroller">
                            <ul class="gn-menu">
                                <li class="gn-search-item">
                                    <input placeholder="Search" type="search" class="gn-search">
                                    <a class="gn-icon gn-icon-search"><span>Search</span></a>
                                </li>
                                <li>
                                    <a class="gn-icon gn-icon-download">Downloads</a>
                                    <ul class="gn-submenu">
                                        <li><a class="gn-icon gn-icon-illustrator">Vector Illustrations</a></li>
                                        <li><a class="gn-icon gn-icon-photoshop">Photoshop files</a></li>
                                    </ul>
                                </li>
                                <li><a class="gn-icon gn-icon-cog">Settings</a></li>
                                <li><a class="gn-icon gn-icon-help">Help</a></li>
                                <li>
                                    <a class="gn-icon gn-icon-archive">Archives</a>
                                    <ul class="gn-submenu">
                                        <li><a class="gn-icon gn-icon-article">Articles</a></li>
                                        <li><a class="gn-icon gn-icon-pictures">Images</a></li>
                                        <li><a class="gn-icon gn-icon-videos">Videos</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div><!-- /gn-scroller -->
                    </nav>
                </li>
                <li><a href="http://tympanus.net/codrops">Codrops</a></li>
                <li><a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Development/HeaderEffects/"><span>Previous Demo</span></a></li>
                <li><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=16030"><span>Back to the Codrops Article</span></a></li>
            </ul>

User clicks on here(a button)
enter image description here

Sidebar opens on right( here I wanted to make the entire screen with background-color: rgba(0, 0, 0, .9); except right sidebar)

enter image description here

Any tips or help will be highly appropriated, ui kind of work is very complex in my scenario, i am Java developer, creating my personal site.. i have learnt css & jquery too as beginner.

Tags:

2

Answers


  1. 0

    One way is to use box-shadow: inset -9999px 0 0 0 rgba(0, 0, 0, 0.25); on the header element.

    Another way is to change the background-color of the header element.

    The last way is to use a huge div that covers over the page. Set the menu to have a higher z-index than the huge div.

    These styles should be applied to the huge div:

    z-index: 100;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;

    And these styles to the Nexus Menu:

    z-index: 1000;
position: /* Anything but static */
    Login or Signup to reply.
  2. 0

    Try loading , utilizing jQuery 

    $(function() {
  // create toggle flag
  var clicked = false;
  // cache `header` `css`
  var bg = $("header").css(["background", "opacity", "width"]);
  $("a.gn-icon").on("click", function() {
    if (clicked === false) {
      // set dimmed screen
      $("header").css({"background": "rgba(0, 0, 0, .9)"
                      , "opacity":"0.25"
                        // `355`: `.gn-menu` `width`
                      , "width":window.innerWidth - 355
                      , "float":"right"});
      // reset `clicked` flag
      clicked = true;
    } else {
      // reset `header` `css` to initial
      $("header").css(bg);
      // reset `clicked` flag
      clicked = false;
    }
  });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search