Disclaimer: The hover mechanic MIGHT not work on certain browsers because of the 'opacity' CSS tag. I have only tested this on Firefox. Sorry for the inconvenience.

Click Here for the fill code & example >>

HTML code

First create the <div> which will hold the sidebar and a div where all your not sidebar stuff will go:

  <div class="miniSidebar"></div>
<div class="content"></div>

Next create the items inside the <div> (Can hold up to 4 items):

  <div class="barItem">
    <img src="...">
</div>

Now, add 3 more items inside the <div>:

  <div class="barItem">
    <img src="...">
</div>
<div class="barItem">
    <img src="...">
</div>
<div class="barItem">
    <img src="...">
</div>

This should be your HTML code:

  <div class="miniSidebar">
<div class="barItem">
    <img src="...">
</div>
<div class="barItem">
    <img src="...">
</div>
<div class="barItem">
    <img src="...">
</div>
<div class="barItem">
    <img src="...">
</div>
</div>

Now for the CSS!

Start by creating the start code (fonts, margin, padding, etc.):

  @import url('https://fonts.googleapis.com/css?family=Roboto');
body{font-family: 'Roboto', sans-serif;margin: 0;}
.content{}
.miniSidebar{}
.barItem > img{}
.barItem > img:hover{}

First, we must make sure the .content class-element will NOT interfere with our sidebar:

  .content{
  margin: 10px; /Just add a little spacing/
  float: left; /All text will move a little to the left/
  width: 80%; /The content of the page should only take up 80% of the site and the sidebar will take up 40px/
}

Next, we are going to style the sidebar:

  .miniSidebar{
  float: right; /No interfering with the content!/
  width: 40px; /Set width/
  height: 200px; /This is what makes it mini!/
  border: 0.5px solid #b3b3b3; /A border that is a near-shade to #eee/
  border-radius: 5px 0px 0px 5px; /Curve top-left and bottom-left corners/
  background: #eee; /Set background/
  padding: 5px; /Adding space../
}

Lastly, set effects for the <img> in .barItem:

  .barItem > img {
  width: 40px; /Make sure it fits in sidebar/
  cursor: pointer; /Make it look like a link/
}
.barItem > img:hover {
  opacity: 0.5; /On hover, make it look selected./
}

You did it! The live demo (and code): Click Here

Thanks for reading! I hope you have a great day! More Posts and Pens are coming out!

Made by: Blue Sky Coleman (@Reefive)

This is my first post! I hop you like it!

281 0 0