js多级菜单样式

最新推荐文章于 2024-05-09 00:14:24 发布
最新推荐文章于 2024-05-09 00:14:24 发布
阅读量2.4k 收藏
点赞数
分类专栏： JAVASCRIPT/CSS

-----------------------------------------------------------------------index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jquery横向下拉菜单导航</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/common.js" type="text/javascript"></script>
</head>
<body>
<h2>Professional dropdown </h2>
<span class="preload1"></span> <span class="preload2"></span>
<ul id="nav">
  <li class="top"><a href="#nogo1" class="top_link"><span>Home</span></a></li>
  <li class="top"><a href="#nogo2" id="products" class="top_link"><span class="down">Products</span></a>
    <ul class="sub">
      <li><a href="#nogo3" class="fly">Cameras</a>
        <ul>
          <li><a href="#nogo4">Nikon</a></li>
          <li><a href="#nogo5">Minolta</a></li>
          <li><a href="#nogo6">Pentax</a></li>
        </ul>
      </li>
      <li class="mid"><a href="#nogo7" class="fly">Lenses</a>
        <ul>
          <li><a href="#nogo8">Wide Angle</a></li>
          <li><a href="#nogo9">Standard</a></li>
          <li><a href="#nogo10">Telephoto</a></li>
          <li><a href="#nogo11" class="fly">Zoom</a>
            <ul>
              <li><a href="#nogo12">35mm to 125mm</a></li>
              <li><a href="#nogo13">50mm to 250mm</a></li>
              <li><a href="#nogo14">125mm to 500mm</a></li>
            </ul>
          </li>
          <li><a href="#nogo15">Mirror</a></li>
          <li><a href="#nogo16" class="fly">Non standard</a>
            <ul>
              <li><a href="#nogo17">Bayonet mount</a></li>
              <li><a href="#nogo18">Screw mount</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#nogo19">Flash Guns</a></li>
      <li><a href="#nogo20">Tripods</a></li>
      <li><a href="#nogo21">Filters</a></li>
    </ul>
  </li>
  <li class="top"><a href="#nogo22" id="services" class="top_link"><span class="down">Services</span></a>
    <ul class="sub">
      <li><a href="#nogo23">Printing</a></li>
      <li><a href="#nogo24">Photo Framing</a></li>
      <li><a href="#nogo25">Retouching</a></li>
      <li><a href="#nogo26">Archiving</a></li>
    </ul>
  </li>
  <li class="top"><a href="#nogo27" id="contacts" class="top_link"><span class="down">Contacts</span></a>
    <ul class="sub">
      <li><a href="#nogo28">Support</a></li>
      <li><a href="#nogo29" class="fly">Sales</a>
        <ul>
          <li><a href="#nogo30">USA</a></li>
          <li><a href="#nogo31">Canadian</a></li>
          <li><a href="#nogo32">South American</a></li>
          <li><a href="#nogo33" class="fly">European</a>
            <ul>
              <li><a href="#nogo34" class="fly">British</a>
                <ul>
                  <li><a href="#nogo35">London</a></li>
                  <li><a href="#nogo36">Liverpool</a></li>
                  <li><a href="#nogo37">Glasgow</a></li>
                  <li><a href="#nogo38" class="fly">Bristol</a>
                    <ul>
                      <li><a href="#nogo39">Redland</a></li>
                      <li><a href="#nogo40">Hanham</a></li>
                      <li><a href="#nogo41">Eastville</a></li>
                    </ul>
                  </li>
                  <li><a href="#nogo42">Cardiff</a></li>
                  <li><a href="#nogo43">Belfast</a></li>
                </ul>
              </li>
              <li><a href="#nogo44">French</a></li>
              <li><a href="#nogo45">German</a></li>
              <li><a href="#nogo46">Spanish</a></li>
            </ul>
          </li>
          <li><a href="#nogo47">Australian</a></li>
          <li><a href="#nogo48">Asian</a></li>
        </ul>
      </li>
      <li><a href="#nogo49">Buying</a></li>
      <li><a href="#nogo50">Photographers</a></li>
      <li><a href="#nogo51">Stockist</a></li>
      <li><a href="#nogo52">General</a></li>
    </ul>
  </li>
  <li class="top"><a href="#nogo53" id="shop" class="top_link"><span class="down">Shop</span></a>
    <ul class="sub">
      <li><a href="#nogo54">Online</a></li>
      <li><a href="#nogo55">Catalogue</a></li>
      <li><a href="#nogo56">Mail Order</a></li>
    </ul>
  </li>
  <li class="top"><a href="#nogo57" id="privacy" class="top_link"><span>Privacy Policy</span></a></li>
