网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
纯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>
转载请注明来源:CSS多级嵌套下拉式导航菜单特效代码(支持水平和垂直方向)
本文永久链接地址:https://www.moyouyouw.cn/code/741.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论