ドロップダウンメニューのJS CSS相対位置実装_javascriptスキル-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

ドロップダウンメニューのJS CSS相対位置実装_javascriptスキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:37 PM

css js ドロップダウンメニュー

この記事の例では、JS CSS の相対配置によって実装されたドロップダウンメニューについて説明します。皆さんの参考に共有してください。詳細は以下の通りです。

ここでは相対位置決めを使用していますが、効果は悪くありません。これは一般的な機能を実現するだけであり、詳細は変更されていない部分が多くあります。

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

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

http://demo.jb51.net/js/2015/js-css-ab-fix-menu-codes/

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

<html>
<head>
<title>非定位CSS+Js下拉菜单</title>
<style>
#menu {
  position: absolute;
  font-family: sans-serif;
  font-size: 9pt;
}
#menu li {
  float: left;
  list-style-type: none;
  width: 102px;
  background-color: skyblue;
  border: 1px solid #0066cc;
  text-indent: 0px;
  margin-left: 3px;
}
#menu li a {
  color: blue;
  text-decoration: none;
  width: 100%;
  display: block;
}
#menu li a:hover {
  color: white;
}
#menu li ul {
  background-color: skyblue;
  margin: 0px;
  padding: 0px;
}
#menu li ul li {
  padding: 0px;
  margin: 0px;
  float: none;
  list-style-type: none;
  width: 100px;
  text-indent: 0px;
  border: none;
}
#menu li ul li a{
  color: black;
  text-decoration: none;
}
#menu li ul li a:hover{
  color: black;
  background-color: aqua;
}</style>
<script language="javascript" type="text/javascript">
var t=false,current;
function SetupMenu() {
  if (!document.getElementsByTagName) return;
  items=document.getElementsByTagName("li");
  for (i=0; i<items.length; i++) {
   if (items[i].className != "menu") continue;
   thelink=findChild(items[i],"A");
   thelink.onmouseover=ShowMenu;
   thelink.onmouseout=StartTimer;
   if (ul=findChild(items[i],"UL")) {
     ul.style.display="none";
     for (j=0; j<ul.childNodes.length; j++) {
      ul.childNodes[j].onmouseover=ResetTimer;
      ul.childNodes[j].onmouseout=StartTimer;
     }
   }
  } 
}
function findChild(obj,tag) {
  cn = obj.childNodes;
  for (k=0; k<cn.length; k++) {
   if (cn[k].nodeName==tag) return cn[k];
  }
  return false;
}
function ShowMenu(e) {
  if (!e) var e = window.event;
  thislink = (e.target) &#63; e.target: e.srcElement;
  ResetTimer();
  if (current) HideMenu(current);
  thislink = thislink.parentNode;
  current=thislink;
  ul = findChild(thislink,"UL");
  if (!ul) return;
  ul.style.display="block";
}
function HideMenu(thelink) {
  ul = findChild(thelink,"UL");
  if (!ul) return;
  ul.style.display="none";
}
function ResetTimer() {
  if (t) window.clearTimeout(t);
}
function StartTimer() {
  t = window.setTimeout("HideMenu(current)",200);
}
window.onload=SetupMenu;
</script>
</head>
<body>
<h1>Menu Test</h1>
<ul id="menu">
<li class="menu"><a href="#">Home</a></li>
<li class="menu"><a href="#">Products</a>
  <ul>
  <li><a href="#">Sub-item 1</a></li>
  <li><a href="#">Sub-item 2</a></li>
  </ul>
</li>
<li class="menu"><a href="#">Support</a>
  <ul>
  <li><a href="#">Sub-item 1</a></li>
  <li><a href="#">Sub-item 2</a></li>
  </ul>
</li>
<li class="menu"><a href="#">Employment</a>
  <ul>
  <li><a href="#">Sub-item 1</a></li>
  <li><a href="#">Sub-item 2</a></li>
  </ul>
</li>
<li class="menu"><a href="#">Contact Us</a>
  <ul>
  <li><a href="#">Sub-item 1</a></li>
  <li><a href="#">Sub-item 2</a></li>
  </ul>
</li>
</ul>
</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版

ホットトピック