js_javascript スキルに実装された 2 番目の水平メニューバーの例-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

js_javascript スキルに実装された 2 番目の水平メニューバーの例

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:43 PM

この記事の例では、js で実装された 2 番目の水平メニューバーについて説明します。皆さんの参考に共有してください。詳細は以下の通りです。

これは非常に新鮮なマルチレベルの Web メニューで、マウスを置くと、対応する 2 番目のメニューが表示され、多くの Web サイトに適していると思います。信じられませんか？「コードを実行」をクリックして効果を確認します。

実行中のエフェクトのスクリーンショットは次のとおりです:

オンラインデモのアドレスは次のとおりです:

http://demo.jb51.net/js/2015/js-2row-nav-menu-codes/

具体的なコードは次のとおりです:

<!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">
<TITLE>蓝色二级横向滑动导航菜单</TITLE>
<style type=text/css>
UL {
 LIST-STYLE-TYPE: none;
 padding:0px;
 margin:0px;
}
LI {
 FONT-SIZE: 12px;
 COLOR: #333;
 LINE-HEIGHT: 1.5em;
 FONT-FAMILY: "微软雅黑", Arial, Verdana;
}
.hide {
 DISPLAY: none
}
#mainmenu_top UL LI .menuhover {
 BACKGROUND: url(images/mainmenu_s.gif) no-repeat;
 COLOR: #fff;
}
#mainmenu_top UL LI A {
 MARGIN-TOP: 2px;
 CURSOR: pointer;
 PADDING-TOP: 8px;
 HEIGHT: 20px;
 text-decoration: none;
}
#mainmenu_top {
 width:100%;
 HEIGHT: 28px;
 display:block;
 overflow:hidden;
}
#mainmenu_top UL LI {FLOAT: left}
#mainmenu_top UL LI A {
 WIDTH: 81px;
 height:auto;
 DISPLAY: block;
 COLOR: #666666;
 TEXT-ALIGN: center;
 BACKGROUND: url(images/mainmenu_h.gif) no-repeat;
}
#mainmenu_bottom {
 width:100%;
 height:32px;
 line-height:32px;
 display:block;
 overflow:hidden;
 BACKGROUND: url(images/mainmenu_bg.jpg) repeat-x
}
#mainmenu_bottom .mainmenu_rbg {
 HEIGHT: 32px;
 COLOR: #fff;
 MARGIN-LEFT: 0px;
 PADDING: 0px 0px 0px 5px;
 BACKGROUND: url(images/mainmenu_r.gif) no-repeat right 50%;
}
#mainmenu_bottom UL {}
#mainmenu_bottom UL LI {
 PADDING-LEFT: 8px;
 FLOAT: left;
 MARGIN-LEFT: 7px;
 HEIGHT: 32px;
}
#mainmenu_bottom UL LI.se {
 FLOAT: left;
 MARGIN-LEFT: 7px;
 HEIGHT: 32px;
 PADDING-LEFT: 8px;
 BACKGROUND: url(images/menulink_bg_l.gif) no-repeat;
}
#mainmenu_bottom UL LI A {
 COLOR: #fff;
 LINE-HEIGHT: 32px;
 PADDING-RIGHT: 18px;
 DISPLAY: block;
 text-decoration: none;
 BACKGROUND: url(images/menulink_bg_normal.gif) no-repeat right 50%;
}
#mainmenu_bottom UL LI A:hover {
 BACKGROUND: url(images/menulink_bg_normal.gif) no-repeat right 50%;
 color: #FFCC00;
}
#mainmenu_bottom UL LI A.se {
 COLOR: #fff;
 LINE-HEIGHT: 32px;
 PADDING-RIGHT: 18px;
 DISPLAY: block;
 BACKGROUND: url(images/menulink_bg_r.gif) no-repeat right 50%;
}
</style>
<SCRIPT type=text/javascript>
var waitting = 1;
var secondLeft = waitting;
var timer;
var sourceObj;
var number;
function getObject(objectId)//获取id的函数
{
 if(document.getElementById && document.getElementById(objectId)) {
 // W3C DOM
 return document.getElementById(objectId);
 } else if (document.all && document.all(objectId)) {
 // MSIE 4 DOM
 return document.all(objectId);
 } else if (document.layers && document.layers[objectId]) {
 // NN 4 DOM.. note: this won't find nested layers
 return document.layers[objectId];
 } else {
 return false;
 }
}
function SetTimer()//主导航时间延迟的函数
{
 for(j=1; j <10; j++){
  if (j == number){
  if(getObject("mm"+j)!=false){
   getObject("mm"+ number).className = "menuhover";
   getObject("mb"+ number).className = "";
  }
  }
  else{
   if(getObject("mm"+j)!=false){
   getObject("mm"+ j).className = "";
   getObject("mb"+ j).className = "hide";
  }
  }
 }
}
function CheckTime()//设置时间延迟后
{
 secondLeft--;
 if ( secondLeft == 0 )
 {
 clearInterval(timer);
 SetTimer();
 }
}
function showM(thisobj,Num)//主导航鼠标滑过函数,带时间延迟
{
 number = Num;
 sourceObj = thisobj;
 secondLeft = 1;
 timer = setTimeout('CheckTime()',100);
}
function OnMouseLeft()//主导航鼠标移出函数,清除时间函数
{
 clearInterval(timer);
 } 
