0

gostaria de uma ajuda preciso fazer um menu vertical fixo porem ao lado deles existe uma linha com alguns círculos que vão me indicar em que sessão da página estou porem não faço ideia de como chegar nesse resultado gostaria só de algumas dicas e ou alguns exemplos ou documentação que possa estudar que me auxilie nesse menu lembrando que também estou usando bootstrap3. Segue a imagem do layout do menu:

inserir a descrição da imagem aqui

segue os códigos:

O 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>

O 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;
                }
            }
          }
        }

OBS: estou ultilizando o Less e o menu que eu quero e parecido com o site do bootstrap lateral e quando rola mostra em que parte está

12
  • 1
    Acredito que se pegar a div que contém todos esses elementos e der um position:fixed, resolve...Para obter mais ajuda de outros usuários é bom colocar o código....
    – MagicHat
    Commented 23/06/2016 às 15:28
  • @MagicHat nao amigo isso ai eu ja fix oque quero fazer e aquela barra lateral com os circulos entende Commented 23/06/2016 às 15:41
  • 1
    Mas é eu que tô dizendo, se colocar todos os elementos, incluindo as pelotas, tudo em uma div e posicionar com fixed... Mas pra orientar exatamente eu preciso ver o html e o css, capiche?
    – MagicHat
    Commented 23/06/2016 às 15:49
  • 1
    O que está acontecendo ? Num fica fixo ou o que?
    – MagicHat
    Commented 23/06/2016 às 16:37
  • 1
    Vamos continuar esta discussão no chat.
    – MagicHat
    Commented 23/06/2016 às 16:40

1 Resposta 1

1

Vê se ajuda.

Seguinte tá no css basicão aí se adapta. No seu caso acho que vai querer usar imagens ao invés dos tipos de lista padrão.

Daí é só substituir por list-style-image: url('suaimagem.jpg');

Então se precisa 2 imagens uma pra on outra pra of, e no caso eu coloquei evento :hover, aí se põe o que for necessário.

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>

Dá pra fazer de uma série de formas... Mas tá aí uma simplex...

Aqui pode ajudar

Qualquer coisa vai comentando que agente acerta.

4
  • opa amigo daora mesmo so que tipo ta osso colocar do outro lado essa propiedade list-style so da para ser na esquerda nao consigp lococala na direita ? Commented 23/06/2016 às 17:47
  • Patrão dai se põe imagem ... e direciona....
    – MagicHat
    Commented 23/06/2016 às 18:10
  • vle amigo me ajudou muito malz ter demorado para marcar a resposta fiquei sem net Commented 24/06/2016 às 18:58
  • relax...bom que consegui..te a próxima...
    – MagicHat
    Commented 24/06/2016 às 19:07

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .