谢锋的博客——关注xhtml+css、用户体验、电子商务

上一篇讲到了css圆角菜单的制作。其实css下拉菜单在现在的网页中也经常用到，最常用的是css结合js实现下拉菜单的效果。其实用css就可以完全做出下拉菜单的效果。思路是：采用dl、dt、dd列表，默认情况下将dd的内容隐藏，当鼠标指上到dt时显示出来，就可以实现所谓的css下拉菜单。
实现css下拉菜单的相应html代码：
<li><dl> <dt><a href=”#”>Artech Achi</a></dt>
      <dd><a href=”#”>Landscape</a></dd>
      <dd><a href=”#”>Plan</a></dd>
      <dd><a href=”#”>Design</a></dd>
      <dd><a href=”#”>Maps</a></dd>
 </dl></li>

css下拉菜单相应的css代码：
#menu {margin:0;padding:0; width:610px;list-style-type:none;font:14px Arial; }
#menu li { float:left; padding:0;margin:0 1px 0 0;width:150px;}
#menu li dl { margin: 0;padding: 0 0 10px 0;  }
#menu li dt a,#menu li dd a{ display:block;}
#menu li dt { margin:0;padding: 5px; background:blue; color:#fff;text-align:center; border-bottom:1px solid #b00; }
#menu li dt a ,#menu li dt a:visited {display:block;color:#333;text-decoration:none; }
#menu li dd {margin:0;padding:0;color: #fff;background: #47a; }
#menu li dd.last {border-bottom:1px solid #b00; }
#menu li dd a, #menu li dd a:visited {display:block;color:#fff;text-decoration:none;padding:4px 5px 4px 20px;
height:1em;  }
#menu li dd { display:none;}
#menu li:hover dd , #menu li a:hover dd { display:block;}
#menu li:hover, #menu li a:hover { border:0;}/*ie6*/
#menu li dd a:hover {background: #147;color:#9cf; }

 这样在FF和IE7中就可实现下拉菜单的效果，但是在IE6中，就不会打开子菜单，因为IE6的”:hover”只对a标记有效。因此需要把每一组<dl>装到一个表格里，然后再把这个表格装到<a>标记中。
最后其下拉菜单的html代码如下：
 <li>
   <!–[if lte IE 6]><a href=”#nogo”><table><tr><td><![endif]–>
   <dl>
    <dt><a href=”#”>Artech Studio</a></dt>
    <dd><a href=”#”>Web Dev</a></dd>
    <dd><a href=”#”>Web Design</a></dd>
    <dd><a href=”#”>Books</a></dd>
    <dd><a href=”#”>Contact Us</a></dd></dl> 
  <!–[if lte IE 6]></td></tr></table></a><![endif]–></li>
最后其css下拉菜单的css代码如下：
#menu {margin:0;padding:0;width:610px;list-style-type:none; font:14px Arial; }
#menu li {float:left;padding:0;margin:0 1px 0 0;width:150px; }
#menu li dl {width:150px;/*ie6*/margin: 0;padding: 0 0 10px 0;  }
#menu li dt a,#menu li dd a{ display:block;}
#menu li dt {margin:0;padding: 5px;text-align:center;border-bottom:1px solid #b00; }
#menu li dt a ,#menu li dt a:visited {display:block;color:#333;text-decoration:none;}
#menu li dd {margin:0;padding:0;color: #fff;background: #47a; }
#menu li dd.last {border-bottom:1px solid #b00;}
#menu li dd a, #menu li dd a:visited {display:block;color:#fff;text-decoration:none;padding:4px 5px 4px 20px;height:1em; }
#menu li dd { display:none;}
#menu li:hover dd , #menu li a:hover dd { display:block;}
#menu li:hover, #menu li a:hover { border:0;}/*ie6*/
#menu li dd a:hover {background: #147;color:#9cf;}
#menu table { border-collapse:collapse;padding:0;margin:-1px;font-size:1em;}

最后做成的css下拉菜单的效果图如下：
 

css下拉菜单源码下载（可以下载下来自己研究）：点击下载    

原创文章，转载请注明： 转载自谢锋的博客

本文链接地址:http://www.onlycss.cn/2009/12/drop-down-menu/

上一篇中提到应用滑动门制作菜单 ，现在主要看看如何制作圆角菜单。制作圆角菜单最常用的就是图片法：利用图片作为背景，使菜单产生圆效果。其实制作圆角菜单也可以不用图片，完全可以用css代码实现。核心思路：多挂几个钩子，把这些钩子的高度设置的很小，再利用margin以及border相关属性就可以实现，跟水平斜角菜单的制作类似。
其制作圆角菜单html代码如下：
  <li class=”i’tem”><a href=”#”>
   <div class=”row1″></div>
   <div class=”row2″></div>
   <div class=”row3″></div>
   <div class=”row4″></div>
   <p>Home</p></a>
 </li>