</ul>
</body>
</html>
-----------------------------------------------------------------------common.js

stuHover = function() {
 var cssRule;
 var newSelector;
 for (var i = 0; i < document.styleSheets.length; i++)
  for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
   {
   cssRule = document.styleSheets[i].rules[x];
   if (cssRule.selectorText.indexOf("LI:hover") != -1)
   {
     newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
    document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
   }
  }
 var getElm = document.getElementById("nav").getElementsByTagName("LI");
 for (var i=0; i<getElm.length; i++) {
  getElm[i].οnmοuseοver=function() {
   this.className+=" iehover";
  }
  getElm[i].οnmοuseοut=function() {
   this.className=this.className.replace(new RegExp(" iehover\\b"), "");
  }
 }
}
if (window.attachEvent) window.attachEvent("onload", stuHover);

-----------------------------------------------------------------------style.css

.preload1 {
 background: url(../images/three_1.gif);
}
.preload2 {
 background: url(../images/three_1a.gif);
}
#nav {
 padding:0;
 margin:0;
 list-style:none;
 height:38px;
 background:#fff url(../images/three_0.gif) repeat-x;
 position:relative;
 z-index:500;
 font-family:arial, verdana, sans-serif;
}
#nav li.top {
 display:block;
 float:left;
 height:38px;
}
#nav li a.top_link {
 display:block;
 float:left;
 height:35px;
 line-height:33px;
 color:#ccc;
 text-decoration:none;
 font-size:11px;
 font-weight:bold;
 padding:0 0 0 12px;
 cursor:pointer;
 background: url(../images/three_0.gif);
}
#nav li a.top_link span {
 float:left;
 display:block;
 padding:0 24px 0 12px;
 height:35px;
 background: url(../images/three_0.gif) right top no-repeat;
}
#nav li a.top_link span.down {
 float:left;
 display:block;
 padding:0 24px 0 12px;
 height:35px;
 background: url(../images/three_0a.gif) no-repeat right top;
}
#nav li:hover a.top_link {
 color:#fff;
 background: url(../images/three_1.gif) no-repeat;
}
#nav li:hover a.top_link span {
 background:url(../images/three_1.gif) no-repeat right top;
}
#nav li:hover a.top_link span.down {
 background:url(../images/three_1a.gif) no-repeat right top;
}
/* Default list styling */

#nav li:hover {
 position:relative;
 z-index:200;
}
#nav li:hover ul.sub {
 left:1px;
 top:38px;
 background: #bbd37e;
 padding:3px;
 border:1px solid #5c731e;
 white-space:nowrap;
 width:90px;
 height:auto;
 z-index:300;
}
#nav li:hover ul.sub li {
 display:block;
 height:20px;
 position:relative;
 float:left;
 width:90px;
 font-weight:normal;
}
#nav li:hover ul.sub li a {
 display:block;
 font-size:11px;
 height:18px;
 width:88px;
 line-height:18px;
 text-indent:5px;
 color:#000;
 text-decoration:none;
 border:1px solid #bbd37e;
}
#nav li ul.sub li a.fly {
 background:#bbd37e url(../images/arrow.gif) 80px 6px no-repeat;
}
#nav li:hover ul.sub li a:hover {
 background:#6a812c;
 color:#fff;
 border-color:#fff;
}
#nav li:hover ul.sub li a.fly:hover {
 background:#6a812c url(../images/arrow_over.gif) 80px 6px no-repeat;
 color:#fff;
}
#nav li:hover li:hover ul, #nav li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover ul, #nav li:hover li:hover li:hover li:hover li:hover ul {
 left:90px;
 top:-4px;
 background: #bbd37e;
 padding:3px;
 border:1px solid #5c731e;
 white-space:nowrap;
 width:90px;
 z-index:400;
 height:auto;
}
#nav ul, #nav li:hover ul ul, #nav li:hover li:hover ul ul, #nav li:hover li:hover li:hover ul ul, #nav li:hover li:hover li:hover li:hover ul ul {
 position:absolute;
 left:-9999px;
 top:-9999px;
 width:0;
 height:0;
 margin:0;
 padding:0;
 list-style:none;
}
#nav li:hover li:hover a.fly, #nav li:hover li:hover li:hover a.fly, #nav li:hover li:hover li:hover li:hover a.fly, #nav li:hover li:hover li:hover li:hover li:hover a.fly {
 background:#6a812c url(../images/arrow_over.gif) 80px 6px no-repeat;
 color:#fff;
 border-color:#fff;
}
#nav li:hover li:hover li a.fly, #nav li:hover li:hover li:hover li a.fly, #nav li:hover li:hover li:hover li:hover li a.fly {
 background:#bbd37e url(../images/arrow.gif) 80px 6px no-repeat;
 color:#000;
 border-color:#bbd37e;
}

