Fixed vertical menu with css and bootstrap

Asked

Viewed 3,306 times

0

I would like a help need to make a fixed vertical menu but next to them there is a line with some circles that will indicate me in which section of the page I am but I have no idea how to get this result would just like some tips and or some examples or documentation that can study to help me in this menu remembering that I am also using bootstrap3. Follow the menu layout image:

inserir a descrição da imagem aqui

follows the codes:

THE HTML:

  <div id="right-menu">
            <ul class="menu list-unstyled text-right">
                <li><a href="#">Home</a></li>
                <li><a href="#">Serviços</a></li>
                <li><a href="#">Sobre</a></li>
                <li><a href="#">Franquia</a></li>
                <li><a href="#">Contato</a></li>
            </ul>
        </div>

THE CSS:

 #right-menu{
      position: fixed;
      right: 150px;
      top: 30%;

      .no-padding{
        padding: 0;
      }

          .menu{
            li{
              margin: 10px;
            }
            a{
              color: @white;
              font-size: 1.2em;
              font-weight: 400;
                &:hover{
                  text-decoration: @link-hover-decoration;
                  color: @navbar-default-link-hover-color;
                }
            }
          }
        }

NOTE: I’m using the Less and the menu I want and similar to the site bootstrap side and when rolls shows what part is

html5 css3 bootstrap-3
  • 1

    I believe that if you take the div that contains all these elements and give it a position:Fixed, it solves... For more help from other users it is good to put the code....

  • @Magichat no friend that then I fix what I want to do and that sidebar with the circles understands

  • 1

    But I’m telling you, if you put all the elements, including the pellets, all in a div and position with Fixed... But to orient exactly I need to see html and css, capiche?

  • ata entendi kkkkkkk sorry I will edit the post and put the code

  • @Magichat ready friend is there the code

  • 1

    What’s going on ? One stays fixed or what?

  • and that’s how I want to do that vertical dash with the balls inside kind have the menu fixed to the right of the side of it has a bar in the image of to see that and in that bar have small circles each circle indicates a site Section I know how to do that understand not know if there is a right way to do it

  • Ei se fui bem claro mais e isso sabe por isso quero uma ajuda ou uma explicação de como faz ou ate memo links of examples help me

  • 1

    Let’s go continue this discussion in chat.

  • Okay buddy I’ll log in

  • @Magichat friend is not going the chado so keep loading can I add you on facebook

  • See if the answer is in agreement and close (if it is correct) by clicking on the side there...

Show 7 more comments

1 answer

1


See if it helps.

Following is in the basic css there adapts. In your case I think you will want to use images instead of the default list types.

Then just replace it with list-style-image: url('suaimagem.jpg');

So if you need 2 images for one on another for of, and in case I put event :Hover, then put whatever is necessary.

ul.exemplo {list-style-type: circle;}

li:hover {list-style-type: disc;}

.vertical{
float:left;
position:absolute;
margin-left:26px;
height:90px;
border-left:1px solid black;
}
 <div id="right-menu">
            <div class="vertical"></div>
            <ul class="exemplo">
                <li><a href="#">Home</a></li>
                <li><a href="#">Serviços</a></li>
                <li><a href="#">Sobre</a></li>
                <li><a href="#">Franquia</a></li>
                <li><a href="#">Contato</a></li>
            </ul>
</div>

You can do it in a lot of ways... But there’s a simplex...

Here can help

Anything goes around saying we’re right.

  • opa amigo daora mesmo só que tipo ta osso colocar do outro lado essa propiedade list-style so da na ser na esquerda não consigp lococala na direita ?

  • Boss from there puts image ... and directs....

  • vle friend helped me very malz have taken long to mark the answer I ran out of net

  • relax...good that I got.. te the next...

Browser other questions tagged html5 css3 bootstrap-3

You are not signed in. Login or sign up in order to post.