最も単純なメニュー code_html/css_WEB-ITnose-htmlチュートリアル-php.cn

最も単純なメニュー code_html/css_WEB-ITnose

Jun 24, 2016 am 11:42 AM

 1 &lt;!DOCTYPE html&gt; 2 &lt;html&gt; 3 &lt;head&gt; 4 &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt; 5 &lt;title&gt;最简单的菜单&lt;/title&gt; 6 &lt;style&gt; 7     *{margin: 0;padding: 0;} 8     .moyu ul a{font-family: '微软雅黑';font-size: 14px;color: #333;text-decoration: none;} 9     .moyu ul a:hover{color: #000;text-decoration: none;}10     .moyu ul li{width: 100px;height: 35px;line-height: 35px;text-align: center;position: relative;}11     .moyu ul li:hover{background: #c1c1c1;}12     .moyu ul{width: 100px;height: auto;position: absolute;background: #DADADA;list-style: none;}13 14     .moyu ul.nav2{left: 99px;top: 0;display: none;}15     .moyu ul.nav3{left: 99px;top: 0;display: none;}16     .moyu .nav1 .li1:hover ul.nav2{display: block;background: #c1c1c1;}17     .moyu .nav2 .li2:hover ul.nav3{display: block;background: #c1c1c1;}18     .moyu .nav2 ,.moyu .nav2 li:hover {background:#ccc;}19 &lt;/style&gt;20 &lt;/head&gt;21 &lt;body&gt;22 &lt;!--代码部分begin--&gt;23 &lt;div class=&quot;moyu&quot;&gt;24 &lt;ul class=&quot;nav1&quot;&gt;25     &lt;li class=&quot;li1&quot;&gt;&lt;a href=&quot;#&quot;&gt;一级导航&lt;/a&gt;26         &lt;ul class=&quot;nav2&quot;&gt;27             &lt;li class=&quot;li2&quot;&gt;&lt;a href=&quot;#&quot;&gt;二级导航&lt;/a&gt;&lt;/li&gt;28             &lt;li class=&quot;li2&quot;&gt;&lt;a href=&quot;#&quot;&gt;二级导航&lt;/a&gt;29                 &lt;ul class=&quot;nav3&quot;&gt;30                     &lt;li class=&quot;li3&quot;&gt;&lt;a href=&quot;#&quot;&gt;三级导航&lt;/a&gt;&lt;/li&gt;31                     &lt;li class=&quot;li3&quot;&gt;&lt;a href=&quot;#&quot;&gt;三级导航&lt;/a&gt;&lt;/li&gt;32                     &lt;li class=&quot;li3&quot;&gt;&lt;a href=&quot;#&quot;&gt;三级导航&lt;/a&gt;&lt;/li&gt;33                     &lt;li class=&quot;li3&quot;&gt;&lt;a href=&quot;#&quot;&gt;三级导航&lt;/a&gt;&lt;/li&gt;34                 &lt;/ul&gt;35             &lt;/li&gt;36             &lt;li class=&quot;li2&quot;&gt;&lt;a href=&quot;#&quot;&gt;二级导航&lt;/a&gt;&lt;/li&gt;37             &lt;li class=&quot;li2&quot;&gt;&lt;a href=&quot;#&quot;&gt;二级导航&lt;/a&gt;&lt;/li&gt;38         &lt;/ul&gt;39     &lt;/li&gt;40     &lt;li class=&quot;li1&quot;&gt;&lt;a href=&quot;#&quot;&gt;一级导航&lt;/a&gt;&lt;/li&gt;41     &lt;li class=&quot;li1&quot;&gt;&lt;a href=&quot;#&quot;&gt;一级导航&lt;/a&gt;&lt;/li&gt;42     &lt;li class=&quot;li1&quot;&gt;&lt;a href=&quot;#&quot;&gt;一级导航&lt;/a&gt;&lt;/li&gt;43     &lt;li class=&quot;li1&quot;&gt;&lt;a href=&quot;#&quot;&gt;一级导航&lt;/a&gt;&lt;/li&gt;44     &lt;li class=&quot;li1&quot;&gt;&lt;a href=&quot;#&quot;&gt;一级导航&lt;/a&gt;&lt;/li&gt;45 &lt;/ul&gt;46 &lt;/div&gt;47 &lt;!--代码部分end--&gt;48 &lt;/body&gt;49 &lt;/html&gt;

ログイン後にコピー

上記のコードはメニューの概念を簡単に理解できます。

メニューはボックス内の小さなボックスの開始(display:block;)と終了(display:hidden;)です

考え方は同じですが実装方法が異なります純粋なCSSで記述できます。、JavaScript または jQuery。または、より複雑なプラグインブートストラップ、jQuery UI など。

このウェブサイトの声明

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