メニューが表示されている間、ページの残りの部分に "オーバーレイ"効果を与える方法は？

Question

"Callapse"メニューを表示するナビゲーションバーを作成しました。 メニューが右から右に0.5sの遷移で表示されます メニューが表示されたときに画面の残りの部分に「オーバーレイ」効果を追加しました。

この「オーバーレイ」エフェクトを右から左に0.5秒間表示してメニューに参加させたいとします。

これを行う方法？ミリアンペアページデ

#navbar-collapse { 
    z-index: 1031; 
    position: fixed; 
    top: 0; 
    left: 0; 
    float: left; 
    width: 250px; 
    height: 100% !important; 
    border-right: 1px solid #000000; 
    border-top: 0; 
    background: #ffffff; 
    overflow-x: hidden; 
    transition: 0.5s; 
} 

#navbar-collapse::after { 
    z-index: 1029; 
    content: ""; 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.5); 
    left: 250px; 
    top: 0; 
    transition: 0.5s; 
} 

VoiciレmodèlesDrupalの8：

{# 
/** 
* @file 
* Default theme implementation to display a single page. 
* 
* The doctype, html, head and body tags are not in this template. Instead they 
* can be found in the html.html.twig template in this directory. 
* 
* Available variables: 
* 
* General utility variables: 
* - base_path: The base URL path of the Drupal installation. Will usually be 
* "/" unless you have installed Drupal in a sub-directory. 
* - is_front: A flag indicating if the current page is the front page. 
* - logged_in: A flag indicating if the user is registered and signed in. 
* - is_admin: A flag indicating if the user has permission to access 
* administration pages. 
* 
* Site identity: 
* - front_page: The URL of the front page. Use this instead of base_path when 
* linking to the front page. This includes the language domain or prefix. 
* 
* Navigation: 
* - breadcrumb: The breadcrumb trail for the current page. 
* 
* Page content (in order of occurrence in the default page.html.twig): 
* - title_prefix: Additional output populated by modules, intended to be 
* displayed in front of the main title tag that appears in the template. 
* - title: The page title, for use in the actual content. 
* - title_suffix: Additional output populated by modules, intended to be 
* displayed after the main title tag that appears in the template. 
* - messages: Status and error messages. Should be displayed prominently. 
* - tabs: Tabs linking to any sub-pages beneath the current page (e.g., the 
* view and edit tabs when displaying a node). 
* - action_links: Actions local to the page, such as "Add menu" on the menu 
* administration interface. 
* - node: Fully loaded node, if there is an automatically-loaded node 
* associated with the page and the node ID is the second argument in the 
* page's path (e.g. node/12345 and node/12345/revisions, but not 
* comment/reply/12345). 
* 
* Regions: 
* - page.header: Items for the header region. 
* - page.navigation: Items for the navigation region. 
* - page.navigation_collapsible: Items for the navigation (collapsible) region. 
* - page.highlighted: Items for the highlighted content region. 
* - page.help: Dynamic help text, mostly for admin pages. 
* - page.content: The main content of the current page. 
* - page.sidebar_first: Items for the first sidebar. 
* - page.sidebar_second: Items for the second sidebar. 
* - page.footer: Items for the footer region. 
* 
* @ingroup templates 
* 
* @see template_preprocess_page() 
* @see html.html.twig 
*/ 
#} 
{% set container = theme.settings.fluid_container ? 'container-fluid' : 'container' %} 
{# Navigation (collapsible) #} 
{% if page.navigation_collapsible %} 
    <div id="navbar-collapse" class="navbar-collapse collapse width"> 
    {{ page.navigation_collapsible }} 
    </div> 
{% endif %} 
{# Navbar #} 
{% if page.navigation or page.navigation_collapsible %} 
    {% block navbar %} 
    {% 
     set navbar_classes = [ 
     'navbar', 
     theme.settings.navbar_inverse ? 'navbar-inverse' : 'navbar-default', 
     theme.settings.navbar_position ? 'navbar-' ~ theme.settings.navbar_position|clean_class : container, 
     ] 
    %} 
    <header{{ navbar_attributes.addClass(navbar_classes) }} id="navbar" role="banner"> 
     {% if not navbar_attributes.hasClass(container) %} 
     <div class="{{ container }}"> 
     {% endif %} 
     <div class="navbar-header"> 
     {{ page.navigation }} 
     {# .btn-navbar is used as the toggle for collapsed navbar content #} 
     </div> 

     {% if not navbar_attributes.hasClass(container) %} 
     </div> 
     {% endif %} 
    </header> 
    {% endblock %} 
{% endif %} 

{# Main #} 
{% block main %} 
    <div role="main" class="main-container {{ container }} js-quickedit-main-content"> 
    <div class="row"> 

     {# Header #} 
     {% if page.header %} 
     {% block header %} 
      <div class="col-sm-12" role="heading"> 
      {{ page.header }} 
      </div> 
     {% endblock %} 
     {% endif %} 

     {# Sidebar First #} 
     {% if page.sidebar_first %} 
     {% block sidebar_first %} 
      <aside class="col-sm-3" role="complementary"> 
      {{ page.sidebar_first }} 
      </aside> 
     {% endblock %} 
     {% endif %} 

     {# Content #} 
     {% 
     set content_classes = [ 
      page.sidebar_first and page.sidebar_second ? 'col-sm-6', 
      page.sidebar_first and page.sidebar_second is empty ? 'col-md-9', 
      page.sidebar_second and page.sidebar_first is empty ? 'col-md-9', 
      page.sidebar_first is empty and page.sidebar_second is empty ? 'col-sm-12' 
     ] 
     %} 
     <section{{ content_attributes.addClass(content_classes) }}> 

     {# Highlighted #} 
     {% if page.highlighted %} 
      {% block highlighted %} 
      <div class="highlighted">{{ page.highlighted }}</div> 
      {% endblock %} 
     {% endif %} 

     {# Breadcrumbs #} 
     {% if breadcrumb %} 
      {% block breadcrumb %} 
      {{ breadcrumb }} 
      {% endblock %} 
     {% endif %} 

     {# Action Links #} 
     {% if action_links %} 
      {% block action_links %} 
      <ul class="action-links">{{ action_links }}</ul> 
      {% endblock %} 
     {% endif %} 

     {# Help #} 
     {% if page.help %} 
      {% block help %} 
      {{ page.help }} 
      {% endblock %} 
     {% endif %} 

     {# Content #} 
     {% block content %} 
      <a id="main-content"></a> 
      {{ page.content }} 
     {% endblock %} 
     </section> 

     {# Sidebar Second #} 
     {% if page.sidebar_second %} 
     {% block sidebar_second %} 
      <aside class="col-md-3" role="complementary"> 
      {{ page.sidebar_second }} 
      </aside> 
     {% endblock %} 
     {% endif %} 
    </div> 
    </div> 
{% endblock %} 

{% if page.footer %} 
    {% block footer %} 
    <footer class="footer {{ container }}" role="contentinfo"> 
     {{ page.footer }} 
    </footer> 
    {% endblock %} 
{% endif %} 

Answer 1

あなたはちょうどそれがスライディングているようにそれが見えるようになります0％から100％までwidthを増やすことができます。また、擬似要素を配置します。それは右からスライドする側の右側にあります。ここで

は、私は*説明するソリューションのデモンストレーションです：

* jQueryのは、ときに何かが_c​​hanges_、右だけ

$('#navbar-collapse').click(function() { 
 
    $('#navbar-collapse').toggleClass('changed'); 
 
})

#navbar-collapse { 
 
    color: #ffffff; 
 
    font-family: sans-serif; 
 
    z-index: 1030; 
 
    position: static; 
 
} 
 

 
#navbar-collapse.changed:after { 
 
    width: 100%; 
 
} 
 

 
#navbar-collapse:after { 
 
    z-index: -1; 
 
    content: ""; 
 
    display: block; 
 
    position: fixed; 
 
    width: 0%; 
 
    height: 100%; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    right: 0px; 
 
    top: 0; 
 
    transition: 0.5s; 
 
} 
 

 
body { 
 
    background: red; 
 
    display: block; 
 
    margin: 0; 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="navbar-collapse"> 
 
    Click me! 
 
</div>