CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Brk
Brk

Reputation: 1297

Hidden right sidebar using position only

Hi I have build 2 sidebars. One left sidebar which is hidden by offsetting the element off the screen and giving him negative values for left attribute. The right side menu in the other hand, doesn't disappear correctly and I can still scroll over horizontally and see this menu. How can I hide the right sidebar without using display:none or visibility:hidden. I am adding the code.

   $(function () {
        $("#arrow_btn").click(function () {
            $("#navbar, .upper_menu").toggleClass('active');
            $("#upper_left_menu").toggleClass('open_left_menu');
            console.log("look for arrow btn element");
            console.log("upper_left_menu", $("#upper_left_menu"));
            console.log('$("#navbar")', $("#navbar"));
        });

        $(".project_item").click(function (event) {
            var list = $(this).siblings();
            var i = $(this).find('i');
            $(list).toggleClass('closed_nested_list');
            if ($(i).hasClass('fa-plus')) {
                $(i).removeClass('fa-plus');
                $(i).addClass('fa-minus');
            } else {
                $(i).addClass('fa-plus');
                $(i).removeClass('fa-minus');
            }
            console.log('traverse over all project items');
            console.log('i', i);
            console.log('list', list);
        });
     
        $("#email").click(function(){
          console.log("you clicked email ya ya ");
          $("#right-navbar").css("display",'inline-block');
          $("#right-navbar, .upper_menu").toggleClass('active');
            $("#upper_right_menu").toggleClass('open_right_menu');
        });
     
     $(".list_item").click(function(){
       console.log('you clicked list item');
       $("#chatWrapper").toggleClass('active');
$("#right-navbar").toggleClass('aside');
       $("#upper_right_menu").toggleClass('aside_right_menu');
     });
        
    });
#arrow_btn{
        font-size: 30px;
        font-weight:normal;
    }

    #arrow_btn:hover{
        color: #3983C4;
    }

    .upper_menu {     
        display: block;
        background-color: #F2F6F7;
        width: 100%;
        top: 0;
        right: 0;
    }
    #upper_left_menu {
        width: 30px;
        height: 30px;
        z-index: 1;
        -webkit-transition: all 600ms ease;
        -moz-transition: all 600ms ease;
        -ms-transition: all 600ms ease;
        -o-transition: all 600ms ease;
        transition: all 600ms ease;
    }

#upper_right_menu{
        z-index: 1;
        -webkit-transition: all 600ms ease;
        -moz-transition: all 600ms ease;
        -ms-transition: all 600ms ease;
        -o-transition: all 600ms ease;
        transition: all 600ms ease;
}

    .open_left_menu {
        margin-left: 223px;
      
    }

 .open_right_menu {
        margin-right: 223px;
   -webkit-transition: all 600ms ease;
        -moz-transition: all 600ms ease;
        -ms-transition: all 600ms ease;
        -o-transition: all 600ms ease;
        transition: all 600ms ease;
    }
.aside_right_menu{
  margin-right: 43.5%;
}
    #upper_right_menu {
        position: absolute;
        top: 0px;
        right: 0px;
    }

    #exclamation-triangle,
    #envelope {
        font-size: 24px;
    }

    .warning,
    .email {
        margin: 10px;
    }
    
 #navbar {
        position: absolute;
        left: -16em;
        top: 0;
        bottom: 0;
        background-color: white;
        box-shadow: 4px 0 5px rgba(0, 0, 0, 0.2);
        z-index: 1;
        cursor: pointer;
        animation: 10s;
        overflow-y: auto;
        overflow-x: hidden;
    }

    #navbar ul {
        width: 224px;
        list-style-type: none;
        margin: 0;
        padding: 1em;
    }

#right-navbar{
  
  position: absolute;
        right: -16em;
        top: 0;
        bottom: 0;
        background-color: white;
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
        z-index: 1;
        cursor: pointer;
        animation: 10s;
        overflow-y: auto;
        overflow-x: hidden;
}

#chatWrapper{
  display:none;
  position: absolute;
        right: -32em;
        top: 0;
        bottom: 0;
        width:338.667px;
        background-color: white;
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
        z-index: 1;
        cursor: pointer;
        animation: 10s;
        overflow-y: auto;
        overflow-x: hidden;
}

#right-navbar ul {
        width: 224px;
        list-style-type: none;
        margin: 0;
        padding: 1em;
    }
