js_javascript スキルに実装された 4 レベルの左側の Web サイト分類メニューの例-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

js_javascript スキルに実装された 4 レベルの左側の Web サイト分類メニューの例

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:00 PM

js カテゴリメニューレベル4 Webサイト

本文实例讲述了js实现的四级左侧网站分类菜单。分享给大家供大家参考。具体实现方法如下：

<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; 
charset=iso-8859-1"/>
<script src="http://www.google-analytics.com/urchin.js" 
type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-152060-1";
urchinTracker();
</script>
<title>demo</title>
<style type="text/css">
<!--
body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 11px;
}
#nav, #nav ul {
 list-style: none;
 background: #F9F9F9;
 font-weight: bold;
 padding: 0px;
 margin: 0px;
 border: solid 1px #CCCCCC;
 border-bottom: 0px;
 width: 150px;
 text-align: left;
}
#nav ul ul{
 border: solid 1px #CCCCCC;
 border-bottom: 0px;
}
#nav a {
 display: block;
 width: 150px;
 w\idth: 140px;
 color: #333333;
 text-decoration: none;
 text-align: center;
 border-bottom: solid 1px #CCCCCC;
 text-align: left;
 padding-left: 10px;
}
#nav a:hover{
 color: #336666;
}
#nav a.selected{
 background: url(/images/bb_expand.gif) no-repeat right 50%;
}
#nav li {
 line-height: 22px;
 position: relative;
}
#nav li ul {
 position: absolute;
 left: -999em;
 width: 150px;
 font-weight: normal;
 margin: 0px;
 padding: 0px;
}
#nav li li {
 width: 150px;
}
#nav li ul a {
 width: 150px;
 w\idth: 126px;
 padding: 0px 12px;
 line-height: 22px;
 text-align: left;
}
#nav li ul ul {
 margin: 0px 0 0 150px;
}
#nav li:hover ul ul,#nav li.sfhover ul ul,#nav li:hover ul ul ul{
 left: -999em;
}
#nav li:hover ul, #nav li li:hover ul,#nav li.sfhover ul, #nav li li.sfhover ul,#nav li li li:hover ul
{
 left: auto;
}
#nav li:hover ul,#nav li.sfhover ul{
 left: 150px;
 top: 0px;
}
#nav li:hover, #nav li.sfhover {
 background: #F5E3C0;
}
* html #nav li {
 float: left;
 height: 1%;
}
* html #nav li a {
 height: 1%; 
}
-->
</style>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
sfHover = function() {
 var sfEls = document.getElementById("nav").getElementsByTagName("LI");
 for (var i=0; i<sfEls.length; i++) {
 sfEls[i].onmouseover=function() {
  this.className+=" sfhover";
 }
 sfEls[i].onmouseout=function() {
  this.className=this.className.replace(new RegExp(" sfhover\\b"),"");
 }
 }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>
</script>
</head>
<body>
<p><a href="javascript:history.back()">Back</a></p>
<ul id="nav">
<li><a href="">Home</a></li>
<li><a href="/aboutme.html">About Me</a></li>
<li><a class="selected" href="/tutorials.html">Tutorials</a>
 <ul>
 <li><a href="#">Sub Menu 31</a></li>
 <li><a class="selected" href="#">Sub Menu 32</a>
 <ul>
 <li><a class="selected"href="#">Sub Menu 321</a><ul>
 <li><a href="#">Sub Menu 321</a></li>
 </ul></li>
 <li><a href="#">Sub Menu 322</a></li>
 <li><a href="#">Sub Menu 323</a></li>
 <li><a class="selected"href="#">Sub Menu 324</a><ul>
 <li><a href="#">Sub Menu 321</a></li>
 <li><a href="#">Sub Menu 322</a></li>
 <li><a href="#">Sub Menu 323</a></li>
 <li><a href="#">Sub Menu 324</a></li>
 </ul></li>
 </ul>
 </li>
 <li><a href="#">Sub Menu 33</a></li>
 <li><a href="#">Sub Menu 34</a></li>
 </ul>
</li>
<li><a class="selected" href="/gallery/gallery.html">Gallery</a>
<ul>
 <li><a href="#">Sub Menu 41</a></li>
 <li><a class="selected" href="#">Sub Menu 42</a>
 <ul>
 <li><a href="#">Sub Menu 421</a></li>
 <li><a href="#">Sub Menu 422</a></li>
 <li><a href="#">Sub Menu 423</a></li>
 <li><a href="#">Sub Menu 424</a></li>
 </ul>
 </li>
 <li><a href="#">Sub Menu 43</a></li>
 <li><a href="#">Sub Menu 44</a></li>
 </ul>
</li>
<li><a href="#">Contact Me</a></li>
</ul>
</body>
</html>

ログイン後にコピー

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

このウェブサイトの声明

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

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7364

Java チュートリアル

1628

CakePHP チュートリアル

1353

Laravel チュートリアル

1266

PHP チュートリアル

1214

Related knowledge

C言語を学べるサイトはありますか？ Jan 30, 2024 pm 02:38 PM

C 言語を学習するための Web サイト: 1. C Language Chinese Website; 2. Rookie Tutorial; 3. C Language Forum; 4. C Language Empire; 5. Script House; 6. Tianji.com; 7. Red and Black Alliance; 8, 51 自習ネットワーク; 9. リコウ; 10. C プログラミング。詳細な紹介: 1. C 言語中国語 Web サイトは、初心者向けの C 言語学習教材を提供することに特化した Web サイトであり、基本的な文法、ポインタ、配列、関数、構造体およびその他のモジュールを含む豊富なコンテンツが含まれています; 2. ルーキーチュートリアル、プログラミング学習などの総合サイトです。

株価分析に必須のツール: PHP と JS を使用してローソク足チャートを描画する手順を学びます Dec 17, 2023 pm 06:55 PM

株式分析に必須のツール: PHP および JS でローソク足チャートを描画する手順を学びます。特定のコード例が必要です。インターネットとテクノロジーの急速な発展に伴い、株式取引は多くの投資家にとって重要な方法の 1 つになりました。株価分析は投資家の意思決定の重要な部分であり、ローソク足チャートはテクニカル分析で広く使用されています。 PHP と JS を使用してローソク足チャートを描画する方法を学ぶと、投資家がより適切な意思決定を行うのに役立つ、より直感的な情報が得られます。ローソク足チャートとは、株価をローソク足の形で表示するテクニカルチャートです。株価を示しています

推奨: 優れた JS オープンソースの顔検出および認識プロジェクト Apr 03, 2024 am 11:55 AM

顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネットアプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワークインタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザーエクスペリエンスが向上することが挙げられます。欠点としては、モデルサイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピュータービジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。

PHP と JS を使用して株価ローソク足チャートを作成する方法 Dec 17, 2023 am 08:08 AM

PHP と JS を使用して株のローソク足チャートを作成する方法。株のローソク足チャートは、株式市場で一般的なテクニカル分析グラフィックです。始値、終値、最高値、株価などのデータを描画することで、投資家が株式をより直観的に理解するのに役立ちます。株価の最低価格、価格変動。この記事では、PHP と JS を使用して株価のローソク足チャートを作成する方法を、具体的なコード例とともに説明します。 1. 準備開始する前に、次の環境を準備する必要があります。 1. PHP を実行するサーバー 2. HTML5 および Canvas をサポートするブラウザー 3

PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする Dec 18, 2023 pm 03:39 PM

インターネット金融の急速な発展に伴い、株式投資を選択する人がますます増えています。株式取引では、ローソク足チャートは一般的に使用されるテクニカル分析手法であり、株価の変化傾向を示し、投資家がより正確な意思決定を行うのに役立ちます。この記事では、PHP と JS の開発スキルを紹介し、株価ローソク足チャートの描画方法を読者に理解してもらい、具体的なコード例を示します。 1. 株のローソク足チャートを理解する株のローソク足チャートの描き方を紹介する前に、まずローソク足チャートとは何かを理解する必要があります。ローソク足チャートは日本人が開発した

jsとvueの関係 Mar 11, 2024 pm 05:21 PM

js と vue の関係: 1. Web 開発の基礎としての JS、2. フロントエンドフレームワークとしての Vue.js の台頭、3. JS と Vue の補完関係、4. JS と Vue の実用化ビュー。

BaiCiZhan レベル 4 スコア評価入口 Feb 23, 2024 pm 06:28 PM

Baicizhan はスコアを推定できるツールですが、ほとんどの友人は Baicizhan レベル 4 スコア推定ツールへの入り口がどこにあるのか知りません。https://study.baicizhan.com/mall/exams/cet4_test .html リンクをクリックすると、 4 段階スコア推定ツールの入り口次は、編集者が提供する Baicizhan 4 段階スコア推定ツールの入り口の紹介です。興味のあるプレイヤーは見に来てください。 Baicizhan レベル 4 スコア評価入口レベル 4 スコア評価入口: https://study.baicizhan.com/mall/exams/cet4_test.html 1. その他のスコア評価 Web サイト 1. レベル 4 および 6 スコア推定ツール: https:// clas

JSとBaidu Mapsを使って地図位置情報表示機能を実装する方法 Nov 21, 2023 pm 03:08 PM

JS と Baidu Maps を使用して地図位置情報表示機能を実装する方法インターネットの発展に伴い、地図アプリケーションは私たちの生活に欠かせないものになりました。私たちは、目的地を検索したり、ルートを計画したりするために、携帯電話の地図アプリケーションをよく使用します。機能。 Web 開発では、JS と Baidu Map API を使用して地図の位置情報を表示することもできます。この記事では、JS と Baidu Map API を使用してこの機能を実装する方法と、具体的なコード例を詳しく紹介します。まず、Baidu Map の J を Web ページに導入する必要があります

See all articles

js_javascript スキルに実装された 4 レベルの左側の Web サイト分類メニューの例

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック