JS CSS는 6단계 웹사이트 탐색 기본 메뉴 effect_javascript 기술을 구현합니다.-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JS CSS는 6단계 웹사이트 탐색 기본 메뉴 effect_javascript 기술을 구현합니다.

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:37 PM

cssjs사이트 탐색메뉴

本文实例讲述了JS+CSS实现六级网站导航主菜单效果。分享给大家供大家参考。具体如下：

这是一款JS+CSS实现支持6级的网站导航主菜单，级级相信够大家用了，外观蓝色风格，也是使用最多的一种菜单颜色，而且菜单的兼容性非常好，支持IE6\IE7\IE8，火狐、GG浏览器等不同内核的主流浏览器。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-css-6l-web-nav-menu-demo/

具体代码如下：

<!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>CSS六级导航菜单</title>
<style>
.preload1 {background: url(images/blank_over.gif);}
.preload2 {background: url(images/blank_overa.gif);}
#nav {padding:0; margin:0; list-style:none; height:36px; background:#fff; position:relative; z-index:500; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:36px; line-height:27px; color:#ccc; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(images/blank.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:36px;background:url(images/blank.gif) right top;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:36px; background:url(images/blanka.gif) no-repeat right top;}
#nav li a.top_link:hover {color:#fff; background: url(images/blank_over.gif) no-repeat;}
#nav li a.top_link:hover span {background:url(images/blank_over.gif) no-repeat right top;}
#nav li a.top_link:hover span.down {background:url(images/blank_overa.gif) no-repeat right top;}
#nav li:hover > a.top_link {color:#fff; background: url(images/blank_over.gif) no-repeat;}
#nav li:hover > a.top_link span {background:url(images/blank_over.gif) no-repeat right top;}
#nav li:hover > a.top_link span.down {background:url(images/blank_overa.gif) no-repeat right top;}
#nav li:hover {position:relative; z-index:200;}
#nav ul, 
#nav li:hover ul ul,
#nav li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover ul.sub
{left:0; top:31px; background: #fff; padding:3px; border:1px solid #3a93d2; 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:20px; width:90px; line-height:20px; text-indent:5px; color:#000; text-decoration:none;}
#nav li ul.sub li a.fly{background:#fff url(images/arrow.gif) 80px 7px no-repeat;}
#nav li:hover ul.sub li a:hover {background:#3a93d2; color:#fff;}
#nav li:hover ul.sub li a.fly:hover{background:#3a93d2 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;}
#nav li:hover ul li:hover > a.fly {background:#3a93d2 url(images/arrow_over.gif) 80px 7px no-repeat; color:#fff;} 
#nav li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul,
#nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{left:90px; top:-4px; background: #fff; padding:3px; border:1px solid #3a93d2; white-space:nowrap; width:90px; z-index:400; height:auto;}
</style>
<script type="text/javascript">
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].onmouseover=function() {
  this.className+=" iehover";
 }
 getElm[i].onmouseout=function() {
  this.className=this.className.replace(new RegExp(" iehover\\b"), "");
 }
 }
}
if (window.attachEvent) window.attachEvent("onload", stuHover);
</script>
</head>
<body>
<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>
 </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="#nogo25">Retouching</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>

希望本文所述对大家的JavaScript程序设计有所帮助。

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

如何使用JS和百度地图实现地图平移功能Nov 21, 2023 am 10:00 AM

如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台，在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能，并提供具体的代码示例。一、准备工作使用百度地图API前，首先需要在百度地图开放平台（http://lbsyun.baidu.com/）上申请一个开发者账号，并创建一个应用。创建完成

js字符串转数组Aug 03, 2023 pm 01:34 PM

js字符串转数组的方法：1、使用“split()”方法，可以根据指定的分隔符将字符串分割成数组元素；2、使用“Array.from()”方法，可以将可迭代对象或类数组对象转换成真正的数组；3、使用for循环遍历，将每个字符依次添加到数组中；4、使用“Array.split()”方法，通过调用“Array.prototype.forEach()”将一个字符串拆分成数组的快捷方式。

如何使用JS和百度地图实现地图热力图功能Nov 21, 2023 am 09:33 AM

如何使用JS和百度地图实现地图热力图功能简介：随着互联网和移动设备的迅速发展，地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式，能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能，并提供具体的代码示例。准备工作：在开始之前，你需要准备以下事项：一个百度开发者账号，并创建一个应用，获取到相应的AP

如何使用JS和百度地图实现地图多边形绘制功能Nov 21, 2023 am 10:53 AM

如何使用JS和百度地图实现地图多边形绘制功能在现代网页开发中，地图应用已经成为常见的功能之一。而地图上绘制多边形，可以帮助我们将特定区域进行标记，方便用户进行查看和分析。本文将介绍如何使用JS和百度地图API实现地图多边形绘制功能，并提供具体的代码示例。首先，我们需要引入百度地图API。可以利用以下代码在HTML文件中导入百度地图API的JavaScript

js中new操作符做了哪些事情Nov 13, 2023 pm 04:05 PM

js中new操作符做了：1、创建一个空对象，这个新对象将成为函数的实例；2、将新对象的原型链接到构造函数的原型对象，这样新对象就可以访问构造函数原型对象中定义的属性和方法；3、将构造函数的作用域赋给新对象，这样新对象就可以通过this关键字来引用构造函数中的属性和方法；4、执行构造函数中的代码，构造函数中的代码将用于初始化新对象的属性和方法；5、如果构造函数中没有返回等等。

用JavaScript模拟实现打字小游戏！Aug 07, 2022 am 10:34 AM

这篇文章主要为大家详细介绍了js实现打字小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。

php可以读js内部的数组吗Jul 12, 2023 pm 03:41 PM

php在特定情况下可以读js内部的数组。其方法是：1、在JavaScript中，创建一个包含需要传递给PHP的数组的变量；2、使用Ajax技术将该数组发送给PHP脚本。可以使用原生的JavaScript代码或者使用基于Ajax的JavaScript库如jQuery等；3、在PHP脚本中，接收传递过来的数组数据，并进行相应的处理即可。

js是什么编程语言？May 05, 2019 am 10:22 AM

js全称JavaScript，是一种具有函数优先的轻量级，直译式、解释型或即时编译型的高级编程语言，是一种属于网络的高级脚本语言；JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式，如函数式编程。

See all articles

핫 AI 도구

뜨거운 도구

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.