Question

Above you see an image of stacked div’s floating left. Here is that current markup:

<nav id="category-menu">
 <div class="category-top-row">
  <a href="categories/category-name">
   <div id="category-menu-button">Category Example
   </div>
  </a>
  <a href="categories/category-name">
   <div id="category-menu-button">Category Example
   </div>
  </a>
  <a href="categories/category-name">
   <div id="category-menu-button">Category Example
   </div>
  </a></div><!-- /#category-top-row-->
 <div class="category-bottom-row">
   <a href="categories/category-name">
    <div id="category-menu-button">Category Example
    </div>
   </a>
   <a href="categories/category-name">
    <div id="category-menu-button">Category Example
    </div>
   </a>
 </div><!-- /#category-bottom-row-->
</nav>

So here’s what I’m thinking, and maybe someone might be able to shed some light on if this is even possible:

Right now, the website scales from 1200px width, down to mobile using css3 media queries. When a mobile resolution loads the page, I adjust those images to stack into 2 columns so that we have enough space to see each of them. However, ideally I would like the user to be able to horizontally scroll through those categories with their finger, but still staying true to the device’s width. (ie. I want the category-menu wrapper to still maintain the mobile width, and ONLY allow scrolling in that wrapper)

I had the thought about creating a duplicate set of categories div called something like

<nav id="category-menu-mobile">
....
etc

and display:none to the “non-mobile” categories wrapper, switching to the new mobile styled categories. But is this even a possibility? How does Google do it! Can a div be scroll-able (borderless, and no scrollbar showing) the way I’m imagining it can on a mobile device? At first I thought the functionality behind frames is similar to what I wanted, but I don’t want to be loading a URL in that ‘window’. Just my fancy mobile menu.

The closest thing I can compare it to is Google’s icon scroller when loading Google on a mobile device:

Answer 1

You should be able to do this by explicitly setting the width and overflow-x properties in your mobile media query:

@media screen and (device-width: 480px) {
    #category-menu {
        width: 480px;
        overflow-x: scroll;
    }
}