[CSS3] Make a horizontal-scrolling Menu

Our web app on desktop may use elements that use great deal of width. On many occasions we can’t simply turn these elements into columns so that they fit on a small screen. Such elements may not only fit inadequately on small screens, they could ruin the entire layout of our page if we’re not careful. In many cases, we can use a horizontal-scrolling menu to preserve the width, but keep it easily usable.

  <nav>

    <a href="">Home</a>

    <a href="">My Profile</a>

    <a href="">Favorites</a>

    <a href="">Links</a>

    <a href="">Tasks</a>

    <a href="">Promotions</a>

    <a href="">Settings</a>

  </nav>

nav {

  display: flex;

  overflow-x: auto; /*Allow children in nav can overflow in x direction*/

  -webkit-overflow-scrolling: touch; /*Let the scroll more smoothing*/

  margin: 10px 0;

}

a {

  margin-right: 20px;

  margin-bottom: 10px;

  white-space: nowrap;

}

巴特西

[CSS3] Make a horizontal-scrolling Menu

最新文章

热门文章