Placing scroll in the horizontal

Asked

Viewed 352 times

1

I wanted to put a scroll horizontally, so it can be accessed on mobile screens. How do I do this?

.menu_topo_geral {
    width: 100%;
    height: 50px;
    background: #616161;
}
.menu_topo_geral div {
    cursor: pointer;
    text-align:center;
    line-height:50px;
    float: left;
    border: 0 solid #484848;
    border-right-width: 1px;
    color:#FFFFFF;
    padding: 0 10px 0 10px;
}
.menu_topo_geral div:hover {
    background: #484848;
}
.menu_topo_geral div:active {
    background: #323232;
}
<div class='menu_topo_geral'>
            <div class='bg-grey-2'>MENU 1</div>
            <div>MENU 2</div>
            <div>MENU 3</div>
            <div>MENU 4</div>
            <div>MENU 5</div>
            <div>MENU 6</div>
            <div>MENU 7</div>
            <div>MENU 8</div>
            <div>MENU 9</div>
            <div>MENU 10</div>
            <div>MENU 11</div>
            <div>MENU 12</div>
        </div>

html css

2 answers

3


Thus ?

A hint is to put the function calc in the width class content-menu:

width: calc(85px * 12);

You have to calculate more or less the size of each item of the MENU and do a basic multiplication to define the size of the content-menu. Then there won’t be any spaces left at the end.

Manjou ?

.menu_topo_geral {
  width: 100%;
  height: 50px;
  cursor: pointer;
  text-align: center;
}
.content-menu {
  width: calc(85px * 12);
  background: #616161;
  display: table;
}
.menu_topo_geral .content-menu div {
  line-height: 50px;
  float: left;
  border: 0 solid #484848;
  border-right-width: 1px;
  color: #FFFFFF;
  padding: 0 10px 0 10px;
}
<div class='menu_topo_geral'>
  <div class="content-menu">
    <div>MENU 1</div>
    <div>MENU 2</div>
    <div>MENU 3</div>
    <div>MENU 4</div>
    <div>MENU 5</div>
    <div>MENU 6</div>
    <div>MENU 7</div>
    <div>MENU 8</div>
    <div>MENU 9</div>
    <div>MENU 10</div>
    <div>MENU 11</div>
    <div>MENU 12</div>
  </div>
</div>

  • Yes I did, but I added your answer and that of @Lucas Costa to get the desired result, follow the link https://jsfiddle.net/8a76rm5t/2/ . thank you very much.

2

To enable scroll horizontally you can use overflow-x in the class of the element that can be expanded (example menu_topo_geral):

.menu_topo_geral {
    overflow-x: visible;
}

Jsfiddle: https://jsfiddle.net/8a76rm5t/1/

  • I tried that, and it didn’t work. You can edit your answer with the code working?

  • In your @Hugoborges case, the trick is on width class menu_topo_geral which is at 100%. What it will do is break the line by using the full size of the viewport. The ideal is to set a fixed size (in px), for him to apply the overflow. In test scenario, I left as 200% for you to see: https://jsfiddle.net/8a76rm5t/

  • @Luas Costa, I understand, but you don’t understand my idea. I need the menu to occupy 100% of the page, and when you have many options it creates a scroll only in the menu, and not in the whole page. Like this tab system that Mr. Felix helped me http://answall.com/questions/172893/como-coloca-um-scroll-no-tabbedsystem. only tabs move, and the contents do not.

  • I updated @Hugoborges, see if this is it: https://jsfiddle.net/8a76rm5t/1/

  • yes, but I noticed that you put '.menu_topo_general { width: 200%; }' the menu is a blank part, the scrolling has to stop when the menu options are finished.

  • It is. In order to have the scrolling, the size has to be fixed, as I mentioned. Ideal in this case, is to leave the size of the menus fixed.

  • has the size of menus fixed, and when the text is large it changes the size to accompany ?

Show 2 more comments

Browser other questions tagged html css

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