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的更多相关文章

  1. 推荐25个帮助你提高技能的 CSS3 实战教程

    使用 CSS,你能够以极高的效率和易用性创造出美丽的设计.而目前流行的 CSS3 技术更加强大,能够创造更多丰富的效果和功能,而不需要任何外部插件.今天,我为大家收集了25个很有用的 CSS 教程,技 ...

  2. 使用HTML5、CSS3和jQuery增强网站用户体验[留存]

    记得几年前如果你需要添加一些互动元素到你的网站中用来改善用户体验?是不是立刻就想到了flash实现?这彷佛年代久远的事了.使用现在最流行的Web技术HTML5,CSS3和jQuery,同样也可以实现类 ...

  3. fullpage.js 具体使用方法

    1.fullpage.js  下载地址 https://github.com/alvarotrigo/fullPage.js 2.fullPage.js 是一个基于 jQuery 的插件,它能够很方便 ...

  4. Cai_Sublime

    Cai_Sublime Package Control:插件包管理工具 The simplest method of installation is through the Sublime Text ...

  5. WM (Constants)

    Create page WM (Constants)   Summary WM_* Constants and their definitions or descriptions and what c ...

  6. Subline Text默认设置文件Preferences.sublime-settings—Default详解

    Subline Text中,点击Preferences,选择Settings - Default 全部属性解析 // While you can edit this file, it's best t ...

  7. 打造自己个性的notepad ++

    对coder来说,notepad ++ 是一个很不错的文本编辑器.平时用来看看代码.xml文件,都比系统自带的记事本舒服得多.不过,对于像我这种每天用notepad ++写代码的人,一个原装的note ...

  8. Tabs - 选项卡插件

        接上篇Tabs  - 选项卡插件  其中12)Yet (E)Another Tab Interface没有依赖任何javascript框架,以作补充          9)Flipping C ...

  9. Sublime Text 2 -Sidebar 背景色调整为黑色

    Sublime Text 2 编辑器: Ctrl+` 输入安装代码,安装package control 插件 ctrl+shift+P : Package install 为什么装不上了呢?出现了什么 ...

  10. 【原创】Linux基础之命令行浏览器links

    有时服务器环境受限,比如在内网环境不能暴露端口从外网访问,用curl看html代码比较累,这时可以使用命令行浏览器来查看相关页面 links 官方:http://links.twibright.com ...

随机推荐

  1. ACM_lowbit

    lowbit Time Limit: 2000/1000ms (Java/Others) Problem Description: long long ans = 0; for(int i = 1; ...

  2. 350 Intersection of Two Arrays II 两个数组的交集 II

    给定两个数组,写一个方法来计算它们的交集.例如:给定 nums1 = [1, 2, 2, 1], nums2 = [2, 2], 返回 [2, 2].注意:       输出结果中每个元素出现的次数, ...

  3. [转]在 Linux 下使用 RAID

    转自:http://www.linuxidc.com/Linux/2015-08/122191.htm RAID 的意思是廉价磁盘冗余阵列(Redundant Array of Inexpensive ...

  4. EasyUI系列学习(三)-Draggable(拖动)

    一.创建拖动组件 0.Draggable组件不依赖于其他组件 1.使用标签创建 <div class="easyui-draggable" id="box" ...

  5. 鼠标单击到 img行的时候图片隐藏方案

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Java 中 父类变量访问子类方法 需要使用 类型转换 (instenceof)关键字 /类型判断/

    通过数组元素访问方法的时候只能访问在 Animal中定义的方法,对 于 Tiger类和  Fish中定义的方法时却不能调用,例如语句  animal[2].swim();就是不正确的.当 需要访问这些 ...

  7. Android Activity作为dialog对话框的使用详细介绍

    Activity做为Android应用层四大组件的重要组成部分,它的灵活性.可扩性无论是在应用还是游戏方面都得到了广泛应用,本文主要介绍Activity作为dialog对话框 的使用方法进行说明. 本 ...

  8. Perforce 的基本使用教程

    一.简介 P4是什么 二.基本使用方法 1.下载代码 下载最新代码 Get Latest Revision 下载指定commit代码 Get Revision 2. 检出代码 选择指定目录,右键 Ch ...

  9. Win32基础知识整理

    1.定义字符串 在资源新建String table,增加新字符串: (win32加载) TCHAR tcIDName[255]=_T(""); LoadString(hInstan ...

  10. CSS——宠物demo

    注意:ul中自带padding值,需要清除. <!DOCTYPE html> <html lang="en"> <head> <meta ...