Fixed vertical menu with css and bootstrap

Question

Fixed vertical menu with css and bootstrap

Navigation

#1 by (1 votes)

0

I would like a precise help to make a fixed vertical menu but next to them there is a line with some circles that will indicate me in which session of the page I am however I have no idea how to arrive at this result I would like only some tips and or some examples or documentation that I can study that helps me in this menu reminding that I am also using bootstrap3. Here is the image of the menu layout:

followthecodes:

HTML:

<divid="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 am using the Less and the menu I want and look like the site of the bootstrap side and when scrolling shows in what part is

html5 css3 bootstrap-3

asked by anonymous 23.06.2016 / 17:20

1 answer

How to add values from JSpinners? Format HTML5 input calendar with javascript

score 1 · Accepted Answer

See if it helps.

Next is in the css basicão there adapts. In your case I think you'll want to use images instead of the standard list types.

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

So if you need 2 images one for the other for of, and in the case I put the event: hover, there you put whatever you need.

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 number of ways ... But here's a simple ...

Here you can help

Anything goes by commenting on which agent hits.