帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

CSS多级嵌套下拉式导航菜单特效代码(支持水平和垂直方向)

帝国模板之家 2020-11-16 网页特效 评论

纯html和css/css3编写的下拉列表嵌套(无序)菜单,利于搜索引擎优化。支持水平和垂直方向。

使用方法:

1.在html页面中引入pure-css-navigation.css样式文件。

<link rel="stylesheet" href="./pure-css-navigation.css" />

2.用"pure-css-nav"CSS类将nav列表包装到一个DIV容器中。

<div class="pure-css-nav">
  <nav>
    <ul>
      <li><a href="">Home</a></li>
      <li>
        <a href="">About Us</a>
        <ul>
          <li><a href="">Sub #1</a></li>
          <li>
            <a href="">Sub #2</a>
            <ul>
              <li><a href="">Sub #2.1</a></li>
              <li>
                <a href="">Sub #2.2</a>
                <ul>
                  <li><a href="">Sub #3.1</a></li>
                  <li><a href="">Sub #3.2</a></li>
                  <li><a href="">Sub #3.3</a></li>
                </ul>
              </li>
              <li><a href="">Sub #2.3</a></li>
            </ul>
          </li>
          <li><a href="">Sub #3</a></li>
        </ul>
      </li>
      <li>
        <a href="">Portfolio</a>
        <ul>
          <li><a href="">No Children</a></li>
          <li>
            <a href="">1 Child - dlfjkhs adljkfh slakdj </a>
            <ul>
              <li><a href="">Child #1</a></li>
            </ul>
          </li>
          <li>
            <a href="">2 Children</a>
            <ul>
              <li><a href="">Child #1</a></li>
              <li><a href="">Child #2</a></li>
            </ul>
          </li>
          <li>
            <a href="">3 Children</a>
            <ul>
              <li><a href="">Child #1</a></li>
              <li><a href="">Child #2</a></li>
              <li>
                <a href="">Child #3</a>
                <ul>
                  <li><a href="">Child #1</a></li>
                  <li><a href="">Child #2</a></li>
                  <li>
                    <a href="">Child #3</a>
                    <ul>
                      <li><a href="">Child #1</a></li>
                      <li><a href="">Child #2</a></li>
                      <li>
                        <a href="">Child #3</a>
                        <ul>
                          <li><a href="">Child #1</a></li>
                          <li><a href="">Child #2</a></li>
                          <li><a href="">Child #3</a></li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="">Services</a></li>
      <li><a href="">Events</a></li>
      <li><a href="">Blog</a></li>
      <li><a href="">Careers</a></li>
      <li><a href="">Contact Us</a></li>
    </ul>
  </nav>
</div>

3.使用字体Awesome图标字体作为下拉式插入符号。

<link rel="stylesheet" href="/path/to/cdn/font-awesome.min.css" />
<div class="pure-css-nav nav-font-icons">  <nav>    ...  </nav></div>

4.设置顶级菜单项的宽度相等。

<div class="pure-css-nav nav-justified">
  <nav>
    ...
  </nav>
</div>

5.设置垂直方向菜单。

<div class="pure-css-nav nav-vertical">
  <nav>
    ...
  </nav>
</div>

会员登陆后即可下载资源文件。更多好用网站特效插件,请关注帝国模板之家

这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言