CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user5552587
user5552587

Reputation:

sidebar disappear when window is at a certain width

i have created a site with a side bar. the sidebar has been made to change size as the window shrinks but there still isn't enough space on the page. so i have been looking around to find a way that i can have the side bar disappear when the screen is shrunk. there also needs to be a button that you can press to bring the sidebar back until your mouse isn't on that sidebar any more. i thought this is also good for mobile devices to. i have been looking for a while now but can't seem to get this right. the code is below could any body help :) 

body {
    margin: 0;
    background: -webkit-linear-gradient(left,  lightblue,#FFFF66, #FF3333 ); /* For Safari 5.1 to 6.0 */
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;

    position: fixed;
    height: 100%;
    overflow: auto;
    
}

li a {
    display: block;
    color: #000;
    padding: 8px 0 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
<ul>
  <li><a class="active" href="index.php">Home</a></li>
  <li><a href="messages/message.php">Messages</a></li>
  <li><a href="ask.php">ASK</a></li>
  <li><a href="cloud.php">Cloud Access</a></li>
   <li><a href="gallery.php">Gallery</a></li>
  <ul style="float:right;list-style-type:none;">
    <li><a href="#about">About</a></li>
    <li><a href="login.php">Login</a></li>
    
  </ul>
</ul>

at the moment it resizes but i need it to disappear at a certain width reappear back and when is under the width were you can't see it there needs to be a button to make it appear at the width most preferably the width that my code already says it to do. if you can't understand message i really hope i can complete this :)

Upvotes: 0

Views: 2266

Answers (2)

Head In Cloud
Head In Cloud

Reputation: 2051

You have to write a media query for specific size on which you want to hide your sidebar like Put id="toogleButton" on your button

#toogleButton {display:none} //first hide this button on other sizes

@media screen and (max-width: 768px) {
ul{display:none;}
#toogleButton {display:block} // Show this button on 768 size
}

In this case your sidebar will hide on 768px width

And you can toggle (hide or show) this sidebar 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#toogleButton").click(function(){
        $("ul").toggle();
    });
});
</script>

Upvotes: 1

GMchris
GMchris

Reputation: 5648

What you want to look into is media queries. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

They are used to modify your CSS based on some condition, for instance how wide your window is or even on what type of device you're browsing. To hide something under a certain width could look like this:

@media (max-width: 700px) {
  .ul {
    display: none;
  }
}

Upvotes: 0

Related Questions