/* hovering */
    #chatWrapper,
    #chatWrapper *
    #right-navbar,
    #right-navbar *,
    #navbar,
    #navbar * {
        -webkit-transition: all 600ms ease;
        -moz-transition: all 600ms ease;
        -ms-transition: all 600ms ease;
        -o-transition: all 600ms ease;
        transition: all 600ms ease;
    }

    #navbar.active {
        left: 0px;
    }

  #right-navbar.active{
      right: 0px;
    -webkit-transition: all 600ms ease;
        -moz-transition: all 600ms ease;
        -ms-transition: all 600ms ease;
        -o-transition: all 600ms ease;
        transition: all 600ms ease;
  }
 #right-navbar.aside{
      right: 26.5%;
  }
#chatWrapper.active{
  right:0%;
}

    .nested_list {
        display: inline-block;
        visibility: visible;
    }

    .closed_nested_list {
        display: none;
    }

    .project_item {
        font-family: 'Segue UI', Calibri, arial, verdana, sans-serif;
        font-size: 18px;
    }
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav class="upper_menu">
    <div id="upper_left_menu">
        <span id="arrow_btn"  class="glyphicon glyphicon-play-circle"></span>
    </div>
    <div id="upper_right_menu">
        <a href="#" class="warning"><i id="exclamation-triangle" class=" fa fa-exclamation-triangle"></i><span id="exclamation_notifications_count">2</span></a>
        <a href="#" id="email" class="email"><i id="envelope" class=" fa fa-envelope-o"></i><span id="email_notifications_count">5</span></a>
    </div>
</nav>
<nav id="navbar">
    <ul>
        <li class="project_container">
            <span class="project_item" >
                <i class="fa fa-plus"></i>  
                FDR Project
            </span>
            <ul id="listOne" class="nested_list closed_nested_list">
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit01</li>
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit02</li>
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit03</li>
            </ul>
        </li>
        <li class="project_container">
            <span class="project_item" href="#"><i class="fa fa-plus"></i>  Niagara Project</span>
            <ul id="listTwo" class="nested_list closed_nested_list">
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit01</li>
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit02</li>
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit03</li>
            </ul>
        </li>
        <li class="project_container">
            <span class="project_item" href="#"><i class="fa fa-plus"></i>  Jarvis Plant</span>
            <ul id="listThree" class="nested_list closed_nested_list">
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit01</li>
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit02</li>
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit03</li>
            </ul>
        </li>
        <li class="project_container">
            <span class="project_item" href="#"><i class="fa fa-plus"></i>  Jarvis Plant</span>
            <ul id="listFour" class="nested_list closed_nested_list">
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit01</li>
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit02</li>
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit03</li>
            </ul>
        </li>
    </ul>
</nav>

<nav id="right-navbar">
    <ul>
        <li class="project_container">
            <span class="project_item" >
                <i class="fa fa-plus"></i>  
                FDR Project
            </span>
            <ul id="listOne" class="nested_list closed_nested_list">
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit01</li>
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit02</li>
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit03</li>
            </ul>
        </li>
        <li class="project_container">
            <span class="project_item" href="#"><i class="fa fa-plus"></i>  Niagara Project</span>
            <ul id="listTwo" class="nested_list closed_nested_list">
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit01</li>
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit02</li>
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit03</li>
            </ul>
        </li>
        <li class="project_container">
            <span class="project_item" href="#"><i class="fa fa-plus"></i>  Jarvis Plant</span>
            <ul id="listThree" class="nested_list closed_nested_list">
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit01</li>
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit02</li>
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit03</li>
            </ul>
        </li>
        <li class="project_container">
            <span class="project_item" href="#"><i class="fa fa-plus"></i>  Jarvis Plant</span>
            <ul id="listFour" class="nested_list closed_nested_list">
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit01</li>
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit02</li>
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit03</li>
            </ul>
        </li>
    </ul>
</nav>

<nav id="chatWrapper">
  Hello Chat Warpper
</nav>

A small piece of the original code without the left menu and only the right menu

   $(function () {
     
        $("#email").click(function(){
          console.log("you clicked email ya ya ");
          $("#right-navbar").css("display",'inline-block');
          $("#right-navbar, .upper_menu").toggleClass('active');
            $("#upper_right_menu").toggleClass('open_right_menu');
        });
     
     $(".list_item").click(function(){
       console.log('you clicked list item');
       $("#chatWrapper").toggleClass('active');
$("#right-navbar").toggleClass('aside');
       $("#upper_right_menu").toggleClass('aside_right_menu');
     });
        
    });
#arrow_btn{
        font-size: 30px;
        font-weight:normal;
    }

    #arrow_btn:hover{
        color: #3983C4;
    }

    .upper_menu {     
        display: block;
        background-color: #F2F6F7;
        width: 100%;
        top: 0;
        right: 0;
    }

