ユニバーサル Infinitus ドロップダウン メニューの実装コード

この記事では、主にユニバーサル Infinitus ドロップダウン メニューの実装コードを紹介します。これは、必要な友人に参照してもらうために共有します。すべてのプロジェクトを最初から作成する必要があります。変更するのは簡単ですが、今日はまだ比較的面倒です。ユニバーサルバージョンなので、今後はそれほど面倒なことはありません。

特徴

今回コンパイルしたメニューはjquery+cssで開発されており、以下の特徴を持っています:

1. 高い汎用性

以前使用していたドロップダウンメニューに問題があり、必要だったのでメインのナビゲーションとサブメニューの設定を分離する場合、たとえば、第 2 レベルのメニューは class="first_menu"、第 3 レベルのメニューは class="second_menu" のようになります。この書き方には 1 つの問題があります。プログラマがループ出力を実行するのは有益ではなく、このメニューには CSS スタイルを導入するだけでよく、マルチレベルのメニューを定義する必要はありません。

2. ドロップダウン命令の美しい自動呼び出し

以前は、ドロップダウン メニューにドロップダウン表示クラスを手動で追加していましたが、現在はドロップダウンのスタイルを定義するだけで済みます。 CSS で down 効果を追加すると、コードが自動的にドロップダウン メニューを見つけて追加します。矢印を示します

3. 単純な呼び出し

プログラマの出力リストは単純で、多くの判断を必要とせず、再帰的に呼び出すだけです。メニューデータ。

実装

1. HTMLコード まず、メニューリストを形成するulとliで構成されるメニューデータをページ上に出力します。具体的な構造のコードは次のとおりです。

<ul class="Menue">

 <li class="Menue_li"><a href="#">首页</a></li>

 <li class="Menue_li"><a href="#">菜单一</a>

  <ul class="sub_menu">

   <li><a href="#">过山车</a></li>

   <li><a href="#">火山爆发</a></li>

   <li><a href="#">小小鸟</a></li>

  </ul>

 </li>

 <li class="Menue_li"><a href="#">菜单二</a>

  <ul class="sub_menu">

   <li><a href="#">关于我们</a>

    <ul class="sub_menu">

     <li><a href="#">山高地缘</a>

      <ul class="sub_menu">

       <li><a href="#">飞鸽传书</a></li>

       <li><a href="#">生生世世</a></li>

       <li><a href="#">飞黄腾达</a></li>

      </ul>

     </li>

     <li><a href="#">数据库</a>

      <ul class="sub_menu">

       <li><a href="#">数据库表</a></li>

       <li><a href="#">数据加密</a></li>

       <li><a href="#">数据建模</a></li>

      </ul>

     </li>

     <li><a href="#">C摄像头</a></li>

    </ul>

   </li>

   <li><a href="#">测试产品</a></li>

  </ul>

 </li>

</ul>

いくつかの基本的な HTML コードは非常に単純です。コードの構造を強調します。それが第 2 レベルであるかどうかです。 3 番目のレベルまたは複数のレベルのメニューは主にネストされています。スタイル シートの名前も非常にシンプルで、プログラム コードのループ呼び出しに非常に役立ちます。

2. CSS スタイル CSS スタイルのコードも非常にシンプルです:

a { text-decoration:none; }

ul, li { list-style:none; margin:0; padding:0; }

/*定义菜单*/

