Home>

I want to add id when the condition is met with javascript.

If the width of the window is 640 or less, I want to specify id for "span" of class name "nav-content", "header-logo-menu", "nav-drawer", "nav-open".

The final desired shape is a hamburger menu display when the window size is 640 or less, and a side-by-side menu display when the window size is 640 or more.
If only the "hamburger menu contents" part, it is side by side.
In the state described below, the "hamburger menu contents" do not enter the hamburger menu and the hamburger menu itself is not displayed.

CSS

# nav-drawer {
    position: relative;
  }
  .nav-unshown {
    display: none;
  }
  # nav-open {
    display: inline-block;
    width: 30px;
    height: 22px;
    vertical-align: middle;
  }
  # nav-open, # nav-open: before, # nav-open: after {
    position: absolute;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background: # 838383;
    display: block;
    content: '';
    cursor: pointer;
  }
  # nav-open: before {
    bottom: -8px;
  }
  # nav-open: after {
    bottom: -16px;
  }
  # nav-close {
    display: none;
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .3s ease-in-out;
  }
  # nav-content {
    overflow: auto;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;
    width: 50%;
    max-width: 330px;
    height: 100%;
    background: #fff;
    transition: .3s ease-in-out;
    -webkit-transform: translateX (105%);
    transform: translateX (105%);
  }
  # nav-input: checked ~ # nav-close {
    display: block;
    opacity: .5;
  }
  # nav-input: checked ~ # nav-content {
    -webkit-transform: translateX (0%);
    transform: translateX (0%);
    box-shadow: 6px 0 25px rgba (0,0,0, .15);
  }
  .header-logo-menu {
      display: flex;
      display: -moz-flex;
      display: -o-flex;
      display: -webkit-flex;
      display: -ms-flex;
      flex-direction: row;
      -moz-flex-direction: row;
      -o-flex-direction: row;
      -webkit-flex-direction: row;
      -ms-flex-direction: row;
      position: absolute;
      top: 35%;
      right: 5%;
  }
  .logo-erea {text-align: center;margin: auto;}

HTML


  
    <input type = "checkbox">
    <label for = "nav-input"><span></span></label>
    <label for = "nav-input"></label>
       
          
            <!-Hamburger menu contents->
          
      
  

javascript

$(function () {
        var w = $(window) .width ();
        var x = 640;
        if (w<x) {
            $(". nav-content"). attr ('id', 'nav-content');
            $(". nav-drawer"). attr ('id', 'nav-drawer');
            $(". nav-content"). attr ('id', 'nav-content');
            $(". nav-open span"). attr ('id', 'nav-open');
        }
    });

How can it work as expected?

I would appreciate any professor.

  • Answer # 1

      

    If the width of the window is 640 or less, I want to specify id for "span" of class name "nav-content", "header-logo-menu", "nav-drawer", "nav-open".

    In the first place, it isnotto changeiddynamically unless the element itself dynamically increases or decreases.

    If you only need to change the display with CSS, it is quickest to set CSS with media query and rewrite the display by width.

  • Answer # 2

    https://developer.mozilla.org/en/docs/Web/API/Element/id

    It's a matter of using media queries no matter what you think, and it's easy to find out how to set the id, but the question was left unanswered Just put a link.