设为首页收藏本站
切换到宽版

 找回密码
 注册
搜索
热搜: 回贴
微赢网络技术论坛»论坛 › 学习网 知识堂 › WEB开发 › HTML › 利用CSS玩转多页菜单
  • 前程无忧官网首页 有什么好的平台可以
  • 最新的销售平台 互联网营销的平台有哪
  • 制作网页的基本流程 网页制作和网页设
  • 【帝国CMS】输出带序号的列表(数字排
  • 网站建设公司 三一，中联，极东泵车的
  • 织梦 建站 织梦网站模版后台怎么更改
  • 云服务官网 哪些网站有免费的简历模板
  • 如何建网站要什么条件 建网站要用什么
  • 吉林市移动公司电话 吉林省退休人员网
  • 设计类毕业论文 网站设计与实现毕业论
返回列表 发新帖
查看: 229|回复: 1

利用CSS玩转多页菜单

[复制链接]
发表于 2009-9-15 02:16:38 | 显示全部楼层 |阅读模式 IP:江苏扬州
描述：Menu
图片：

平时上163，迅雷都会发现多页的菜单，在一个很小的位置里，多页菜单将发挥其不可思议的能量，不刷新，不用点击，按需分类，都大大满足了当今网页“寸土寸金”的需要。下面是我用CSS编写的多页菜单效果，代码比较简单，就没有逐行解释，不过可修改之处都做了解释。其中颜色#3399FF、#CCFFFF分别是背景色和边框色，使用时可自由取代。


<html>
<head><title>Nicky Test Menu</title>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<!-- 定义所需的CSS -->
<style type="text/css">
<!--
.Nicky #tabmenu {
    PAddING-RIGHT: 0px; PAddING-LEFT: 10px; Z-INDEX: 1; PAddING-BOTTOM: 0px; MARGIN: 5px 0px

0px; COLOR: #000; PAddING-TOP: 0px; BORDER-BOTTOM: #3399FF 1px solid
}
.Nicky #tabmenu LI{
    DISPLAY: inline; MARGIN: 0px; OVERFLOW: hidden; LIST-STYLE-TYPE: none
}
.Nicky #tabmenu A {
    BORDER-RIGHT: #3399FF 1px solid; PAddING-RIGHT: 5px; BORDER-TOP: #3399FF 1px solid;

PAddING-LEFT: 5px; BACKGROUND: #fff; PAddING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #3399FF 1px

solid; COLOR: #000; PAddING-TOP: 2px; BORDER-BOTTOM: #3399FF 1px solid; TEXT-DECORATION: none
}

.Nicky #tabmenu A.active {
    BACKGROUND: #CCFFFF; BORDER-BOTTOM: #CCFFFF 3px solid
}
.Nicky #tabmenu A:hover {
    BACKGROUND: #CCFFFF
}
.Nicky #tabmenu A.active:hover {
    BACKGROUND: #CCFFFF; COLOR: #000
}
.Nicky .activecontent {
    BORDER-RIGHT: #3399FF 1px solid; PAddING-RIGHT: 2px; BORDER-TOP: #3399FF 1px;

PAddING-LEFT: 2px; Z-INDEX: 2; BACKGROUND: #CCFFFF; PAddING-BOTTOM: 2px; BORDER-LEFT: #3399FF

1px solid; PAddING-TOP: 2px; BORDER-BOTTOM: #3399FF 1px solid; TEXT-ALIGN: justify
}
.Nicky .activecontent A {
    COLOR: #00f; TEXT-DECORATION: none
}
.Nicky .activecontent A:hover {
    TEXT-DECORATION: underline
}
.Nicky .activecontent OL {
    PAddING-RIGHT: 0px; PAddING-LEFT: 0px; PAddING-BOTTOM: 0px; MARGIN: 5px 5px 5px 30px;

PAddING-TOP: 0px
}
.Nicky .activecontent LI {
    PAddING-RIGHT: 0px; PAddING-LEFT: 0px; PAddING-BOTTOM: 0px; MARGIN: 0px; PAddING-TOP: 0px
}
.Nicky .hiddencontent {
    DISPLAY: none
}
-->
</style>

<!-- Tab函数 -->
<SCRIPT type=text/javascript>
    <!-- 定义Tab的个数 -->
    tabCount = 4;
    function changeTab(tabIndex)
    {
        for (i = 1; i <= tabCount; i++)
        {
            tab = document.getElementById("NickyTab" + i);
            content = document.getElementById("NickyContent" + i);
            
            if (i == tabIndex)
            {
                tab.className = "active";
                content.className = "activecontent";
            }
            else
            {
                tab.className = "";
                content.className = "hiddencontent";
            }
        }
    }