.Menue li { background:#111; color:#fff; height:30px; line-height:30px; position:relative; float:left; margin-right:5px; width:100px; text-align:center; font-family:Arial, Helvetica, sans-serif; }

.Menue li a { color:#fff; font-size:14px; display:block; }

/*下拉菜单样式*/

ul.sub_menu { position:absolute;width:100px; display:none; z-index:999; }

.Menue li ul.sub_menu li { background:none; color:#555; font-size:12px; border-bottom:1px #333 solid; position:relative; width:100px; height:30px; }

.Menue li ul.sub_menu li.last { border-bottom:none; } /*js会对最后一个li添加该class，去掉border-bottom效果*/

.Menue li ul.sub_menu li a { background:#222; color:#888; display:block;height:30px; }

.Menue li ul.sub_menu li a:hover, .Menue li ul.sub_menu li a.now { background:#f90;color:#fff;}

.Menue li.now,.Menue li.current { background:#f60;color:#fff;}

/*如果有下拉菜单添加的class*/

.hasmenu { background:url(arrow.png) no-repeat right; padding-right:15px;}/*主导航箭头向下*/

.Menue li a.hasmenu { background:url(arrow.png) no-repeat right; padding-right:15px;background-position:right -30px;}/*下拉菜单箭头向右*/

.Menue li ul.sub_menu li a.hasmenu { background:#222 url(arrow.png) no-repeat right top;}

.Menue li ul.sub_menu li a.hasmenu:hover { background:#f90 url(arrow.png) no-repeat right top; color:#fff;}

ここでは 2 つの点だけを強調します:

1.位置の相対

absolute: 絶対的な配置、CSS の記述方法「position: ABSOLUTE;」、その配置は次の 2 つの状況に分けられます:

A. Top、Right、Bottom、Left が設定されていない場合、デフォルトは親の「コンテンツエリア」を基準にした「原点」が原点となります。

B.Top、Right、Bottom、Leftが設定されている場合は以下の2つがあります:

(1) ブラウザの左上隅。つまり、Body) は「元の座標」です。クリックして配置します。位置は、Top、Right、Bottom、Left 属性によって決定されます。

(2) 親は位置属性を持ち、親の「座標の原点」が原点になります。

relative: 相対配置、CSSの書き方「position:relative;」、親の「コンテンツ領域の原点」を原点として参照、親が無い場合は「コンテンツの原点」を使用Bodyの「エリア」を原点とし、その位置はTop、Right、Bottom、Left属性で決定され、「高さを拡張または占有」する機能を持ちます。

上記 2 つの違いは非常に重要であり、これら 2 つの特性のため、開発中に問題を探すのに多くの時間を費やしました。

2. 背景位置の使用

ウェブサイトの速度を向上させ、ウェブサイトの管理を容易にするために、よく使用されるいくつかの小さな画像を大きな画像上に配置することがあります。この方法は、CSS が対応する小さな画像を必要とする場合に使用できます。意味を理解していれば実装は非常に便利です。このメソッドの明確な点は、画像インターセプト関数です。その使用法は次のように詳しく説明されています。

length : パーセント | 浮動小数点数と単位識別子で構成される長さの値。

位置 : 上 | 中央 | 下 | 左 | 右

オブジェクトの背景画像の位置を設定または取得します。最初に、background-image 属性を指定する必要があります。このプロパティの位置は、オブジェクトのパディング設定の影響を受けません。デフォルト値は 0% 0% です。このとき、背景画像はパディングを除いたオブジェクトのコンテンツ領域の左上隅に配置されます。値が 1 つだけ指定されている場合は、その値が横軸に使用されます。縦軸のデフォルトは 50% です。 2 つの値が指定された場合、2 番目の値が縦軸に使用されます。設定値が右中央の場合、横軸の値が中央の値よりも優先されるため、背景画像は右側に配置されます。ここにいくつかの方程式があります

左上、左上は 0% 0% に相当します。

上、中央上、中央上は 50% 0% に相当します。

右上、右上は 100% 0 % に相当します。 .

左、左中央、中央左は 0% 50% に相当します。

中央、中央中央は 50% 50% に相当します。

右、右中央、中央右は 100% 50% に相当します。

左下、左下は0% 100%に相当します。下、中央下、中央下は50% 100%に相当します。

bottom right, right bottom 等价于 100% 100%

三、JS代码

本菜单是以jquery为基础的所以首先必须引入jquery代码库，然后编写如下JS代码实现下拉菜单。

<script src="js/jquery.min.js"></script>

<script>

$(document).ready(function(){

 //为导航设置默认高亮 与本菜单无关

 $("ul.Menue li.Menue_li:eq(0)").addClass("current")

 /*jquery menu 开始*/

 //为子菜单的最后一个li添加样式，适合为li添加下划线时去除最后一个的下划线

 $(".sub_menu").find("li:last-child").addClass("last")

 //遍历全部li，判断是否包含子菜单，如果包含则为其添加箭头指示状态

 $(".Menue li").each(function(){

 if($(this).find("ul").length!=0){$(this).find("a:first").addClass("hasmenu")}

 })

 

 //

 $(".Menue li").hover(function(){

 $(this).addClass("now");

 var menu = $(this);

  menu.find("ul.sub_menu:first").show();

 },function(){

 $(this).removeClass("now");

 $(this).find("ul.sub_menu:first").hide();

 });

 

 var submenu = $(".sub_menu").find(".sub_menu")

 submenu.css({left:"100px",top:"0px"})

 $(".sub_menu li").hover(function(){

 $(this).find("a:first").addClass("now")

 $(this).find("ul:first").show();

 },function(){

 $(this).find("a:first").removeClass("now")

 $(this).find("ul:first").hide()

 });

/*jquery menu 结束*/

})

</script>

通过以上步骤就实现了一个通用的多级菜单，上面代码是本人日常开发中的积累，由于本人水平有限可能存在着许多错误希望同僚们批评指正或提出更优化的代码供本人参考，谢谢。

以上がユニバーサル Infinitus ドロップダウン メニューの実装コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。