Jquery CSS を使用して流体ナビゲーション メニューを作成する Fluid Navigation_jquery

では、モバイルナビゲーションメニューはどのように実装すればよいのでしょうか?
1. レンダリング

メニューの上にマウスを置くと、プロンプト情報が表示されます。
2. 実装手順
1. CSS コード

コードをコピーします: menuBarHolder { 幅: 730px; 高さ: #000; フォントサイズ: 14px; }

# menuBarHolder ul{ list-style-type:none; display:block;}

#container { margin-top:100px;}
#menuBar li{ float:left:16px; 50px; ボーダー -right:1px ソリッド #ccc; }
#menuBar li a{color:#fff; font-weight:bold;}
{ 背景色:#999;}
.firstchild { border-left:1px ソリッド #ccc;}
.menuInfo { カーソル:手色:#fff;幅: 74 ピクセル; 高さ: 100 ピクセル; 表示: 絶対; マージン-上: - 15 ピクセル; -radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px; : 5px;
-khtml-border-radius-bottomright: 5px;
border-radius-bottomright: 5px; 🎜>
menuBarHolder: menuMenu の固定コンテナ、幅 = 730px。
menuInfo: プロンプト情報を表示するかどうかを制御します。
2. HTML コード




コードをコピーします


コードは次のとおりです。 div id= "menuBarHolder">

• ホーム ;
  
  ホーム セクションに関するテキストです


• サービス
  
  サービス セクションに関するテキストです
クライアントセクションに関するテキストです
ポートフォリオ
ポートフォリオ セクションに関するテキストです
概要
概要セクションについてのテキストです
ブログ
ブログ セクションに関するテキストです
フォロー
フォローセクションについてのテキストです
連絡先

連絡先セクションに関するテキストです< ;/div> ;

UI LI 要素: リスト要素。
DIV 要素: プロンプトのコンテンツ情報。
3. Javascript コード




コードをコピーします


コードは次のとおりです:


$( document).ready(function()
{
$('#menuBar li').click(function()
{