</SCRIPT>
</head>
<body>
<!-- Div属性，可根据实际需要修改宽度等 -->
<div style="clear:both; margin:auto; width:500px; text-align:left">
<dl>
  <DT>
  <dd class=Nicky>
  <UL id=tabmenu>
    <li><a class=active id=NickyTab1 onmouseover=changeTab(1); onclick="return false;" href="#">Nicky 1</a>
    <li><a id=NickyTab2 onmouseover=changeTab(2); onclick="return false;" href="#">Nicky 2</a>
    <li><a id=NickyTab3 onmouseover=changeTab(3); onclick="return false;" href="#">Nicky 3</a>
    <li><a id=NickyTab4 onmouseover=changeTab(4); onclick="return false;" href="#">Nicky 4</a> </li></UL>
  <div class=activecontent id=NickyContent1>
  <ol>
    <li><a href="#"  target=_blank>枫叶教你做网页</a>
    <li><a href="#"  target=_blank>枫叶教你做网页</a>
    <li><a href="#"  target=_blank>枫叶教你做网页</a>
    <li><a href="#"  target=_blank>枫叶教你做网页</a>
    <li><a href="#"  target=_blank>枫叶教你做网页</a>
    <li><a href="#"  target=_blank>枫叶教你做网页</a>
    <li><a href="#"  target=_blank>枫叶教你做网页</a>
    <li><a href="#"  target=_blank>枫叶教你做网页</a>
    <li><a href="#"  target=_blank>枫叶教你做网页</a>
    <li><a href="#"  target=_blank>枫叶教你做网页</a></li></ol></div>

  <div class=hiddencontent id=NickyContent2>
  <ol>
    <li><a href="#"  target=_blank>网页其实很简单</a>
    <li><a href="#"  target=_blank>网页其实很简单</a>
    <li><a href="#"  target=_blank>网页其实很简单</a>
    <li><a href="#"  target=_blank>网页其实很简单</a>
    <li><a href="#"  target=_blank>网页其实很简单</a>
    <li><a href="#"  target=_blank>网页其实很简单</a>
    <li><a href="#"  target=_blank>网页其实很简单</a>
    <li><a href="#"  target=_blank>网页其实很简单</a>
    <li><a href="#"  target=_blank>网页其实很简单</a>
    <li><a href="#"  target=_blank>网页其实很简单</a></li></ol></div>

  <div class=hiddencontent id=NickyContent3>
  <ol>
    <li><a href="#"  target=_blank>电脑爱好者俱乐部提供</a>
    <li><a href="#"  target=_blank>电脑爱好者俱乐部提供</a>
    <li><a href="#"  target=_blank>电脑爱好者俱乐部提供</a>
    <li><a href="#"  target=_blank>电脑爱好者俱乐部提供</a>
    <li><a href="#"  target=_blank>电脑爱好者俱乐部提供</a>
    <li><a href="#"  target=_blank>电脑爱好者俱乐部提供</a>
    <li><a href="#"  target=_blank>电脑爱好者俱乐部提供</a>
    <li><a href="#"  target=_blank>电脑爱好者俱乐部提供</a>
    <li><a href="#"  target=_blank>电脑爱好者俱乐部提供</a>
    <li><a href="#"  target=_blank>电脑爱好者俱乐部提供</a></li></ol></div>

  <div class=hiddencontent id=NickyContent4>
  <ol>
    <li><a href="#"  target=_blank>手把手教导，没有学不会的</a>
    <li><a href="#"  target=_blank>手把手教导，没有学不会的</a>
    <li><a href="#"  target=_blank>手把手教导，没有学不会的</a>
    <li><a href="#"  target=_blank>手把手教导，没有学不会的</a>
    <li><a href="#"  target=_blank>手把手教导，没有学不会的</a>
    <li><a href="#"  target=_blank>手把手教导，没有学不会的</a>
    <li><a href="#"  target=_blank>手把手教导，没有学不会的</a>
    <li><a href="#"  target=_blank>手把手教导，没有学不会的</a>
    <li><a href="#"  target=_blank>手把手教导，没有学不会的</a>
    <li><a href="#"  target=_blank>手把手教导，没有学不会的</a></li></ol></div>
</dd></dl>
</div>
</body>
</html>
回复

使用道具 举报

ROCKY
发表于 2009-11-22 18:05:08 | 显示全部楼层 IP:菲律宾
人生就像一杯茶，不会苦一辈子，但总会苦一阵子。
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|最新主题|手机版|微赢网络技术论坛 ( 苏ICP备08020429号 )

GMT+8, 2024-9-30 05:30 , Processed in 0.222315 second(s), 14 queries , Gzip On, MemCache On.

Powered by Discuz! X3.5

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表