Two vertical menus on both sides of the browser

Asked

Viewed 36 times

-1

See the image:

Tela

The content (a three.js script) would occupy 100% of the viewport(padding:0;border:0;margin:0), while the menus would occupy 10% width per 100% height. In the case of menu 1, I can using position:Fixed, however the menu 2 does not work, neither with position:Fixed nor with float:right. It would be something like this:

<html>
    <head>
        <title>
            Game
        </title>
    </head>
    <body>
        <link href="style.css" type="text/css" rel="stylesheet"/>
        <script src="three.min.js"></script>
        <div id="left">
            <a href="#" class="active">Menu 1</a>
            <a href="#">link 1.1</a>
            <a href="#">link 1.2</a>
            <a href="#">link 1.3</a>
            <a href="#">link 1.4</a>
        </div>
        <div id="right">
            <a href="#" class="active">Menu 2</a>
            <a href="#">link 2.1</a>
            <a href="#">link 2.2</a>
            <a href="#">link 2.3</a>
            <a href="#">link 2.4</a>
        </div>
        <script src="game.js"></script>
    </body>
</html>

How can I solve this problem?

html css

  • It doesn’t work if you margin: 0 0 0 80%;(or 90% if the parameter is the other border) ???

1 answer

1


Probably what you missed was just putting right: 0 in his #right, indicating that it is fixed on the right. Here is an example I created:

#left {
  /* Fixo à esquerda e topo, ocupando toda altura */
  position: fixed;
  top: 0;
  height: 100vh;
  
  /* Para ficar atrás do texto */ 
  z-index: -1;

  /* Para os links ficarem em linhas diferentes */
  display: flex;
  flex-flow: column;
  
  /* Para visualizar melhor */
  background-color: red;
}

#right {
  /* Fixo à direita e topo, ocupando toda altura */
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  
  /* Para ficar atrás do texto */ 
  z-index: -1;
  
  /* Para os links ficarem em linhas diferentes */
  display: flex;
  flex-flow: column;
  
  /* Para visualizar melhor */
  background-color: green;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id elementum augue. Pellentesque ac purus accumsan urna egestas vestibulum. Phasellus non dui aliquam, euismod augue hendrerit, porta mauris. Duis dignissim arcu in luctus consectetur. Nulla iaculis neque in suscipit faucibus. Nulla pulvinar mauris tellus. Aenean ligula augue, viverra at viverra ut, vestibulum in eros. Proin posuere ex sed arcu faucibus, semper consectetur leo faucibus. Etiam consequat cursus velit, sed hendrerit justo sollicitudin vitae.</p>
<div id="left">
  <a href="#" class="active">Menu 1</a>
  <a href="#">link 1.1</a>
  <a href="#">link 1.2</a>
  <a href="#">link 1.3</a>
  <a href="#">link 1.4</a>
</div>
<div id="right">
  <a href="#" class="active">Menu 2</a>
  <a href="#">link 2.1</a>
  <a href="#">link 2.2</a>
  <a href="#">link 2.3</a>
  <a href="#">link 2.4</a>
</div>

If you don’t need the menu to be behind the text, or don’t want to use display: flex, just read the comment I put in each CSS style and remove :)

PS: I didn’t want to modify your HTML so it wouldn’t be difficult to understand, but take the common attributes of both menus and put them in a class, don’t duplicate code.

Browser other questions tagged html css

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