`

请您先登录，才能继续操作

符合WEB标准的下拉导航菜单例子

WebCSSJavaScriptXHTMLHTML 
阅读更多

<!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" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css菜单演示</title>


<style type="text/css">
<!--

*{margin:0;padding:0;border:0;}
body {
    font-family: arial, 宋体, serif;
        font-size:12px;
}


#nav {
     line-height: 24px;  list-style-type: none; background:#666;
}

#nav a {
    display: block; width: 80px; text-align:center;
}

#nav a:link  {
    color:#666; text-decoration:none;
}
#nav a:visited  {
    color:#666;text-decoration:none;
}
#nav a:hover  {
    color:#FFF;text-decoration:none;font-weight:bold;
}

#nav li {
    float: left; width: 80px; background:#CCC;
}
#nav li a:hover{
    background:#999;
}
#nav li ul {
    line-height: 27px;  list-style-type: none;text-align:left;
    left: -999em; width: 180px; position: absolute;
}
#nav li ul li{
    float: left; width: 180px;
    background: #F6F6F6;
}


#nav li ul a{
    display: block; width: 156px;text-align:left;padding-left:24px;
}

#nav li ul a:link  {
    color:#666; text-decoration:none;
}
#nav li ul a:visited  {
    color:#666;text-decoration:none;
}
#nav li ul a:hover  {
    color:#F3F3F3;text-decoration:none;font-weight:normal;
    background:#C00;
}

#nav li:hover ul {
    left: auto;
}
#nav li.sfhover ul {
    left: auto;
}
#content {
    clear: left;
}


-->
</style>

<script type=text/javascript><!--//--><![CDATA[//><!--
function menuFix() {
    var sfEls = document.getElementById("nav").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
        this.className+=(this.className.length>0? " ": "") + "sfhover";
        }
        sfEls[i].onMouseDown=function() {
        this.className+=(this.className.length>0? " ": "") + "sfhover";
        }
        sfEls[i].onMouseUp=function() {
        this.className+=(this.className.length>0? " ": "") + "sfhover";
        }
        sfEls[i].onmouseout=function() {
        this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),

"");
        }
    }
}
window.onload=menuFix;

//--><!]]></script>

</head>
<body>


<ul id="nav">
<li><a href="#">产品介绍</a>
    <ul>
    <li><a href="#">产品一</a></li>
    <li><a href="#">产品一</a></li>
    <li><a href="#">产品一</a></li>
    <li><a href="#">产品一</a></li>
    <li><a href="#">产品一</a></li>
    <li><a href="#">产品一</a></li>
    </ul>
</li>
<li><a href="#">服务介绍</a>
    <ul>
    <li><a href="#">服务二</a></li>
    <li><a href="#">服务二</a></li>
    <li><a href="#">服务二</a></li>
    <li><a href="#">服务二服务二</a></li>
    <li><a href="#">服务二服务二服务二</a></li>
    <li><a href="#">服务二</a></li>
    </ul>
</li>
<li><a href="#">成功案例</a>
    <ul>
    <li><a href="#">案例三</a></li>
    <li><a href="#">案例</a></li>
    <li><a href="#">案例三案例三</a></li>
    <li><a href="#">案例三案例三案例三</a></li>
    </ul>
</li>
<li><a href="#">关于我们</a>
    <ul>
    <li><a href="#">我们四</a></li>
    <li><a href="#">我们四</a></li>
    <li><a href="#">我们四</a></li>
    <li><a href="#">我们四111</a></li>
    </ul>
</li>

<li><a href="#">在线演示</a>
    <ul>
    <li><a href="#">演示</a></li>
    <li><a href="#">演示</a></li>
    <li><a href="#">演示</a></li>
    <li><a href="#">演示演示演示</a></li>
    <li><a href="#">演示演示演示</a></li>
    <li><a href="#">演示演示</a></li>
    <li><a href="#">演示演示演示</a></li>
    <li><a href="#">演示演示演示演示演示</a></li>
    </ul>
</li>
<li><a href="#">联系我们</a>
    <ul>
    <li><a href="#">联系联系联系联系联系</a></li>
    <li><a href="#">联系联系联系</a></li>
    <li><a href="#">联系</a></li>
    <li><a href="#">联系联系</a></li>
    <li><a href="#">联系联系</a></li>
    <li><a href="#">联系联系联系</a></li>
    <li><a href="#">联系联系联系</a></li>
    </ul>
</li>

</ul>

</body>
</html>

分享到：
| 利用Myeclipse快速开发struts应用程序
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Web弹出下拉菜单

    同时，键盘用户应该能通过`Tab`键和方向键导航菜单。 总的来说，创建一个类似淘宝右上角的Web弹出下拉菜单需要结合HTML、CSS和JavaScript的知识，并考虑到响应式设计、性能优化和可访问性等因素。通过不断学习和...

    一个很好用的web下拉式菜单插件

    本篇文章将深入探讨一个名为“jQuery PopMenu”的高效web下拉式菜单插件，它是一个基于JavaScript库jQuery构建的解决方案，提供了丰富的自定义选项，让开发者可以轻松创建符合网站设计风格的下拉菜单。 首先，我们...

    CSS百度百科下拉导航菜单.zip

    "CSS百度百科下拉导航菜单"是一个使用CSS技术实现的交互式菜单，它模仿了百度百科网站的下拉导航效果。当用户将鼠标悬停在一级菜单上时，二级菜单会动态地滑出显示，提供更具体的链接选项。这种设计不仅美观，而且...

    Bootstrap响应式多级下拉导航菜单.zip

    Bootstrap响应式多级下拉导航菜单是Web开发中常见的元素，尤其在构建现代网页时，它为用户提供了一种直观且易于操作的界面。这个压缩包包含的资源是基于Bootstrap 3.3.6版本，一个非常流行的开源前端框架，以及...

    js简洁下拉菜单导航

    在网页设计中，导航菜单是不可或缺的部分，它帮助用户快速浏览和访问网站的不同部分。"js简洁下拉菜单导航"就是一个专为初学者设计的、易于理解和应用的下拉菜单解决方案。这个方案主要依赖于JavaScript（更具体地说...

    Bootstrap左侧下拉三级菜单导航

    `fonts`目录可能包含Bootstrap所用到的Web字体，如Glyphicons图标集，这些图标常被用作导航菜单中的指示符号。 `dist`目录通常包含Bootstrap框架的编译和压缩版本，方便在生产环境中使用。这可能包括了压缩后的CSS...

    蓝色的js阿里云导航菜单特效

    在这个场景中，"蓝色的js阿里云导航菜单特效"是一个典型的使用JavaScript增强用户体验的例子。导航菜单是网站设计中的核心元素，它帮助用户快速找到他们感兴趣的内容或功能。下面我们将详细探讨JavaScript如何实现...

    简单的CSS 下拉导航菜单实现代码

    本文档介绍了一个通过纯CSS实现下拉导航菜单的教程。下拉菜单是网页设计中常见的一种交互式导航元素，用户在将鼠标悬停在主菜单项上时，可以显示一个或多个子菜单项。这种设计对于节省页面空间和增强用户体验非常有...

    HTML各种导航栏例子

    HTML，全称HyperText Markup Language，是用于...学习并掌握这些例子，你就能构建出符合现代网页标准的导航栏，提升用户体验。同时，不要忘记关注无障碍性（Accessibility），确保所有用户都能方便地使用你的导航栏。

    js+css3支持多选下拉城市菜单选择代码

    总的来说，"js+css3支持多选下拉城市菜单选择代码"是一个利用现代Web技术优化用户交互的例子，它展示了JavaScript和CSS3在网页动态效果和用户体验提升方面的强大能力。对于开发者来说，理解和掌握这种技术可以提升...

    CSS3宽屏滑动下拉菜单导航特效.zip

    【CSS3宽屏滑动下拉菜单导航特效】是一种现代网页设计中常见的交互元素，它利用CSS3的新特性实现了一种动态、响应式的导航菜单。这个特效的核心在于，当用户将鼠标悬停在主菜单项上时，二级子菜单会以平滑、过渡自然...

    javascript经典特效---有说明的下拉菜单.rar

    在JavaScript的世界里，下拉菜单是一种常见的交互元素，它能够有效地节省页面空间并提供丰富的导航选项。本资源“javascript经典特效---有说明的下拉菜单.rar”聚焦于使用JavaScript实现具有说明性的下拉菜单效果，...

    20个超漂亮实用的纯CSS web2.0导航菜单模板

    在Web2.0时代，CSS被广泛用来创建动态、交互式的用户界面，其中导航菜单就是典型的例子。 这些纯CSS导航菜单模板的设计理念主要体现在以下几个方面： 1. **响应式设计**：许多模板都考虑到了不同设备的屏幕尺寸，...

    jQuery简洁下拉菜单导航

    在Web开发中，用户友好的导航菜单是任何网站成功的关键因素之一。jQuery，一个轻量级、高性能的JavaScript库，提供了丰富的功能，使得创建动态、交互式的下拉菜单变得异常简单。本教程将深入探讨如何使用jQuery实现...

    超炫3D下拉菜单Makisu

    总的来说，Makisu是3D下拉菜单的一个优秀解决方案，它结合了先进的Web技术与创新的设计理念，为网页设计师和开发者提供了一种新的导航元素选择。无论是在电子商务网站、企业官网还是个人博客，Makisu都能帮助提升...

    最简单树形下拉菜单

    在网页设计中，树形下拉菜单是一种常见的交互元素，它可以帮助用户在多级结构的数据中进行导航。本文将详细讲解如何创建一个“最简单树形下拉菜单”，以及实现这个功能所需的关键技术。 首先，我们需要理解树形下拉...

    frameset和js下拉菜单

    在后台管理页面中，frameset常用于创建稳定的导航结构，如侧边栏菜单，而JavaScript下拉菜单可以提供灵活的选项选择，根据用户的选择加载不同的数据或功能。通过合理组合frameset和JavaScript下拉菜单，可以构建出...

    flash导航菜单栏.rar

    "Flash导航菜单栏"是早期Web设计中一种流行的实现方式，它利用Adobe Flash技术创建动态、交互式的菜单效果，给用户带来丰富的视觉体验。本资源包含20多种不同风格的Flash导航菜单栏实例，旨在为设计师提供灵感和学习...

    漂亮顶部下拉菜单

    在这个例子中，可能是用jQuery的`show()`和`hide()`方法来控制下拉菜单的可见性，以及可能使用了`slideDown()`和`slideUp()`实现平滑的展开和收起效果。 5. **图片资源**: 文件名如`desc.png`和`title.png`可能包含...

    jquery简洁的响应式导航下拉菜单代码

    在网页设计中，导航菜单是用户与网站交互的重要部分，尤其在现代的Web开发中，响应式设计已经成为不可或缺的元素。响应式导航菜单允许页面在不同设备和屏幕尺寸上提供良好的用户体验，无论用户是在台式机、平板电脑...

Magicbox
Global site tag (gtag.js) - Google Analytics