`

jquery的横向二级菜单

jQueryJ#MicrosoftXHTMLHTML 
阅读更多
<!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>

<title>Horizontal Drop Down Menus</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<script type=text/javascript>

/**

*菜单的构造,需要绑定到onload

*/

startList = function() {

if (document.all&&document.getElementById) {

dropmenuRoot = document.getElementById("dropmenu");

   for (i=0; i<dropmenuRoot.childNodes.length; i++) {

    node = dropmenuRoot.childNodes[i];

    if (node.nodeName=="LI") {

     node.onmouseover=function() {

     this.className+=" over";

     //开始灌水

       for(j=0;j<this.childNodes.length;j++){

       if (this.childNodes[j].nodeName=="UL"){

        if (this.childNodes[j].childNodes[0].nodeName=="LI"){

         if (this.offsetLeft+this.childNodes[j].childNodes.length*

            this.childNodes[j].childNodes[0].offsetWidth-dropmenuRoot.offsetLeft>

            dropmenuRoot.offsetWidth)

        {

        //菜单的长度

        var len=this.childNodes[j].childNodes.length*

            this.childNodes[j].childNodes[0].offsetWidth;

        //给ul设置宽度如果子菜单比较多，大于容器的宽度，那么ul的宽度就是容器的宽度

        (len>dropmenuRoot.offsetWidth) ? this.childNodes[j].style.width=

            776+"px" : this.childNodes[j].style.width=len+"px";

        len =this.offsetLeft+len-dropmenuRoot.offsetLeft-dropmenuRoot.offsetWidth;

        (len>this.offsetLeft-dropmenuRoot.offsetLeft) ? this.childNodes[j].style.marginLeft=

            -(this.offsetLeft-dropmenuRoot.offsetLeft) : this.childNodes[j].style.marginLeft=
            -len+"px";       

        }

        }

       }

      }

    }

    //灌水完毕

    node.onmouseout=function() {

     this.className=this.className.replace(" over", "");

    }

   }

}

}

}

window.onload=startList;

</script>

</head>

<style type="text/css">

body 

{

     font: normal 11px verdana; background: #45b97c;

     position:absolute

}

ul { margin: 0; padding: 0; }

li { list-style-position: outside; list-style: none;}

a { text-decoration: none; color: #666;}

ul#dropmenu,ul#dropmenu ul{

    margin: 0 auto;

    text-align: left;

    padding: 0;

    list-style: none;

    z-index: 99;

}

ul#dropmenu {

    width: 774px;

    display: block;

    height: 24px;

    clear: both;

    border: 1px solid #ccc;

    text-align: center;

    background: #fff;

}

ul#dropmenu li {

    position: relative;

    z-index: 999;

    float: left;

}

ul#dropmenu ul li{

    float: left;

    display: block;

}

ul#dropmenu ul {

    /*width: 122px;

    w\idth: 120px;*/

    height: auto;

    position: absolute;

    text-align: left;

    left: 0px;

    display: none;

    border: solid 1px #ccc;

}

/*当鼠标在子菜单和父菜单上时，父菜单的样式*/

ul#dropmenu li.over a,ul#dropmenu li:hover a{

    border-color: #ccc;

    background: #c00;

    color: #fff;

}

/*将子菜单的样式清除*/

ul#dropmenu li.over ul a,ul#dropmenu li:hover ul a{

    font-weight: normal;

    color: #666;

    background: #fff;;

}

/*子菜单的hover样式*/

ul#dropmenu li.over ul a:hover,ul#dropmenu li:hover ul a:hover{

    font-weight: normal;

    color: #cc0000;

    font-weight: bold;

    background: #f6f6f6;

}

/* Styles for Menu Items */

ul#dropmenu a {

    display: block;

    padding: 0 0 0 10px;

    width: 106px;

    w\idth: 96px;

    color: #666;

    line-height: 24px;

}

ul#dropmenu ul li{

    width: 110px;

    border: 0;

}

/* End */

ul#dropmenu ul a

{

     /*   透明*/

    FILTER: progid:DXImageTransform.Microsoft.Alpha(opacity=70);  

    padding: 2px 0px 2px 10px;

    border: 0;

    width: 120px;

    w\idth: 110px;/* Sub Menu Styles */

}

ul#dropmenu li:hover ul,ul#dropmenu li.over ul {

    display: block; /* The magic */

}

</style>

<body>

<div id="nav">

<ul id="dropmenu">

    <li><a href="#">Home</a></li>

    <li><a href="#">About</a>

      <ul>

        <li><a href="#">History</a></li>

        <li><a href="#">Team</a></li>

        <li><a href="#">Drop Down Menu</a></li>

        <li><a href="#">Offices</a></li>

      </ul>

    </li>

    <li><a href="#">Services</a>

      <ul>

        <li><a href="#">History</a></li>

        <li><a href="#">Team</a></li>

        <li><a href="#">Drop Down Menu</a></li>

        <li><a href="#">Offices</a></li>

      </ul>

    </li>

    <li><a href="#">Home</a></li>

    <li><a href="#">About</a>

      <ul>

        <li><a href="#">History</a></li>

        <li><a href="#">Team</a></li>

        <li><a href="#">Drop Down Menu</a></li>

        <li><a href="#">Offices</a></li>       

        <li><a href="#">History</a></li>

        <li><a href="#">Team</a></li>

      </ul>

    </li>

    <li><a href="#">Services</a>

      <ul>

        <li><a href="#">History</a></li>

        <li><a href="#">Team</a></li>

        <li><a href="#">Drop Down Menu</a></li>

        <li><a href="#">Offices</a></li>

        <li><a href="#">History</a></li>

        <li><a href="#">Team</a></li>

        <li><a href="#">Drop Down Menu</a></li>

        <li><a href="#">Offices</a></li>

        <li><a href="#">History</a></li>

        <li><a href="#">Team</a></li>

        <li><a href="#">Drop Down Menu</a></li>

      </ul>

    </li>

    <li><a href="#">Home</a></li>

</ul>

</div>

</body>

</html>
分享到：
| 购票/转让网址收集
评论
发表评论

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

相关推荐

    Jquery_横向2级菜单

    【jQuery 横向二级菜单】是网页设计中常见的交互元素，主要用于网站导航，提供清晰且高效的用户界面。在本文中，我们将深入探讨如何利用jQuery和CSS创建一个动态的、响应式的横向二级菜单。 首先，我们需要理解...

    jquery滑动横向二级菜单特效.zip

    jquery滑动横向二级菜单特效是一款非常实用的jquery导航菜单，实现了滑动横向二级菜单jquery特效，功能非常简单，几行jquery代码就完成了，主要运用了jquery插件中的slideDown和slideUp方法。

    巧克力jQuery横向二级滑动导航菜单源码，过度平滑，兼容主流浏览器

    这个“巧克力jQuery横向二级滑动导航菜单”源码提供了一种优雅的方式来实现这一目标，它具有平滑的过渡效果，能够适应各种主流浏览器，提升了网站的交互性和可用性。 首先，jQuery是一个广泛使用的JavaScript库，它...

    jQuery滑动横向二级导航菜单.zip

    本项目“jQuery滑动横向二级导航菜单”聚焦于创建一个动态且响应式的二级菜单，利用jQuery库的动画效果，提升用户体验。下面将详细阐述这个项目所涉及的核心知识点。 1. **jQuery库**：jQuery是一个广泛使用的...

    jquery蓝色圆角横向二级导航菜单代码

    【jQuery蓝色圆角横向二级导航菜单代码】是一个用于创建具有美观设计和交互功能的网站导航栏的实现。这个代码利用了jQuery库的强大功能，结合HTML、CSS和JavaScript，为用户提供了一个直观且易于操作的二级菜单。...

    JQuery横向纵向导航菜单

    - 在这里，二级菜单（子菜单）隐藏在主菜单项下，可以通过CSS设置`display:none`来实现。 2. **CSS样式**： - 使用CSS定义菜单的基本样式，包括颜色、字体、边距等，以及隐藏/显示子菜单的规则。例如： ```css ...

    js实现横向弹出二级菜单

    "js实现横向弹出二级菜单"是一种常见的交互设计技术，尤其适用于英文网站，因为英文单词通常较长，横向展示能更有效地利用空间，提供清晰的视觉层次。这个技术的核心是利用JavaScript语言来动态控制菜单的显示与隐藏...

    jquery制作一个横向二级导航下拉菜单

    通过以上步骤，我们可以创建一个简洁而有效的横向二级导航下拉菜单。使用jQuery不仅简化了代码，还使我们能够轻松实现复杂的交互效果。在实际项目中，可以根据需求进行调整，以达到最佳的用户体验。

    jquery下拉横向导航菜单

    假设二级菜单的某个链接`&lt;a href="subpage.html"&gt;Sub Page&lt;/a&gt;`，可以这样实现： ```javascript $("a.load-subpage").click(function(e) { e.preventDefault(); // 阻止默认的跳转行为 $("#content-container")....

    jquery导航菜单制作横向二级导航菜单设置当前频道高亮特效

    本文将详细介绍如何使用jQuery来创建一个具有横向二级导航菜单，并实现当前频道高亮的特效。 首先，我们需要理解jQuery的基本概念。jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件处理、...

    jquery制作导航菜单带有横向二级导航菜单效果

    本教程将详述如何使用jQuery创建一个带有横向二级导航菜单的效果，以提升用户体验和网站的互动性。 首先，我们需要理解jQuery的基本概念。jQuery是一个轻量级的JavaScript库，简化了HTML文档遍历、事件处理、动画...

    jQuery横向二级滑动导航菜单

    &lt;!... ; charset=gb2312" /&gt; 代码,菜单导航,JS广告...此代码内容为巧克力jQuery横向二级滑动导航菜单，属于站长常用代码，更多菜单导航代码请访问懒人图库JS代码频道。" /&gt; 巧克力jQuery横向二级滑动导航菜单_懒人图库 ...

    jQuery横向三级下拉菜单

    `jQuery`作为一款广泛使用的JavaScript库，提供了丰富的功能来实现各种复杂的下拉菜单效果，包括横向和多级（如二级、三级）下拉菜单。下面我们将深入探讨`jQuery`实现横向三级下拉菜单的相关知识点。 1. **jQuery...

    jquery导航栏样式鼠标悬停二级下拉菜单代码

    jquery导航栏样式鼠标悬停二级下拉菜单代码 jquery导航栏样式鼠标悬停二级下拉菜单代码 jquery导航栏样式鼠标悬停二级下拉菜单代码 jquery导航栏样式鼠标悬停二级下拉菜单代码

    jquery经典二级横向导航菜单代码6

    在这个项目中，jQuery被用来创建动态的二级下拉菜单，这种菜单在鼠标悬停一级菜单项时会优雅地滑出，提供二级菜单的内容。 1. **DOM操作**：在jQuery中，通过选择器选取HTML元素变得非常简单。例如，`$("#menu")`...

    jquery+css实现的简洁漂亮的横向二级菜单

    "jQuery + CSS 实现的简洁漂亮的横向二级菜单"是一个利用这两种技术构建高效、美观且易于使用的菜单系统的实例。jQuery 是一个轻量级的 JavaScript 库，而 CSS 则用于样式控制和布局，两者结合能实现动态交互效果，...

    jquery经典二级横向导航菜单代码5

    这需要利用jQuery的事件监听（如`mouseenter`和`mouseleave`）以及DOM操作（如`show`和`hide`）来控制二级菜单的显示和隐藏。 4. **响应式设计**：为了适应不同设备和屏幕尺寸，这个导航菜单应该具有响应性。可以...

    横向往下滑动下拉的jQuery二级菜单代码.rar

    在这个名为"横向往下滑动下拉的jQuery二级菜单代码.rar"的压缩包中，包含了一个实现横向滑动下拉的二级菜单的jQuery代码示例，特别适合于那些需要增强导航栏功能的大中型网站。 这个二级菜单的设计具有鲜明的视觉...

    JS横向二级导航菜单

    【JS横向二级导航菜单】是一种常见的网页交互设计，主要用于网站的顶部或侧边栏，提供主分类和子分类的层次结构，便于用户快速浏览和访问网站内容。在本项目中，我们将探讨如何利用JavaScript（JS）和CSS来实现这样...

    jquery+css实现横向二级下拉菜单

    本教程将深入探讨如何使用jQuery和CSS技术实现一个流畅且效果出色的横向二级下拉菜单。 首先，我们需要理解jQuery和CSS在创建这种菜单中的作用。jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理以及...

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