BinaryDevelop
  1. ホーム
  2. Web制作
  3. HTML/Xhtml

HTML6 メニューの折りたたみとアコーディオンメニューのサンプルコード

2022-01-08 03:01:02

ページのメイン部分です。 

<body> <ul id="menu">
          <li>   
                 <a href="#">Level 1 Menu 1</a>
                 <ul>
                        <li>Secondary Menu 1-1</li>
                        <li>Secondary Menu 1-2</li>
                        <li>Secondary Menu 1-3</li>
                 </ul>       
          </li>
          <li>    
                  <a href="#">Level 1 Menu 2</a>
                  <ul>
                        <li>Secondary Menu 2-1</li>
                        <li>Secondary Menu 2-2</li>
                        <li>Secondary Menu 2-3</li>
                  </ul>   
          </li>
          <li>
                  <a href="#">Primary Menu 3</a>
                  <ul>
                        <li>Secondary Menu 3-1</li>
                        <li>Secondary Menu 3-2</li>
                        <li>Secondary Menu 3-3</li>
                  </ul> 
          </li>
          <li>
                  <a href="#">Primary Menu 4</a>
                  <ul>
                        <li>Secondary Menu 4-1</li>
                        <li>Secondary Menu 4-2</li>
                        <li>Secondary Menu 4-3</li>
                  </ul> 
          </li>
  <ul>
</body>

折りたたみメニューの例です。

cssセクション 

<head>
<style type="text/css">
li{
    list-style:none; remove the list front graphic
}
li a{
    color:#123; set first-level menu text color
}
#menu ul{
    display:none; set the secondary menu to not display by default
}
#menu>li:hover ul{
    display:block; show the secondary menu when the mouse slides over the primary menu
}
</style>
</head>

アコーディオンメニューの例です。

cssセクション 

<head>
<style type="text/css">
li{
    list-style:none; remove the list front graphic
}
li a{
    color:#123; set first-level menu text color
}
#menu>li,#menu>li>a,#menu>li>ul{
    float:left; primary menu, secondary menu left shift
}
#menu>li>a{
    display:block;
    background-color;red;    
}
#menu>li:hover ul{
    display:block;
}
#menu>ul{
     dispaly:none;
     width:100px.
     background-color:#123 ;
     padding-top:20px;
}
</style>
</head>

概要

上記はHTML6崩壊メニューとアコーディオンメニューのサンプルコードへの小さな紹介です、私はそれがあなたの助けになることを願って、あなたが何か質問がある場合は、私にメッセージを残してください、私は速やかに皆に返信されます。ここでまた、スクリプトホームウェブサイトのサポートに非常に感謝します
この記事がお役に立つと思われる方は、ご自由に転載してください！ソースを明記してください！ありがとうございます。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します