CSS 不仅可以静态地修饰网页, 还可以配合各种脚本语言动态地对网页各元素进行格式化. 本文就来为大家介绍一下使用 CSS 制作导航菜单的方法, 希望对大家有一定的帮助.
下面我们来通过几个实例来介绍一些使用 CSS 制作导航菜单的方法, 希望大家可以更加直观的了解如何使用 CSS 制作导航菜单.
方式一: 直接编写代码实现
代码如下:
- <html>
- <head>
- <title > 无需表格的菜单 </title>
- <style>
- <!--
- body{
- background-color:#ffdee0;
- }
- #navigation {
- width:200px;
- font-family:Arial;
- }
- #navigation ul {
- list-style-type:none; /* 不显示项目符号 */
- margin:0px;
- padding:0px;
- }
- #navigation li {
- border-bottom:1px solid #ED9F9F; /* 添加下划线 */
- }
- #navigation li a{
- display:block; /* 区块显示 */
- padding:5px 5px 5px 0.5em;
- text-decoration:none;
- border-left:12px solid #711515; /* 左边的粗红边 */
- border-right:1px solid #711515; /* 右侧阴影 */
- width:175px; /* xg_超连接以外的部分也触发 CSS 样式效果 */
- }
- #navigation li a:link, #navigation li a:visited{
- background-color:#c11136;
- color:#FFFFFF;
- }
- #navigation li a:hover{ /* 鼠标经过时 */
- background-color:#990020; /* 改变背景色 */
- color:#ffff00; /* 改变文字颜色 */
- }
- -->
- </style>
- </head>
- <body>
- <div id="navigation">
- <ul>
- <li><a href="#">Home</a></li>
- <li><a href="#">News</a></li>
- <li><a href="#">Sports</a></li>
- <li><a href="#">Weather</a></li>
- <li><a href="#">Contact Me</a></li>
- </ul>
- </div>
- </body>
- </HTML>
效果如下:
方式二: 使用 jQuery 代码实现
代码如下:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <HTML>
- <head>
- <title>
- 伸缩的菜单, 用 toggle() 重写
- </title>
- <style>
- <!-- body{ background-color:#ffdee0; } #navigation { width:200px; font-family:Arial;
- } #navigation> ul {
- list-style-type:none; /* 不显示项目符号 */
- margin:0px;
- padding:0px;
- }
- #navigation> ul> li {
- border-bottom:1px solid #ED9F9F; /* 添加下划线 */
- }
- #navigation> ul> li> a{
- display:block; /* 区块显示 */
- padding:5px 5px 5px 0.5em;
- text-decoration:none;
- border-left:12px solid #711515; /* 左边的粗红边 */
- border-right:1px solid #711515; /* 右侧阴影 */
- }
- #navigation> ul> li> a:link, #navigation> ul> li> a:visited{
- background-color:#c11136;
- color:#FFFFFF;
- }
- #navigation> ul> li> a:hover{ /* 鼠标经过时 */
- background-color:#990020; /* 改变背景色 */
- color:#ffff00; /* 改变文字颜色 */
- }
- /* 子菜单的 CSS 样式 */
- #navigation ul li ul{
- list-style-type:none;
- margin:0px;
- padding:0px 0px 0px 0px;
- }
- #navigation ul li ul li{
- border-top:1px solid #ED9F9F;
- }
- #navigation ul li ul li a{
- display:block;
- padding:3px 3px 3px 0.5em;
- text-decoration:none;
- border-left:28px solid #a71f1f;
- border-right:1px solid #711515;
- }
- #navigation ul li ul li a:link, #navigation ul li ul li a:visited{
- background-color:#e85070;
- color:#FFFFFF;
- }
- #navigation ul li ul li a:hover{
- background-color:#c2425d;
- color:#ffff00;
- }
- -->
- </style>
- <script language="javascript" src="jquery.min.js">
- </script>
- <script language="javascript">
- $(function() {
- $("li").find("ul").prev().click(function() {
- $(this).next().toggle();
- });
- $("li:has(ul)").find("ul").hide();
- });
- </script>
- </head>
- <body>
- <div id="navigation">
- <ul id="listUL">
- <li>
- <a href="#">
- Home
- </a>
- </li>
- <li>
- <a href="#">
- News
- </a>
- <ul>
- <li>
- <a href="#">
- Lastest News
- </a>
- </li>
- <li>
- <a href="#">
- All News
- </a>
- </li>
- </ul>
- </li>
- <li>
- <a href="#">
- Sports
- </a>
- <ul>
- <li>
- <a href="#">
- Basketball
- </a>
- </li>
- <li>
- <a href="#">
- Football
- </a>
- </li>
- <li>
- <a href="#">
- Volleyball
- </a>
- </li>
- </ul>
- </li>
- <li>
- <a href="#">
- Weather
- </a>
- <ul>
- <li>
- <a href="#">
- Today's Weather
- </a>
- </li>
- <li>
- <a href="#">
- Forecast
- </a>
- </li>
- </ul>
- </li>
- <li>
- <a href="#">
- Contact Me
- </a>
- </li>
- </ul>
- </div>
- </body>
- </HTML>
注意: 该代码必须加载了 jQuery.min.JS 文件, 并且所写的 CSS 只能在 Firefox 浏览器中正常显示.
方式三: 实现伸缩的两级菜单
代码如下:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <HTML>
- <head>
- <title>
- 伸缩的菜单
- </title>
- <style>
- <!-- body{ background-color:#ffdee0; } #navigation { width:200px; font-family:Arial;
- } #navigation> ul {
- list-style-type:none; /* 不显示项目符号 */
- margin:0px;
- padding:0px;
- }
- #navigation> ul> li {
- border-bottom:1px solid #ED9F9F; /* 添加下划线 */
- }
- #navigation> ul> li> a{
- display:block; /* 区块显示 */
- padding:5px 5px 5px 0.5em;
- text-decoration:none;
- border-left:12px solid #711515; /* 左边的粗红边 */
- border-right:1px solid #711515; /* 右侧阴影 */
- }
- #navigation> ul> li> a:link, #navigation> ul> li> a:visited{
- background-color:#c11136;
- color:#FFFFFF;
- }
- #navigation> ul> li> a:hover{ /* 鼠标经过时 */
- background-color:#990020; /* 改变背景色 */
- color:#ffff00; /* 改变文字颜色 */
- }
- /* 子菜单的 CSS 样式 */
- #navigation ul li ul{
- list-style-type:none;
- margin:0px;
- padding:0px 0px 0px 0px;
- }
- #navigation ul li ul li{
- border-top:1px solid #ED9F9F;
- }
- #navigation ul li ul li a{
- display:block;
- padding:3px 3px 3px 0.5em;
- text-decoration:none;
- border-left:28px solid #a71f1f;
- border-right:1px solid #711515;
- }
- #navigation ul li ul li a:link, #navigation ul li ul li a:visited{
- background-color:#e85070;
- color:#FFFFFF;
- }
- #navigation ul li ul li a:hover{
- background-color:#c2425d;
- color:#ffff00;
- }
- #navigation ul li ul.myHide{ /* 隐藏子菜单 */
- display:none;
- }
- #navigation ul li ul.myShow{ /* 显示子菜单 */
- display:block;
- }
- -->
- </style>
- <script language="javascript">
- function change() {
- // 通过父元素 li, 找到兄弟元素 ul
- var oSecondDiv = this.parentNode.getElementsByTagName("ul")[0];
- //CSS 交替更换来实现显, 隐
- if (oSecondDiv.className == "myHide") oSecondDiv.className = "myShow";
- else oSecondDiv.className = "myHide";
- }
- Windows.onload = function() {
- var oUl = document.getElementById("listUL");
- var aLi = oUl.childNodes; // 子元素
- var oA;
- for (var i = 0; i < aLi.length; i++) {
- // 如果子元素为 li, 且这个 li 有子菜单 ul
- if (aLi[i].tagName == "LI" && aLi[i].getElementsByTagName("ul").length) {
- oA = aLi[i].firstChild; // 找到超链接
- oA.onclick = change; // 动态添加点击函数
- }
- }
- }
- </script>
- </head>
- <body>
- <div id="navigation">
- <ul id="listUL">
- <li>
- <a href="#">
- Home
- </a>
- </li>
- <li>
- <a href="#">
- News
- </a>
- <ul class="myHide">
- <li>
- <a href="#">
- Lastest News
- </a>
- </li>
- <li>
- <a href="#">
- All News
- </a>
- </li>
- </ul>
- </li>
- <li>
- <a href="#">
- Sports
- </a>
- <ul class="myHide">
- <li>
- <a href="#">
- Basketball
- </a>
- </li>
- <li>
- <a href="#">
- Football
- </a>
- </li>
- <li>
- <a href="#">
- Volleyball
- </a>
- </li>
- </ul>
- </li>
- <li>
- <a href="#">
- Weather
- </a>
- <ul class="myHide">
- <li>
- <a href="#">
- Today's Weather
- </a>
- </li>
- <li>
- <a href="#">
- Forecast
- </a>
- </li>
- </ul>
- </li>
- <li>
- <a href="#">
- Contact Me
- </a>
- </li>
- </ul>
- </div>
- </body>
- </HTML>
注意: 该代码在 Firefox 下正常显示, 但在 IE6 下无法显示正常.
本文转自: https://www.cnblogs.com/xugang/archive/2010/08/07/1794679.html
来源: http://www.css88.com/web/css/16180.html