function mmenuURL()//主导航、二级导航显示函数
{
var thisURL = document.URL;
tmpUPage = thisURL.split( "/" );
thisUPage_s = tmpUPage[ tmpUPage.length-2 ];
thisUPage_s= thisUPage_s.toLowerCase();//小写
 if(thisUPage_s=="#"||thisUPage_s=="#"||thisUPage_s=="#")
 {
  getObject("mm1").className="menuhover"
  getObject("mb1").className = "";
 }
 else if(thisUPage_s=="domain")
 {
  getObject("mm2").className="menuhover"
  getObject("mb2").className = "";
 }
 else if(thisUPage_s=="hosting")
 {
  getObject("mm3").className="menuhover"
  getObject("mb3").className = "";
 }
 else if(thisUPage_s=="mail")
 {
  getObject("mm4").className="menuhover"
  getObject("mb4").className = "";
 }
 else if(thisUPage_s=="solutions"||thisUPage_s=="site"){
  getObject("mm5").className="menuhover"
  getObject("mb5").className = "";
 }
 else if(thisUPage_s=="promotion"){
  getObject("mm6").className="menuhover"
  getObject("mb6").className = "";
 }
 else if(thisUPage_s=="trade"||thisUPage_s=="phonetic"||thisUPage_s=="switchboard"||thisUPage_s=="note"){
  getObject("mm7").className="menuhover"
  getObject("mb7").className = "";
 }
 else if(thisUPage_s=="benefit"){
  getObject("mm8").className="menuhover"
  getObject("mb8").className = "";
 }
 else if(thisUPage_s=="userlogon"||thisUPage_s=="domain_service"||thisUPage_s=="hosting_service"||thisUPage_s=="mail_service"||thisUPage_s=="Payed"||thisUPage_s=="unPayed"||thisUPage_s=="Invoice"||thisUPage_s=="Finance"||thisUPage_s=="RegInfoModify"){
  getObject("mm9").className="menuhover"
  getObject("mb9").className = "";
 }
 else
 {
  getObject("mm1").className="";
  getObject("mb1").className = "";
 }
}
window.load=mmenuURL()
</SCRIPT>
<!--导航开始-->
<DIV id=mainmenu_body>
<!--主导航开始-->
 <DIV id=mainmenu_top>
 <UL>
 <LI><A id=mm1 onmouseover=showM(this,1); onmouseout=OnMouseLeft(); href="#" target=_parent>网站首页</A> </LI>
 <LI><A id=mm2 onmouseover=showM(this,2); onmouseout=OnMouseLeft(); href="#" target=_parent>JS代码</A> </LI>
 <LI><A id=mm3 onmouseover=showM(this,3); onmouseout=OnMouseLeft(); href="#" target=_parent>电子商务</A> </LI>
 <LI><A id=mm4 onmouseover=showM(this,4); onmouseout=OnMouseLeft(); href="#" target=_parent>脚本下载</A> </LI>
 <LI><A id=mm5 onmouseover=showM(this,5); onmouseout=OnMouseLeft(); href="#" target=_parent>建站技巧</A> </LI>
 <LI><A id=mm6 onmouseover=showM(this,6); onmouseout=OnMouseLeft(); href="#" target=_parent>CSS技巧</A> </LI>
 <LI><A id=mm7 onmouseover=showM(this,7); onmouseout=OnMouseLeft(); href="#" target=_parent>CSS导航菜单</A> </LI>
 <LI style="DISPLAY: none"><A id=mm8 onmouseover=showM(this,8); onmouseout=OnMouseLeft(); href="#" target=_parent>菜单特效</A> </LI>
 <LI><A id=mm9 onmouseover=showM(this,9); onmouseout=OnMouseLeft(); href="#" target=_parent>SEO优化</A> </LI></UL>
 </DIV>
