JS CSS_javascript スキルによって実装された垂直方向の簡潔な折りたたみメニュー効果コード-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JS CSS_javascript スキルによって実装された垂直方向の簡潔な折りたたみメニュー効果コード

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:35 PM

css js メニューを折りたたむ

この記事の例では、JS CSS によって実装された垂直方向の簡潔な折りたたみメニュー効果コードについて説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

これは JS CSS の縦方向で簡潔な折りたたみメニューで、3 レベルの分類をサポートしており、個人的には非常に良いと感じています。皆さんに気に入っていただければ幸いです。

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

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

http://demo.jb51.net/js/2015/js-css-simple-zd-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+Js竖向简洁的折叠菜单</title>
<style>
#outer {width:504px; height:510px; position:relative; background:url(images/red_frog.jpg) no-repeat 0px 160px;}
#outer #content {clear:left; position:absolute; left:230px; top:10px; width:250px; z-index:10;}
#menu {list-style-type:none; padding:0; margin:0; width:125px; position:absolute; top:70px; left:0; border:1px solid #fff; border-width:0 1px 1px; z-index:100;}
#menu ul {list-style-type:none; padding:0; margin:0; width:125px;}
#menu li {float:left; background:#657; position:relative; border-top:1px solid #fff;}
#menu li.sub {background:#d30;}
#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:24px; width:125px; text-decoration:none; cursor:pointer; font-weight:bold; text-indent:5px;}
#menu ul,
#menu li.click ul ul,
#menu li.click ul li.hover ul ul {display:none;}
#menu li.hover {color:#ff0; z-index:500;}
#menu li.click {color:#ff0;}
#menu li.click ul {display:block;}
#menu li.click ul li.hover ul, 
#menu li.click ul li.hover ul li.hover ul {display:block; position:absolute; left:110px; top:-1px; border:1px solid #fff; border-width:0 1px 1px;}
#menu li.click ul li.fly {background: #657 url(images/frog_arrow.gif) no-repeat top right;}
#menu li.click ul li.hover {background:#98a;}
#menu li.click ul li.hover ul li {background:#c60;}
#menu li.click ul li.hover ul li.hover ul li {background:#780; z-index:500;}
#menu li.click ul li.hover ul li.fly {background: #c60 url(images/frog_arrow.gif) no-repeat top right;}
#menu li.click ul li.hover ul li.hover {z-index:500; background:#fa4;}
#menu li.click ul li.hover ul li.hover a {color:#000;}
#menu li.click ul li.hover ul li.hover ul li.hover {background:#aa0;}
#menu li.click ul li.hover ul li.hover ul li.hover a {color:#fff;}
#outer img {display:block; float:right;}
#outer p {margin:0px; padding:17px 0 0 0; color:#000; font-size:12px; font-family:arial, sans-serif; text-align:justify;}
</style>
<script type="text/javascript">
clickMenu = function(menu) {
  var getEls = document.getElementById(menu).getElementsByTagName("LI");
  var getAgn = getEls;
  for (var i=0; i<getEls.length; i++) {
      getEls[i].onclick=function() {
        for (var x=0; x<getAgn.length; x++) {
        getAgn[x].className=getAgn[x].className.replace("unclick", "");
        getAgn[x].className=getAgn[x].className.replace("click", "unclick");
        }
      if ((this.className.indexOf('unclick'))!=-1) {
        this.className=this.className.replace("unclick", "");;
        }
        else {
        this.className+=" click";
        }
      }
      getEls[i].onmouseover=function() {
        this.className+=" hover";
      }
      getEls[i].onmouseout=function() {
        this.className=this.className.replace("hover", "");
      }
    }
  }
</script>
</head>
<body onload="clickMenu('menu')">
<div id="outer">
<ul id="menu">
  <li class="sub">Types
    <ul>
      <li><a href="#nogo">Indian</a></li>
      <li><a href="#nogo">韩国</a></li>
      <li class="fly"><a href="#nogo">美国</a>
        <ul>
          <li><a href="#nogo">朝鲜</a></li>
          <li class="fly"><a href="#nogo">南朝鲜</a>
            <ul>
              <li><a href="#nogo">西大街</a></li>
              <li><a href="#nogo">东大街</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#nogo">日本语</a></li>
      <li><a href="#nogo">简体中文</a></li>
    </ul>
  </li>
  <li class="sub">地区分布
    <ul>
      <li class="fly"><a href="#nogo">北京</a>
        <ul>
          <li><a href="#nogo">Hemiphractus</a></li>
          <li><a href="#nogo">Stefania</a></li>
        </ul>
      </li>
      <li class="fly"><a href="#nogo">河南</a>
        <ul>
          <li><a href="#nogo">Acris</a></li>
          <li><a href="#nogo">Anotheca</a></li>
          <li><a href="#nogo">Trachycephalus</a></li>
        </ul>
      </li>
      <li class="fly"><a href="#nogo9">武汉</a>
        <ul>
          <li><a href="#nogo">Boophis</a></li>
          <li><a href="#nogo">Callixalus</a></li>
          <li><a href="#nogo">Chiromantis</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="sub">References
    <ul>
      <li><a href="#">Wikipedia</a></li>
      <li><a href="#nogo11">Encyclopedia</a></li>
    </ul>
  </li>
  <li class="sub">链接
    <ul>
      <li><a href="#nogo">脚本下载</a></li>
      <li><a href="#nogo">百度搜索</a></li>
    </ul>
  </li>
