前回のブログ投稿はすべてナビゲーション メニューと 2 番目のドロップダウン メニューについてでした。実際には、それらを実装する方法は数多くあり、具体的な方法は状況によって異なります。
後で jQuery フレームワークを学習すると、より豊富なアニメーション効果が得られます。Ajax と jQuery を学習する初期段階では、多くの複雑なナビゲーション メニューや二次ドロップダウン メニューを実行することはできませんが、いくつかの単純な変換を学習することは可能です。 CSSとJSなし。このブログ投稿では、CSS を使用して
ナビゲーション メニューと 2 番目のドロップダウン メニューを組み合わせた 2 つの単純な変換を実現する方法について説明します。
まず、前回のブログ投稿に基づいて実装してみましょう。実際には、HTML と CSS だけを使用しても良好な結果を達成できますが、JS や
jQuery と比較すると大きなギャップがあります。 JS と jQuery を学習すると、これらの問題を深く理解できるようになります。文
ナビゲーション メニューの切り替え
制作原理: 2 番目のレベルのドロップダウン メニューを変更して、対応するメニュー上でマウスを一時停止し、ナビゲーション
メニューの下に 2 番目のメニューを表示します。英語メニューが表示されたら、ナビゲーションメニューとは逆方向に上に移動し、余分な部分を非表示にします
。
ブラウザの互換性の問題: 私がテストしたブラウザは、Firefox、Google、2345 Browser、IE7 と 8 でした。
:
<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>导航菜单</title><style type="text/css">.nav{padding-left:40px;font-size:20px;font-family:"微软雅黑";list-style:none;font-weight:bold;overflow:hidden;/*此处的作用可以清除浮动*/border-bottom:10px solid #FF6600;}.nav li{float:left;margin-right:1px;}.nav li a{text-decoration:none;line-height:40px;background-color:#EEEEEE;color:#000000;display:block;width:100px;text-align:center;}/*默认状态下不显示*/.nav li a span{display:none;}/*鼠标移到相应元素显示英文*/.nav li a:hover span{display:block;background-color:#FF6600;color:#FFFFFF;}/*反向使用上外边距，使其原来的中文隐藏*/.nav li a:hover{margin-top:-40px;}</style></head><body><ul class="nav"> <li><a href="#">首页<span>Home</span></a></li> <li><a href="#">课程大厅<span>Course</span></a></li> <li><a href="#">学习中心<span>Learn</span></a></li> <li><a href="#">经典案例<span>Case</span></a></li> <li><a href="#">关于我们<span>About</span></a></li></ul></body></html>
2 レベルの前には 3 つのブログ投稿がありますJSやJQueryで実装する方法は色々ありますが、今回は主にCSSを使って実装します。関連するブログ投稿については、Web フロントエンド開発実践 1: 2 番目のドロップダウン メニューの CSS 実装、Web フロントエンド開発実践 2: 2 番目のレベルのドロップダウン メニュー
JS 実装と Web フロント-を参照してください。開発実践 3 の終了: 2 番目のドロップダウン メニューの jQuery 実装。
作成原理は、第 2 レベルのドロップダウン メニューと同じです。ブラウザ テストは、IE7、8、Google、Firefox、2345 ブラウザです。
:
<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>导航菜单</title><style type="text/css">*{margin:0;padding:0;}ul{list-style:none;}.nav{font-size:16px;font-family:"微软雅黑";font-weight:bold;margin:20px 50px;}.nav li{float:left;margin-right:1px;}.nav li a{text-decoration:none;line-height:30px;background-color:#EEEEEE;color:#000000;display:block;width:120px;text-align:center;}.nav li a:hover{background-color:#FF6600;color:#FFFFFF;}.nav li ul{display:none;}.nav li ul li{margin-top:1px;position:relative;}/*鼠标移到相应元素上显示二级菜单*/.nav li:hover ul{display:block;width:120px;}.nav li:hover ul li ul{display:none;}.nav li:hover ul li ul li{margin-left:1px;}/*鼠标移到相应二级菜单元素上显示三级菜单*/.nav li ul li:hover ul{display:block;position:absolute;top:0px;left:120px;}</style></head><body><ul class="nav"> <li><a href="#">首页</a></li> <li><a href="#">课程大厅+</a> <ul> <li><a href="#">视频课程+</a> <ul> <li><a href="#">Java</a> <li><a href="#">PHP</a> <li><a href="#">C语言</a> </ul> </li> <li><a href="#">案例学习+</a> <ul> <li><a href="#">编程练习</a> <li><a href="#">实例操作</a> <li><a href="#">答案解析</a> </ul> </li> <li><a href="#">交流学习</a></li> </ul> </li> <li><a href="#">学习中心+</a> <ul> <li><a href="#">前端课程+</a> <ul> <li><a href="#">HTML/CSS</a> <li><a href="#">JavaScript</a> <li><a href="#">jQuery</a> </ul> </li> <li><a href="#">手机开发+</a> <ul> <li><a href="#">IOS开发</a> <li><a href="#">WP开发</a> <li><a href="#">安卓开发</a> </ul> </li> <li><a href="#">后台编程</a></li> </ul> </li> <li><a href="#">关于我们</a></li></ul></body></html>
効果:
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