<!--子导航导航开始-->
 <DIV id=mainmenu_bottom>
 <DIV class=mainmenu_rbg>
  <UL class=hide id=mb1>
  <LI><A href="#">脚本下载-中小企业菜单特效专家</A> </LI>
  <LI><A href="#">网站公告：脚本下载欢迎您~</A> </LI>
  </UL>
  <UL class=hide id=mb2>
  <LI style="DISPLAY: none"><A href="#" target=_parent>脚本下载</A> </LI>
  <LI><A href="#" target=_parent>脚本下载</A> </LI>
  <LI><A href="#" target=_parent>脚本下载</A> </LI>
  <LI><A href="#" target=_parent>脚本下载</A> </LI>
  <LI><A href="#" target=_parent>网页特效</A> </LI></UL>
  <UL class=hide id=mb3>
  <LI style="DISPLAY: none"><A href="#" target=_parent>脚本下载</A> </LI>
  <LI style="MARGIN-LEFT: 7px"><A href="#" target=_parent>脚本下载</A> </LI>
  <LI><A href="#" target=_parent>菜单特效</A> </LI>
  <LI><A href="#" target=_parent>菜单特效</A> </LI>
  <LI><A href="#" target=_parent>菜单特效</A> </LI>
  <LI><A href="#" target=_parent>网页特效</A> </LI></UL>
  <UL class=hide id=mb4>
  <LI style="DISPLAY: none; MARGIN-LEFT: 80px"><A href="#" target=_parent>脚本下载</A> </LI>
  <LI style="MARGIN-LEFT: 80px"><A href="#" target=_parent>网页特效</A> </LI>
  <LI><A href="#" target=_parent>菜单特效</A> </LI>
  <LI><A href="#" target=_parent>菜单特效</A> </LI></UL>
  <UL class=hide id=mb5>
  <LI style="DISPLAY: none"><A href="#" target=_parent>脚本下载</A> </LI>
  <LI style="MARGIN-LEFT: 80px"><A href="#" target=_parent>服务器租用</A> </LI>
  <LI><A href="#" target=_parent>菜单特效</A> </LI>
  <LI><A href="#" target=_parent>超级机房</A> </LI>
  <LI><A href="#" target=_parent>脚本下载</A> </LI></UL>
  <UL class=hide id=mb6>
  <LI style="DISPLAY: none"><A href="#" target=_parent>脚本下载</A> </LI>
  <LI style="MARGIN-LEFT: 160px"><A href="#" target=_parent>脚本下载</A> </LI>
  <LI><A href="#" target=_parent>脚本下载</A> </LI>
  <LI><A href="#" target=_parent>脚本下载</A> </LI></UL>
  <UL class=hide id=mb7>
  <LI style="DISPLAY: none"><A href="#" target=_parent>脚本下载</A> </LI>
  <LI style="MARGIN-LEFT: 180px"><A href="#" target=_parent>脚本下载</A> </LI>
  <LI><A href="#" target=_parent>脚本下载</A> </LI>
  <LI><A href="#" target=_parent>个人建站</A> </LI>
  <LI><A href="#" target=_parent>门户建站</A> </LI></UL>
  <UL class=hide id=mb8 style="DISPLAY: none">
  <LI style="MARGIN-LEFT: 270px"><A href="/agent/" target=_parent>脚本下载</A> </LI>
  <LI><A href="#" target=_parent>菜单特效</A> </LI>
  <LI><A href="#" target=_parent>菜单特效</A> </LI></UL>
  <UL class=hide id=mb9>
  <LI style="MARGIN-LEFT: 180px"><A href="/agent/">脚本下载</A> </LI>
  <LI><A href="#" target=_parent>菜单特效</A> </LI>
  <LI><A href="#" target=_parent>菜单特效</A> </LI>
  <LI><A href="#" target=_parent>菜单特效</A> </LI></UL>
 </DIV>
 </DIV>
</DIV>
</body>
</html>

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

JavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript：コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。