How to make sidebar css

How TO — Responsive Sidebar

Learn how to create a responsive side navigation menu with CSS.

Create a Responsive Sidebar

Step 1) Add HTML:

Example

Step 2) Add CSS:

Example

/* The side navigation menu */
.sidebar margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
>

/* Sidebar links */
.sidebar a display: block;
color: black;
padding: 16px;
text-decoration: none;
>

/* Active/current link */
.sidebar a.active background-color: #04AA6D;
color: white;
>

/* Links on mouse-over */
.sidebar a:hover:not(.active) background-color: #555;
color: white;
>

/* Page content. The value of the margin-left property should match the value of the sidebar’s width property */
div.content margin-left: 200px;
padding: 1px 16px;
height: 1000px;
>

/* On screens that are less than 700px wide, make the sidebar into a topbar */
@media screen and (max-width: 700px) .sidebar width: 100%;
height: auto;
position: relative;
>
.sidebar a
div.content
>

/* On screens that are less than 400px, display the bar vertically, instead of horizontally */
@media screen and (max-width: 400px) .sidebar a text-align: center;
float: none;
>
>

Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars.

Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.

Источник

Sidebar Menu Using HTML and CSS

To create this you need to create an HTML and CSS file. Then copy the structure below and paste it into the HTML file. In the HTML structure below I have put all the information where you will add the required code. Follow this tutorial and add the code according to the information below.

  lang="en">  rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">  charset="UTF-8">  http-equiv="X-UA-Compatible" content="IE=edge">  name="viewport" content="width=device-width, initial-scale=1.0"> Document   class="wrapper">  class="sidebar">   

Step 2: Design the background using css code

With that I added some basic CSS code that basically designed the background and gave the sidebar a shape. In this case I have used blue color in the background. You can change this color if you want.

 @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); * list-style: none; text-decoration: none; margin: 0; padding: 0; box-sizing: border-box; font-family: 'Open Sans', sans-serif; > body background: #f5f6fa; > .wrapper .sidebar background: rgb(5, 68, 104); position: fixed; top: 0; left: 0; width: 225px; height: 100%; padding: 20px 0; transition: all 0.5s ease; > 

Step 3: Add profile images and titles

As you can see in the demo above, first of all here I used a profile image, a title and some description. I have used the following HTML and CSS programming code to make it. In this case, you can change the profile image to your liking and increase or decrease the size of this image if you want. In this case I used height 100px and width 100px . Here I have used border-radius 50% in the profile image which makes this image look completely round. You can change this percentage if you want to keep it square or other size.

  class="profile">  src="https://1.bp.blogspot.com/-vhmWFWO2r8U/YLjr2A57toI/AAAAAAAACO4/0GBonlEZPmAiQW4uvkCTm5LvlJVd_-l_wCNcBGAsYHQ/s16000/team-1-2.jpg" alt="profile_picture"> Anamika Roy Designer  

.wrapper .sidebar .profile margin-bottom: 30px; text-align: center; > .wrapper .sidebar .profile img display: block; width: 100px; height: 100px; border-radius: 50%; margin: 0 auto; > .wrapper .sidebar .profile h3 color: #ffffff; margin: 10px 0 5px; > .wrapper .sidebar .profile p color: rgb(206, 240, 253); font-size: 14px; > 

Step 4: Add menu items in the sidebar

In this case I have used eight menu items . I have used an icon with each menu to make the menu items more beautiful and attractive. You can change those icons and menu items as you wish.

   href="#" class="active">  class="icon"> class="fas fa-home">  class="item">Home    href="#">  class="icon"> class="fas fa-desktop">  class="item">My Dashboard    href="#">  class="icon"> class="fas fa-user-friends">  class="item">People    href="#">  class="icon"> class="fas fa-tachometer-alt">  class="item">Perfomance    href="#">  class="icon"> class="fas fa-database">  class="item">Development    href="#">  class="icon"> class="fas fa-chart-line">  class="item">Reports    href="#">  class="icon"> class="fas fa-user-shield">  class="item">Admin    href="#">  class="icon"> class="fas fa-cog">  class="item">Settings     

Step 5: Design menu items with css code

The following codes are the CSS programming codes that were originally used to design and add colors to the menu items added above. In this case I have used white color between the icons and the text which looks much more interesting on a blue background. You can see below that I have added the effect of hover. When you hover your mouse over or click on that menu, the background will change as you saw in the demo above.

.wrapper .sidebar ul li a display: block; padding: 13px 30px; border-bottom: 1px solid #10558d; color: rgb(241, 237, 237); font-size: 16px; position: relative; > .wrapper .sidebar ul li a .icon color: #dee4ec; width: 30px; display: inline-block; > 

