PHP程序员学习笔记|如何学习PHP

个人总结的PHP学习方法


纯css实现三级下拉导航菜单范例

2017-6-28 0phpcom 经典文章


一个很好的三级导航菜单的范例,既精简,又比较兼容。css做的,如果想实现更多、更炫的效果,也可以配合一定的js来完成。


为了方便大家理解,做了一个很简单的例子,下图是导航菜单的效果:


纯css实现三级下拉导航菜单范例效果图


范例源码:


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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>纯css实现三级导航菜单范例-代潇瑞博客</title>

<style type="text/css">

/*核心样式 实现三级导航的效果*/

.dropdown,.dropdown li,.dropdown ul { list-style: none; margin: 0; padding: 0;}

.dropdown { position: relative; z-index: 597; float: left;}

.dropdown li { float: left; vertical-align: middle; zoom: 1;}

.dropdown li.hover,.dropdown li:hover { position: relative; z-index: 599; cursor: default;}

.dropdown ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 100%;}

.dropdown ul li { float: none;}

.dropdown ul ul { top: 1px; left: 99%;}

.dropdown li:hover > ul { visibility: visible;}

/*核心样式 实现三级导航的效果*/

/*辅助样式 美化导航 更多:www.0-php.com */

.my_nav{font-size:14px; background:#888; height:32px; line-height:32px;}

.my_nav li{border-right:1px solid #fff;}

.my_nav ul{background:#999;}

.my_nav ul li:hover,.my_nav ul li:hover a{background:#ccc;color:#555;}

.my_nav ul li ul li{background:#ccc;color:#555;}

.my_nav ul,.my_nav li{width:80px; text-align:center;}

.my_nav a{text-decoration:none;color:#fff;}

</style>

</head>

<body>

<ul class="dropdown my_nav">

<li><a href="#this">首 页</a></li>

  <li><a href="#this">PHP学习</a>

  <ul>

    <li><a href="#this">PHP入门</a></li>

    <li><a href="#this">程序开发</a>

      <ul>

        <li><a href="#this">ecshop</a></li>

          <li><a href="#this">thinkphp</a></li>

          <li><a href="#this">magento</a></li>

        </ul>

      </li>

      <li><a href="#this">PHP论坛</a></li>

    </ul>

  </li>

  <li><a href="#this">JS源码</a></li>

  <li><a href="#this">资料下载</a></li>

  <li><a href="#this">联系我</a></li>

</ul>

</body>

</html>


直接复制以上代码到一个新建的html文件里面,保存即可以运行了。是不是很好用呢。。

« 如何查看mysql当前连接和最大连接数 | 网页如何为打印设置单独的css样式»
发表评论:









订阅Rss