帮酷LOGO
  • 显示原文与译文双语对照的内容
small and sleek mobile navigation

  • 源代码名称:paradeiser
  • 源代码网址:http://www.github.com/lucidlemon/paradeiser
  • paradeiser源代码文档
  • paradeiser源代码下载
  • Git URL:
    git://www.github.com/lucidlemon/paradeiser.git
  • Git Clone代码到本地:
    git clone http://www.github.com/lucidlemon/paradeiser
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/lucidlemon/paradeiser
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • Paradeiser

    Bower Version

    这是你唯一需要杀死汉堡包的菜单。

    Paradeiser是处理响应式网页设计中主要问题的一个小软件包: 导航。

    当你想使用hamburger菜单时,我们都知道这个问题,这通常是最舒适的方式,比如 hamburgler,但很多人已经发现汉堡菜单往往不是最好的选择。

    Asides从它的识别值中取得了很大的差异,它仍然提供了点击访问你最重要的链接。

    另一方面,如选择框( 还需要双击) 或者显示所有链接的方法都不像样式 ul 列表那样好。

    这就是 Paradeiser的地方。 如果你在 header 栏中有最重要的链接,甚至是你公司的logo,那么对于重要的东西,你还有一个。

    Demo of Paradeiser

    它的重量只有 1.3 kb 。

    特性

    基于 webkit,所有链接都需要所需的空间和中心,因这里可以以在导航栏中使用 1.2或者 5链接。

    你还可以通过覆盖scss文件的变量来调整大小等。

    要求

    的CSS版本

    • CSS 。
    • 是的,就是这样。

    感谢你的andreruffert Paradeiser现在只有 CSS 。

    在滚动时自动隐藏

    此外,还支持隐藏在滚动上,通过 Headroom.js 实现,有关实现的详细信息,参见演示 4.

    通过 Bower 安装

    bower install Paradeiser --save

    用法

    需要的文件

    paradeiser/
    └── dist/
     └── min/
     └── paradeiser.min.css

    HTML标记

    在你的头或者你觉得适合你的地方,包括源文件

    <linkrel="stylesheet"href="path-to/paradeiser.min.css">

    或者如果你有信心尝试一些新的东西,你也可以通过我的cdn链接它: 但是,我自己还没有足够的测试,尽管可以这样做。 它应该能完美地工作。

    <linkrel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/paradeiser/0.4.2/min/paradeiser.min.css">

    然后把这些东西放在 below的<body> 开始标签上:

    如需进一步演示,请访问演示页面。

    <navclass="paradeiser">
     <ahref="#">
     <imgsrc="http://danielwinter.at/apple-touch-icon_76x76.png"alt="Logo of Daniel Winter"class="paradeiser_logo">
     </a>
     <ahref="#">
     <iconclass="paradeiser_icon_canvas">
     <imgsrc="img/menu_home.svg"alt="Navigate to Home">
     </icon>
     <span>Home</span>
     </a>
     <ahref="#">
     <iconclass="paradeiser_icon_canvas">
     <imgsrc="img/menu_shop.svg"alt="Navigate to Shop">
     </icon>
     <span>Shop</span>
     </a>
     <ahref="#">
     <iconclass="paradeiser_icon_canvas">
     <imgsrc="img/menu_cart.svg"alt="Navigate to Cart">
     </icon>
     <span>Cart</span>
     </a>
     <ahref="#">
     <iconclass="paradeiser_icon_canvas">
     <imgsrc="img/menu_contact.svg"alt="Navigate to Contact">
     </icon>
     <span>Contact</span>
     </a>
     <!-- and include the dropdown aswell --> <divclass="paradeiser_dropdown">
     <ahref="#paradeiser-more">
     <iconclass="paradeiser_icon_canvas">
     <imgsrc="img/menu_overflow.svg"alt="">
     </icon>
     <span>More</span>
     </a>
     <ulclass="paradeiser_children"id="paradeiser-more">
     <li><ahref="#">Terms of Service</a></li>
     <li><ahref="#">About Us</a></li>
     <li><ahref="#">Yolo</a></li>
     <liclass="paradeiser-hidden-desktop"><ahref="#">Hidden on desktop</a></li>
     <liclass="paradeiser-hidden-tablet"><ahref="#">Hidden on tablet</a></li>
     <liclass="paradeiser-hidden-phone"><ahref="#">Hidden on phone</a></li>
     <li><ahref="#!"></a></li>
     </ul>
     </div>
    </nav>

    计划未来的计划

    • 弹出窗口上的动画效果更好
    • 支持一个页面网站,自动突出显示正确的链接

    为什么这叫 Paradeiser?

    Paradeiser为番茄,我只是觉得它可以能听起来很酷,而且它有一个好的环,它的( 天堂- 嗯) 。

    变更日志

    0.4.0

    在我的CDN上也有 Paradeiser,我将添加到由cloudflare托管的cdnjs,也许它们会接受。

    0.3.0

    span 更改下拉列表到 div,像我们在 #13. 中所建议的那样 再次重构 scss,现在每个变量只设置一个文件,默认情况下可以被覆盖,并且可以覆盖所有相关的部分。

    0.2.5.

    如 #9 隐藏在滚动上的建议现在使用 Headroom.js 实现,但是仍然有菜单。 如果你不使用 overflow,你可以获得演示 4 ( 源代码 ) 。 我通过Cloudflare加入了 Headroom.js,所以不需要额外的下载。 Paradeiser本身保留了JS自由。

    0.2.0

    由于 andreruffert 和 CSS :target 选择器,Paradeiser现在只是 CSS 。 注意重写的HTML标记。

    0.1.2

    添加了用于隐藏不同设备上的链接的paradeiser-hidden-*类。 这样你就可以在切换到移动菜单时将链接从导航栏移动到 overflow 菜单

    0.1.0

    如果你希望阻止这种行为,Paradeiser也可以在桌面系统上看到,只要在导入paradeiser_variables时将 $paradeiser-mobile-only 变量设置为 true 即可。




    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语