Question 45455 in Html Question posted in
Some basic documentation can be found here.

How to get the sidebar to the right side of the screen – Html

I’m new to css, so don’t mind my skills, I copied this code from somebody else online.
What I want to do is, having the sidebar to be at the right and when you hover over it, the details pop out towards the left. I’d appreciate any help that I get.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <div class="sidebar">
    <nav>
      <ul>
        <li>
          <a href="#"><i class="fa fa-facebook-f"></i><span>Facebook</span></a>
        </li>
        <li>
          <a href="#"><i class="fa fa-instagram"></i><span>Instagram</span></a>
        </li>
      </ul>
    </nav>
  </div>
</link>

@import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');
.sidebar *{
    background-color: #333;
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}
.sidebar {
    display: inline;
  font-family: 'Montserrat', sans-serif;
  height: 100vh;
}
.sidebar nav{
  position: absolute;
  width: 70px;
  margin-top: 125px;
  transition: all 0.3s linear;
  box-shadow: 2px 2px 8px 0px rgba(0,0,0,.4);
}
.sidebar nav li{
  height: 60px;
  position:relative;
}
.sidebar nav li a{
  color: white;
  display: block;
  height: 100%;
  width: 100%;
  line-height: 60px;
  padding-left:25%;
  border-bottom: 1px solid rgba(0,0,0,.4);
  transition: all .3s linear;
}

.sidebar nav li a i{
  position:absolute;
  top: 17px;
  left: 20px;
  font-size: 27px;
}
ul li a span{
  display: none;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.sidebar a:hover {
  z-index:1;
  width: 300px;
  border-bottom: 1px solid rgba(0,0,0,.5);
  box-shadow: 0 0 1px 1px rgba(0,0,0,.3);
  
}
.sidebar ul li:hover a span{
  padding-left: 30%;
  display: block;
}

tried setting text-center, align-items properties didnt work

Tags:

2

Answers


  1. 0

    After a few minutes of "calculated" guessing I found a solution. You say it needs to be a relative position but you don’t say where it needs to go. So I just typed coordinates here, if you want to update these coordinates you will have to watch out because it is very sensitive (The coordinates aren’t correct because I worked in a smaller window).

    I hope this helped you (if so pls let me know), have a nice day 🙂

    @import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');
.sidebar *{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}
.sidebar {
  display: inline;
  font-family: 'Montserrat', sans-serif;
  height: 100vh;
}
.sidebar nav{
  position: fixed;
/*You say it needs to be a relative position but you don't say where it needs to go:*/
  top: 10px; left: 400px;
  width: 70px;
  margin-top: 150px;
  transition: all 0.3s linear;
  box-shadow: 2px 2px 8px 0px rgba(0,0,0,.4);
}

.sidebar nav li{
  height: 60px;
  position:relative;
}
.sidebar nav li a{
  color: white;
  display: block;
  height: 100%;
  width: 100%;
  line-height: 60px;
  padding-left:25%;
  border-bottom: 1px solid rgba(0,0,0,.4);
  transition: all .3s linear;
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <div class="sidebar">
    <nav>
      <ul>
        <li>
          <a href="#"><i class="fa fa-facebook-f"></i><span>Facebook</span></a>
        </li>
        <li>
          <a href="#"><i class="fa fa-instagram"></i><span>Instagram</span></a>
        </li>
      </ul>
    </nav>
  </div>
</link>
    Login or Signup to reply.
  2. 0

    So The first thing I did was to add float:inline-end; to our .Sidebar{} and removed position:fixed; from our nav selector.

    (my own first instinct was to use flexbox, but that’s just me.)

    This will make your sidebar float on the right side of the screen and your nav is just housed in it.

    Then to change the direction of our animation, we change padding-left:20% of .Sidebar ul li:hover a span{} to padding-right:20% and add float:inline-end to .Sidebar nav li a{}.

    And that’s pretty much it I think.

    I didn’t have to touch our html code so here’s what I ended up with in the stylesheet:

    @import url('https://fonts.googleapis.com/css?family=Montserrat:600&display=swap');

body {
    background-color: black;
}
.sidebar *{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}
.sidebar {
    display:inline;
    float: inline-end;
  font-family: 'Montserrat', sans-serif;
  height: 100vh;
}
.sidebar nav{
  
  width: 70px;
  margin-top: 150px;
  transition: all 0.3s linear;
  box-shadow: 2px 2px 8px 0px rgba(0,0,0,.4);
  
}
.sidebar nav li{
  height: 60px;
  position:relative;
}
.sidebar nav li a{
  color: white;
  display: block;
  float: inline-end;
  height: 100%;
  width: 100%;
  line-height: 60px;
  
  border-bottom: 1px solid rgba(0,0,0,.4);
  transition: all .3s linear;
}

.sidebar nav li a i{
  position:absolute;
  float: inline-end;
  top: 17px;
  left: 20px;
  font-size: 27px;
}
ul li a span{
    display: none;

  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.sidebar a:hover {
  z-index:1;
  width: 300px;
  border-bottom: 1px solid rgba(0,0,0,.5);
  box-shadow: 0 0 1px 1px rgba(0,0,0,.3);
}
.sidebar ul li:hover a span{

  padding-right:20%;
  display: block;

} ```
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search