帮酷LOGO
  • 显示原文与译文双语对照的内容
文章标签:菜单  
A simple mega nav menu in pure CSS

  • 源代码名称:mega-nav
  • 源代码网址:http://www.github.com/AllThingsSmitty/mega-nav
  • mega-nav源代码文档
  • mega-nav源代码下载
  • Git URL:
    git://www.github.com/AllThingsSmitty/mega-nav.git
  • Git Clone代码到本地:
    git clone http://www.github.com/AllThingsSmitty/mega-nav
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/AllThingsSmitty/mega-nav
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • CSS在CSS中的超宽带

    纯CSS中简单的超级导航菜单。

    Wut?

    大型navs是大型菜单内容的有效特性,而且很容易实现。 如果你想将一个组合在一起,但不知道从哪里开始,这个快速演练将为你。

    你怎么做到的?

    这个实现只使用CSS和其他什么。 在创建菜单列表之后,将 <div class="mega-menu"> 添加到应该显示超级nav的菜单项。 下面的mega-menu 类将隐藏菜单:

    .mega-menu {
     background: #fff;
     border: 1pxsolid#ddd;
     border-radius: 003px3px;
     opacity: 0;
     position: absolute;
     transition: all.3sease.15s;
     visibility: hidden;
     width: 100%;
    }

    直到你悬停在菜单项上,才隐藏巨型导航:

    li:hover>.mega-menu {
     opacity: 1;
     overflow: visible;
     visibility: visible;
    }

    然后。

    Mega nav image 1

    这里实现使用 ARIA 路标角色遵循 WCAG 2.0兼容性。 仅键盘导航不包括。

    支持

    Chrome,Firefox,Safari,Opera,Edge和 IE8+的当前版本。

    许可证

    许可证( MIT )



    文章标签:菜单  

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