</ul>
</div>
</body>
</html>

ログイン後にコピー

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

このウェブサイトの声明

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

ホットAIツール

ホットツール

ホットトピック

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

7364

Java チュートリアル

1628

CakePHP チュートリアル

1353

Laravel チュートリアル

1266

PHP チュートリアル

1214

Related knowledge

Vue におけるプレースホルダーの意味 May 07, 2024 am 09:57 AM

Vue.js では、placeholder 属性は、input 要素のプレースホルダーテキストを指定します。これは、ユーザーがコンテンツを入力していないときに表示され、入力のヒントや例を提供し、フォームのアクセシビリティを向上させます。その使用方法は、input 要素にプレースホルダー属性を設定し、CSS を使用して外観をカスタマイズすることです。ベストプラクティスには、入力に関連すること、短く明確にすること、デフォルトのテキストを避けること、アクセシビリティを考慮することが含まれます。

jsでのスパンの意味は何ですか May 06, 2024 am 11:42 AM

スパンタグは、テキストにスタイル、属性、または動作を追加できます。色やフォントサイズなどのスタイルを追加するために使用されます。 idやclassなどの属性を設定します。クリック、ホバーなどの関連する動作。さらに処理または引用するためにテキストにマークを付けます。

jsでレムは何を意味しますか May 06, 2024 am 11:30 AM

CSS の REM は、ルート要素 (html) のフォントサイズに対する相対単位です。次の特性があります: ルート要素のフォントサイズに相対し、親要素の影響を受けません。ルート要素のフォントサイズが変更されると、REM を使用する要素もそれに応じて調整されます。任意の CSS プロパティとともに使用できます。 REM を使用する利点は次のとおりです。応答性: さまざまなデバイスや画面サイズでもテキストを読みやすい状態に保ちます。一貫性: Web サイト全体でフォントサイズが一貫していることを確認します。スケーラビリティ: ルート要素のフォントサイズを調整することで、グローバルフォントサイズを簡単に変更できます。

jsのノードとは何ですか May 07, 2024 pm 09:06 PM

ノードは、HTML 要素を表す JavaScript DOM 内のエンティティです。これらはページ内の特定の要素を表し、その要素にアクセスして操作するために使用できます。一般的なノードタイプには、要素ノード、テキストノード、コメントノード、ドキュメントノードなどがあります。 getElementById() などの DOM メソッドを通じて、ノードにアクセスし、プロパティの変更、子ノードの追加/削除、ノードの挿入/置換、ノードのクローン作成などの操作を行うことができます。ノードトラバーサルは、DOM 構造内を移動するのに役立ちます。ノードは、ページコンテンツ、イベント処理、アニメーション、およびデータバインディングを動的に作成するのに役立ちます。

ブラウザのプラグインは何語で書かれていますか? May 08, 2024 pm 09:36 PM

ブラウザプラグインは通常、次の言語で作成されます。フロントエンド言語: JavaScript、HTML、CSS バックエンド言語: C++、Rust、WebAssembly その他の言語: Python、Java

vscodeで不明な属性を設定する方法 vscodeで不明な属性を設定する方法 May 09, 2024 pm 02:43 PM

1. まず、左下隅にある設定アイコンを開き、設定オプションをクリックします。 2. 次に、ジャンプしたウィンドウで CSS 列を見つけます。 3. 最後に、不明なプロパティメニューのドロップダウンオプションをエラーボタンに変更します。。

vue でデータを導入するファイルを減らすことはできますか? May 07, 2024 pm 12:06 PM

はい、Vue の Less ファイルは CSS 変数と Less ミックスインを通じてデータを導入できます。データを含む JSON ファイルを作成します。 @import ルールを使用して JSON ファイルをインポートします。 CSS 変数または Less ミックスインを使用して JSON データにアクセスします。

Visual Studio 2019 で CSS のデフォルトのプロパティを設定するためのグラフィカルな手順 May 09, 2024 pm 02:01 PM

1. Visual Studio 2019 を開き、そのオプション設定を見つけて、[CSS] をクリックします。 2. ここでは、次の属性の技術設定を確認できます。 3. ここでテキストと塗りつぶしの境界線を設定できます。 4. このとき、ここでフローティング位置を設定することもできます。 5. この時点で、ここで境界線と背景を設定して操作を完了することもできます。 6. 最後に、ここで [OK] ボタンをクリックして、CSS のデフォルトのプロパティを設定します。

See all articles

JS CSS_javascript スキルによって実装された垂直方向の簡潔な折りたたみメニュー効果コード

ホット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版

ホットトピック