精美设计滑动门菜单

稿源：互联网 2022-07-01 11:34:51 点击： 3312 撤稿纠错

这个滑动门菜单很漂亮，自定义内容。

以下讨论的是和相关的精美设计滑动门菜单教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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=gb2312" />
<meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>精美设计滑动门菜单，sky整理收集。</title>
<style type="text/css">
#menu {
 margin:0;
 padding:0;
 height:26em;
 overflow:hidden;
 background:#FFFCF2;
 }
#menu li {
 list-style-type:none;
 float:left;
 display:block;
 width:100%;
 }
#menu li a {
 display:block;
 text-decoration:none;
 color:#00b;
 margin:0;
 width:100%;
 }
#menu li a span {
 display:none;
 color:#453739;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 padding: 10px 0px 5px;
 }
#menu li a.one span {
 display:block;
 height:15em;
 margin:0 10px;
 }
#menu li a:hover {
 background:#FFFCF2;
 }
#menu li a:hover span {
 display:block;
 height:15em;
 margin:0 10px;
 cursor:pointer;
 }
#menu .h2 {
 margin:0 5px;
 padding:0;
 color:#933A34;
 font-size:12px;
 border:0;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 }
#menu .h3 {
 margin:0 5px;
 padding:0;
 font-size:10px;
 color:#62583B;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 }
#menu img {
 margin:0px 5px 5px;
 border:1px solid #000;
 float:left;
 }
.curved {
 width:21em;
 }
.curved .b1, .curved .b2, .curved .b3, .curved .b4 {
 font-size:1px;
 display:block;
 background:#C7BC98;
/* hide overflow:hidden from IE5/Mac */
/* */
overflow: hidden;
/* */
}
.curved .b1, .curved .b2, .curved .b3 {
 height:1px;
 }
.curved .b2, .curved .b3, .curved .b4 {
 background:#FFFCF2;
 border-left:1px solid #C7BC98;
 border-right:1px solid #C7BC98;
 }
.curved .b1 {
 margin:0 4px;
 background:#C7BC98;
 }
.curved .b2 {
 margin:0 2px;
 border-width:0 2px;
 }
.curved .b3 {
 margin:0 1px;
 }
.curved .b4 {
 height:2px;
 margin:0;
 }
.curved .c1 {
 margin:0 5px;
 background:#C7BC98;
 }
.curved .c2 {
 margin:0 3px;
 border-width:0 2px;
 }
.curved .c3 {
 margin:0 2px;
 }
.curved .c4 {
 height:2px;
 margin: 0 1px;
 }
.curved .boxcontent {
 display:block;
 background:transparent;
 border-left:1px solid #C7BC98;
 border-right:1px solid #C7BC98;
 font-size:0.9em;
 text-align:justify;
 }
</style>
</head>
<body>
<a href="<#ZC_BLOG_HOST#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<div class="curved">
 
 
 
 
 <div class="boxcontent">
 <ul id="menu">
 <li>
 <a href="http://www.alixixi.com/">
 站长特效网，www.zzjs.net
 [2007-05-16]
 
 <img src="/image/zzjs.ico" alt="站长特效网，专注于网页特效及广告代码。" style="cursor:pointer;"/>
 站长特效网，专注于网页特效及广告代码，zzjs .net
 
 </a>
 </li>
 <li>
 <a href="http://zzjs.net/?cat=2">
 
 
 
 
 业界新闻了解
 [2007-05-16]
 
 <img src="/image/zzjs.ico" alt="站长特效网，专注于网页特效及广告代码。" style="cursor:pointer;"/>
 站长特效网，专注于网页特效及广告代码，zzjs
 
 </a>
 </li>
 <li>
 <a href="http://zzjs.net/?cat=2">
 
 
 
 
 建站指南知识
 [2006-06-18]
 
 <img src="/image/zzjs.ico" alt="站长特效网，专注于网页特效及广告代码。" style="cursor:pointer;"/>
 站长特效网，专注于网页特效及广告代码，zzjs
 
 </a>
 </li>
 <li>
 <a href="http://zzjs.net/?cat=2">
 
 
 
 
 网页制作相关知识
 [2007-05-16]
 
 <img src="/image/zzjs.ico" alt="站长特效网，专注于网页特效及广告代码。" style="cursor:pointer;"/>
 站长特效网，专注于网页特效及广告代码，zzjs
 
 </a>
 </li>
 <li>
 <a class="one" href="http://zzjs.net/?cat=2">
 
 
 
 
 动画制作知识
 [2007-05-16]
 
 <img src="/image/zzjs.ico" alt="站长特效网，专注于网页特效及广告代码。" style="cursor:pointer;"/>
 站长特效网，专注于网页特效及广告代码，zzjs
 
 </a>
 </li>
 </ul>
 </div>
 
 
 
 
</div>
</body>
</html>

关于精美设计滑动门菜单的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2016339462766.shtml方便下次再访问哦。

·上一篇： 支持多种浏览器的纯css下拉菜单
·下一篇： 带说明信息css导航菜单

精美设计滑动门菜单

文章分类LIST >>返回首页

最新游戏

最新新闻