其中row1、row2、row3、row4的作用就是作为钩子。
其制作圆角菜单css代码如下：
.item{width:100px;margin:0 auto; padding 0;font: 14px Arial;font-weight:bold;list-style-type:none; }

.item p{padding:0 0 2px 0;margin:0;text-align:center; background:#cc6;border:solid 1px  #000;border-top-width:0;}
.item div{height:1px;overflow:hidden; background:#cc6; border-left:solid 1px  #000;  border-right:solid 1px  #000;}

.item .row1{margin:0 5px;background:#000;height:1px;}

.item  .row2{margin:0 3px;border:0 2px;}

.item .row3{margin:0 2px;}
.item .row4{margin:0 1px;height:2px;}
注意：对p的边框设置时，其上边框的宽度要设置为0。然后对四个作为钩子的div设置共同的属性：1像素高、与它们下面背景颜色相同的背景颜色，并且左右两端的的边框像素为1.然后再根据个别的钩子设置其属性来达到圆角的效果。
最后的圆角菜单的效果图如下：

原创文章，转载请注明： 转载自谢锋的博客

本文链接地址:http://www.onlycss.cn/2009/12/circular-menu/

斜角菜单也是一种常用的css菜单，制作斜角菜单一般来说可以有好几种方法，最常用的是图片法。其实制作斜角菜单完全可以用css代码实现，也可以不用图片。其核心思想就是利用边框的接角位置构造出一个斜角，然后通过“钩子”的方法，放到相应的位置。
首先了解下斜角的效果是怎么样制作的？

其实制作斜角效果是先将盒子的高度和宽度都设为0，然后再利用四个边框的相应属性就可以实现斜角效果，如：
<html><head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>制作斜角效果</title>
<style>
<!–
div{height:0;width:0; border-style:solid; border-width:50px; border-color:#F00 #000 #00C  #060;}
–>
</style></head>
<body>
<div></div>
</body></html>
其产生的斜角效果如下图所示：

斜角效果

所以按照上面的思路，就可以完全不用图片就可以做出一个斜角菜单，css斜角菜单html代码如下：

<div id=”menu”>
       <a href=”#”> <span></span> Home </a>
       <a href=”#”><span></span> Contact Us </a>
       <a href=”#”><span></span> Web Dev </a>
       <a href=”#”><span></span> Web Design </a>
       <a href=”#”><span></span> Map </a>
    </div>
斜角菜单的css代码如下：

#menu {font-family:Arial;font-size:14px;}
#menu a, #menu a:visited {display:block;float:left;position:relative;background-color:#00C;color:#fff;
                                                         text-decoration:none;padding:6px;margin:1px 0 0 1px;}
#menu a span{height:0;width:0;border-bottom:solid 6px #00c;border-left:solid 6px #fff;
                              position:absolute;top:0;left:0;overflow:hidden;}
#menu a:hover{background-color: #060;color:#333;}
#menu a:hover span{border-bottom:solid 6px #060;}

其最终产生的css斜角菜单如下图所示：

css斜角菜单源码下载（可以下载下来自己研究)点击下载

原创文章，转载请注明： 转载自谢锋的博客

本文链接地址:http://www.onlycss.cn/2009/12/make-angled-menu/

利用字体的大小和float属性就可以实现首字下沉的效果。如下：

实现首字下沉效果的css代码

p{font-family:Arial;font-size:12px;line-height:1.5;}
.firstLetter{font-size:3em;float:left;}

实现首字下沉的html代码：

<p><span>T</Span>he Internet Society’s mission is to achieve a world in which everyone everywhere is connected to an open and universally accessible Internet.  Since its inception in 1992, ISOC has been at the forefront of global Internet education by bringing essential information and training to people throughout the world.The Internet Society’s mission is to achieve a world in which everyone everywhere is connected to an open and universally accessible Internet.</p>

如在p标记中的line-height:1.5;改为line-height:18px;之后就会发现首字母T不再以首字下沉的方式显示了，12px像素的1.5倍刚好也是18px，行高也没什么变化，为什么首字下沉会失效呢？
分析：
css具有继承的性质，当在p的样式中设置为line-height:18px;时span继承的p的属性，那么它的行高也是18px。尽管首字母的高度变大了，但是它的盒子高度仍为18px。文字排版是以盒子为界限的，因此首字下沉的效果就会受到影响。而如果将line-height:1.5;时，这个样式同样被span继承，因此当它的文字变为3倍大的时候，行高也会随之变大，那么首字下沉会失效。
font-family:Arial;font-size:12px;line-height:1.5;这三句也可以合为一句：font:12px/1.5 Arial;注意在字号和行高之间要用斜线隔开。

原创文章，转载请注明： 转载自谢锋的博客

本文链接地址: http://www.onlycss.cn/2009/12/first-letter-sink/