.wrapper .sidebar ul li a:hover, .wrapper .sidebar ul li a.active color: #0c7db1; background:white; border-right: 2px solid rgb(5, 68, 104); > .wrapper .sidebar ul li a:hover .icon, .wrapper .sidebar ul li a.active .icon color: #0c7db1; > .wrapper .sidebar ul li a:hover:before, .wrapper .sidebar ul li a.active:before display: block; > 

Step 6: Create navigation bar

In this case I used a navigation bar but I did not use any link in the navigation bar. In this case I have added a menu button which when clicked will hide the whole menu and when clicked again the menu will appear. The following HTML and CSS programming codes have been used to create and design this menu bar.

 class="section">  class="top_navbar">  class="hamburger">  href="#">  class="fas fa-bars">     

.wrapper .section width: calc(100% - 225px); margin-left: 225px; transition: all 0.5s ease; > .wrapper .section .top_navbar background: rgb(7, 105, 185); height: 50px; display: flex; align-items: center; padding: 0 30px; > .wrapper .section .top_navbar .hamburger a font-size: 28px; color: #f4fbff; > .wrapper .section .top_navbar .hamburger a:hover color: #a2ecff; > 

The following CSS codes basically indicate the exact position of the sidebar when this menu button is activated. This means that when you click on the menu button, the entire side will be hidden. Below I have indicated that when that menu button is clicked, the side will move 225 to the left , that is, it will be completely hidden.

 body.active .wrapper .sidebar left: -225px; > body.active .wrapper .section margin-left: 0; width: 100%; > 

Step 7: Add JavaScript code to activate the menu button

In this case I have used a very small amount of JavaScript code which was originally used to activate the menu button on the navigation menu bar. If you see the demo above, you will understand that I have created a menu button here and if you click on that button, the entire menu bar will be hidden. Now we will activate that button which means when you click on this button the css code added above will be valid. I used the following JavaScript programming code to make it. The JavaScript programming code below is very simple and simple I hope you understand.

 var hamburger = document.querySelector(".hamburger"); hamburger.addEventListener("click", function() document.querySelector("body").classList.toggle("active"); >) 

Источник

How to make a sticky sidebar with two lines of CSS

Have you ever been on a website where an element “sticks” to the screen and follows you as you scroll down the page? This is what I call a sticky sidebar, and I’ve spent many hours battling with legacy code trying to debug one. In the past, developers used JavaScript to build this feature, by recalculating the position of the sidebar on the browser’s scroll event. This was complicated to maintain and also costly for performance. Recently I was delighted to discover that all major desktop browsers (Chrome, Firefox, Edge and Safari) now support the CSS property position: sticky . (Aside from a bug in Chrome with some table elements.) Edge was the final browser to ship support in October 2017 in version 16, which you can check on caniuse.com. This means that we can build a sticky sidebar using just two lines of CSS, with no JavaScript required! Let me show you how. First set up two divs. One represents the main page content and should extend past the bottom of the screen. The second will be the sidebar, which we’ll make shorter than the length of the screen, so we can clearly see it moving in our example. We use flex to position them side-by-side, because it’s 2018 and also because I love flex. Use the following HTML and CSS:

 class="wrapper">  class="main"> Main content  class="sidebar"> Sticky sidebar  

.wrapper  display: flex; justify-content: space-between; > .main, .sidebar  border: 3px solid black; padding: 15px; background-color: #fff; > .main  width: 60%; height: 150vh; > .sidebar  width: 25%; height: 25vh; > body  background-color: #ccc; font-family: sans-serif; padding: 10px; > 

This gives us two elements that look like this: Note the heights of the main and sidebar elements are set using vh units. 100vh is the height of the current viewport, so setting the height of the main div to 150vh gives it a height that will be 1.5 times that of the screen. But the sidebar isn’t sticky yet! When you scroll down the page, the sidebar doesn’t follow. All we need to do to fix that is to add two lines of CSS:

.sidebar  position: -webkit-sticky; position: sticky; top: 0; > 

(OK I lied, three lines for Safari compatibility with the -webkit- prefix.) And there you have it, scroll down the page and the sidebar will stick to the top of the screen and follow you down! The position: sticky property tells the element to stick to the screen, (MDN can explain this better than me), and the top value tells the element where to sit relative to the screen as it scrolls. We could change this to top: 5% to leave a gap, or for example left: 0 , depending on the direction of the scroll. Here is one I made earlier on CodePen: Try changing the height of the sidebar to 110vh and see how it stops at the bottom of the screen. Nice!

Can I use position: sticky in production?

position: sticky is still an experimental API, so use with caution. Read the draft spec here. Always consider which browsers you support when making a decision like this. Combine this information with caniuse to make an informed decision. Use the stats for all browsers on caniuse and not just the newest versions. Ask yourself, how would it affect the user’s experience if the sidebar wasn’t sticky? Would the website break completely or would they lose a nice-to-have decorative feature? As always, it depends on your particular app and there isn’t an answer that applies to every situation. But it’s really cool that we can now build features like this purely with CSS and a handy tool to have in your CSS toolkit.

Источник