トップ・ページの表示 注意書きの表示 掲示板に書き込む前に必ず この ”注意書き”を お読み下さい.

"Twilight"

Index Menu
(1)<FirstTitle>:JavaFXデモ/Sceneの遷移 <FirstUser>:amanojaku@管理人 (1)<FirstTitle>:Javaデモ/うるう年 <FirstUser>:amanojaku@管理人

   
   

ページの表示順:{ 新しい順/ 古い順}.
初期・ページの表示・位置:{ 先頭ページ/ 末尾ページ}.
1ページ内のスレッド表示数:







<Number>: [0000023B]  <Date>: 2021/11/15 10:22:55
<Title>: CSSデモ/超シンプルCSSドロップダウンメニュー
<Name>: amanojaku@管理人



装飾が無いのでカスタマイズはしやすい。
逆に言うと装飾が無いがゆえにガッツリとカスタマイズしなければならない。

実際のページ。
http://xd305417.html.xdomain.jp/demo/CSS_DropdownMenu.htm


<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
<!--
metaタグでcharsetをUTF-8に設定しています。
(モチロン他のキャラクターセットに変更しても良いですが)必ずcharsetに設定されているキャラクターセットでセーブして下さい。
-->
    <TITLE></TITLE>
    <style>
.MainMenu {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  column-gap: 0.5rem;
  row-gap: 0.5rem;
  padding : 0;
  margin: 0;
}
.MainMenu a {
  display: inline-block;
  padding: 0.2em 0.5em;
}
.MainMenu ul {
  padding : 0;
  margin: 0;
}
.MainMenu > li {
  display: inline-block;
  font-size: 1rem;
}
.MainMenu li {
  list-style: none;
  white-space: nowrap;
  background: #0bb;
}
.SubMenu {
  position: relative;
  display: none;
}
.SubMenu > ul {
  position: absolute;
}
.MainMenu_Item:hover > .SubMenu {
  display: block;
}
    </style>
  </head>
  <body>
<ul class="MainMenu" >
  <li class="MainMenu_Item" >
    <a href="#">Menu A</a>
    <div class="SubMenu" >
      <ul>
        <li><a href="#">Menu A-0</a></li>
        <li><a href="#">Menu A-1</a></li>
        <li><a href="#">Menu A-2</a></li>
      </ul>
    </div>
  </li>
  <li class="MainMenu_Item" >
    <a href="#" >Menu B</a>
    <div class="SubMenu" >
      <ul>
        <li><a href="#">Menu B-0</a></li>
        <li><a href="#">Menu B-1</a></li>
        <li><a href="#">Menu B-2</a></li>
      </ul>
    </div>
  </li>
  <li class="MainMenu_Item" >
    <a href="#">Menu C</a>
    <div class="SubMenu" >
      <ul>
        <li><a href="#">Menu C-0</a></li>
        <li><a href="#">Menu C-1</a></li>
        <li><a href="#">Menu C-2</a></li>
      </ul>
    </div>
  </li>
</ul>
  </body>
</html>

Block( Address 0000023B Identity 0000023B )






ページの表示順:{ 新しい順/ 古い順}.
初期・ページの表示・位置:{ 先頭ページ/ 末尾ページ}.
1ページ内のスレッド表示数:

   
   

管理者用 Password:

  




SMT Version 8.022(+A) Release M6.
Author : amanojaku.