#upper_right_menu{
        z-index: 1;
        -webkit-transition: all 600ms ease;
        -moz-transition: all 600ms ease;
        -ms-transition: all 600ms ease;
        -o-transition: all 600ms ease;
        transition: all 600ms ease;
}

    .open_left_menu {
        margin-left: 223px;
      
    }

 .open_right_menu {
        margin-right: 223px;
   -webkit-transition: all 600ms ease;
        -moz-transition: all 600ms ease;
        -ms-transition: all 600ms ease;
        -o-transition: all 600ms ease;
        transition: all 600ms ease;
    }
.aside_right_menu{
  margin-right: 43.5%;
}
    #upper_right_menu {
        position: absolute;
        top: 0px;
        right: 0px;
    }

    #exclamation-triangle,
    #envelope {
        font-size: 24px;
    }

    .warning,
    .email {
        margin: 10px;
    }
    
#right-navbar{
  
  position: absolute;
        right: -16em;
        top: 0;
        bottom: 0;
        background-color: white;
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
        z-index: 1;
        cursor: pointer;
        animation: 10s;
        overflow-y: auto;
        overflow-x: hidden;
}

#chatWrapper{
  display:none;
  position: absolute;
        right: -32em;
        top: 0;
        bottom: 0;
        width:338.667px;
        background-color: white;
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
        z-index: 1;
        cursor: pointer;
        animation: 10s;
        overflow-y: auto;
        overflow-x: hidden;
}

#right-navbar ul {
        width: 224px;
        list-style-type: none;
        margin: 0;
        padding: 1em;
    }
/* hovering */
    #chatWrapper,
    #chatWrapper *
    #right-navbar,
    #right-navbar * {
        -webkit-transition: all 600ms ease;
        -moz-transition: all 600ms ease;
        -ms-transition: all 600ms ease;
        -o-transition: all 600ms ease;
        transition: all 600ms ease;
    }

    #navbar.active {
        left: 0px;
    }

  #right-navbar.active{
      right: 0px;
    -webkit-transition: all 600ms ease;
        -moz-transition: all 600ms ease;
        -ms-transition: all 600ms ease;
        -o-transition: all 600ms ease;
        transition: all 600ms ease;
  }
 #right-navbar.aside{
      right: 26.5%;
  }
#chatWrapper.active{
  right:0%;
}

    .nested_list {
        display: inline-block;
        visibility: visible;
    }

    .closed_nested_list {
        display: none;
    }

    .project_item {
        font-family: 'Segue UI', Calibri, arial, verdana, sans-serif;
        font-size: 18px;
    }
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="upper_menu">
    <div id="upper_left_menu">
        <span id="arrow_btn"  class="glyphicon glyphicon-play-circle"></span>
    </div>
    <div id="upper_right_menu">
        <a href="#" class="warning"><i id="exclamation-triangle" class=" fa fa-exclamation-triangle"></i><span id="exclamation_notifications_count">2</span></a>
        <a href="#" id="email" class="email"><i id="envelope" class=" fa fa-envelope-o"></i><span id="email_notifications_count">5</span></a>
    </div>
</nav>
<nav id="right-navbar">
    <ul>
        <li class="project_container">
            <span class="project_item" >
                <i class="fa fa-plus"></i>  
                FDR Project
            </span>
            <ul id="listOne" class="nested_list closed_nested_list">
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit01</li>
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit02</li>
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit03</li>
            </ul>
        </li>
        <li class="project_container">
            <span class="project_item" href="#"><i class="fa fa-plus"></i>  Niagara Project</span>
            <ul id="listTwo" class="nested_list closed_nested_list">
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit01</li>
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit02</li>
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit03</li>
            </ul>
        </li>
        <li class="project_container">
            <span class="project_item" href="#"><i class="fa fa-plus"></i>  Jarvis Plant</span>
            <ul id="listThree" class="nested_list closed_nested_list">
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit01</li>
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit02</li>
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit03</li>
            </ul>
        </li>
        <li class="project_container">
            <span class="project_item" href="#"><i class="fa fa-plus"></i>  Jarvis Plant</span>
            <ul id="listFour" class="nested_list closed_nested_list">
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit01</li>
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit02</li>
                <li class="list_item"><img height="24" width="24" src="http://i65.tinypic.com/2ev4vmw.png" />     Unit03</li>
            </ul>
        </li>
    </ul>
</nav>
<nav id="chatWrapper">
  Hello Chat Warpper
</nav>

Upvotes: 1

Views: 90

Answers (1)

Mike B.
Mike B.

Reputation: 1502

Moving answer from comments...

Add overflow-x: hidden; to the nav bar's parent element (in this example, the parent would be body).

This will keep the horizontal scroll bar from coming up when the nav bar moves off the right side of the screen.

Upvotes: 1

Related Questions