执行效果如下：

 

菜菜_JING
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
多级联动菜单（js）
qq_59517599的博客
07-15 1518
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>多.
JS案例：简单的多级菜单实现
02-28 1917
代码附上： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&amp
Web前端最全前端入门篇（四十六）JS应用1二级下拉菜单问题记录(2)，系列教学
最新发布
2401_84434880的博客
05-09 661
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。
35个javascript菜单菜单样式
12-17
js菜单，菜单，菜单样式 js菜单，菜单，菜单样式
13个漂亮的JS导航菜单
01-07
13个漂亮的JS导航菜单 13种样式,个个好看、实用， 欢迎下载
最好的CSS+JS多级弹出菜单
12-13
最好的CSS+JS多级弹出菜单 横向和下拉两种菜单，支持多级，设置方便！
基于JavaScript实现多级菜单效果
10-19
本篇文章将详细介绍如何使用JavaScript实现一个功能完备的多级菜单。 首先，我们来看HTML结构。在提供的代码片段中，`<ul>`元素被用来构建菜单的基础结构。每个`<li>`元素代表一级菜单项，而二级、三级甚至四级菜单...
jQuery 多级菜单样式
01-23
jQuery 多级菜单样式是一种常见的网页交互设计，用于构建层次清晰、操作便捷的导航系统。在Web开发中，jQuery库因其简洁的语法和强大的功能，常被用来实现动态效果，包括创建多级下拉菜单。下面我们将深入探讨如何...
多级菜单样式
08-20
创建多级菜单样式涉及HTML、CSS（层叠样式表）和可能的JavaScript或jQuery。以下是一些关于如何实现这一功能的关键知识点： 1. **HTML 结构**：首先，你需要使用HTML来构建菜单的基础框架。这通常包括`<ul>`（无序...
JS.rar_多级菜单
09-21
本资源"JS.rar_多级菜单"提供了一个使用CSS和JavaScript实现的多级弹出菜单的解决方案。下面将详细探讨这个主题。 一、CSS在多级菜单中的作用 CSS（层叠样式表）是用于控制网页外观和布局的样式语言。在多级菜单的...
NotesForMenu.rar_javascript_多级菜单
09-23
在JavaScript的世界里，多级菜单是一种常见的用户界面元素，它被广泛用于网站导航、应用程序的侧边栏或者下拉选项中。"NotesForMenu.rar"这个压缩包文件显然是关于如何用JavaScript实现多级菜单的一个教程或示例集合...
js实现二级菜单
05-31
js实现导航栏二级菜单，极丑，极简单，有详细的中文注释，主要是说明原理供自己备用，感兴趣者、初学者可下载，高手飘过。
三级级联菜单（JS+HTML)
01-21
自己在二级基础上修改的，亲测可用，欢迎下载！
js实现网页多级级联菜单代码
10-23
主要介绍了js实现网页多级级联菜单代码,涉及javascript基于数组动态构造多级级联菜单的技巧,非常具有实用价值,需要的朋友可以参考下
js的各种样式的菜单
11-27
web开发中的各种菜单都能找到。非常好用，希望能给大家帮助。
js左侧菜单栏样式
10-01
js左侧菜单栏含二级菜单样式，平滑移动选择，只含左菜单样式
简单的js展开菜单
Junit的博客
07-30 1382
简单的js展开菜单 &lt;%@ page language="java" import="java.util.*" contentType="text/html"     pageEncoding="UTF-8"%&gt; &lt;%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%&
分别用css、JS、jQuery实现二级菜单、三级菜单
热门推荐
SmileRM的博客
12-19 1万+
先看一下效果图，再决定是否接着往下看二级菜单的实现，先编写HTML结构<ul class="t1 fl"> <li>一级菜单 <ul class="t2"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单 <ul cla
js实现三级菜单的制作
Wangdanting123的博客
05-08 8222
js实现三级菜单的制作
html js树形图多级菜单
12-30
HTML和JavaScript可以用来创建树形图和多级菜单。 首先，我们可以使用HTML的和标签来创建树形结构。每个标签表示树的一个节点，可以在其中嵌套其他和标签来表示子节点。使用CSS样式可以对树形结构进行美化，如设置...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值