building a right side menu that sticks on center html

Question

First of all I am so sorry that I create this new question, but I have been looking for a while now for this menu/navigation that sticks on the right center of the html page. An example is like the social plugins that you can see floating on the left side of this page: http://www.addthis.com/social-buttons

I want to make a similar with my own images that leads to different html pages. Hope someone can help.

did you inspect the html document before? That should be the first place to look for if you want to learn how to build it — Alex Cio, Sep 25 '21 at 23:29

Luís Ferreira · Accepted Answer · 2017-01-24T10:14:07.903

1

Apply this to the container div of the menu:

.menu {
  position: fixed;
  right: 0px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

edited Jan 24 '17 at 10:14

answered Jan 24 '17 at 10:10

Luís Ferreira

2,458
3
19
27

You probably want to add transform: translateY(-50%) so that the menu is centered. (note that you need prefix for browser support) – Daniel Jan 24 '17 at 10:12
1

@TinaFlorijn You're welcome. I also edited the answer because Daniel made a good point. Don't forget to mark it as accepted if it worked for you :) – Luís Ferreira Jan 24 '17 at 10:15
i have not enough reputation to thumb up :( – Tina Florijn Jan 24 '17 at 10:27
@TinaFlorijn Oh, that's ok. I meant clicking on the checkbox on my answer, to accept it :) – Luís Ferreira Jan 24 '17 at 10:33
yes done thank you! do you also know how to make a div slide into the center html from the right side the page? – Tina Florijn Jan 24 '17 at 10:41
@TinaFlorijn No problem! You mean the div being on the center of the page? And always staying there? – Luís Ferreira Jan 24 '17 at 10:41
no i mean like when i click one of this menu items a hidden page must slide from the right into the html till the center of the page. and when you click the cross X on the corner of this new page this page must go back – Tina Florijn Jan 24 '17 at 10:46
@TinaFlorijn this is a good answer: http://stackoverflow.com/a/31819499/1815813 Let me know if you need help with it afterwards – Luís Ferreira Jan 24 '17 at 10:53

score 0 · Answer 2 · answered Jan 24 '17 at 10:15

You can do this with some CSS3 plain positioning like the axis-translate properties, but I think the better thing to do is trough using Flexbox.

Simply create a container around your element and give it the following properties:

.container {
    display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-line-pack: center;
  align-content: center;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

Your element will be within the .container div ofcourse.

This is the prefixed version, it is the reason why this is so long.

building a right side menu that sticks on center html

2 Answers2