Entry: main  << >>
javascriptを使ったドロップダウン(プルダウン)メニュー
javascriptを使ったドロップダウン(プルダウン)メニューの作り方です。
http://jsajax.com/DropDownMenuArticle286.aspxより引用させていただいたスクリプトを、自分用にいじりやすいように多少手を加えたものです。

■htmlファイル

<html>
<head>
<title>ドロップダウン</title>
<link href="DropDownMenu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="DropDownMenu.js"></script>
</head>
<body>
<ul id="dd">
<li>
<a href="#" class="menu" id="mmenu1"
onmouseover="mopen(1);"
onmouseout="mclosetime();">Home</a>
<div class="submenu" id="menu1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime();">
<a href="#">メニュー1</a>
<a href="#">メニュー2</a>
<a href="#">メニュー3</a>
<a href="#">メニュー4</a>
</div>
</li>
<li>
<a href="#" class="menu" id="mmenu2"
onmouseover="mopen(2);"
onmouseout="mclosetime();">Download</a>
<div class="submenu" id="menu2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime();">
<a href="#">メニュー5</a>
<a href="#">メニュー6</a>
<a href="#">メニュー7</a>
<a href="#">メニュー8</a>
</div>
</li>
<li>
<a href="#" class="menu" id="mmenu3"
onmouseover="mopen(3);"
onmouseout="mclosetime();">Contact</a>
<div class="submenu" id="menu3"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime();">
<a href="#">メニュー9</a>
<a href="#">メニュー10</a>
<a href="#">メニュー11</a>
<a href="#">メニュー12</a>
</div>
</li>
</ul>

</body>
</html>

■jsファイル

http://jsajax.com/DropDownMenuArticle286.aspx
より引用

■cssファイル


#dd {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
list-style-type:none;
width:500px;
}

#dd li {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
list-style-type:none;
float: left;
}

#dd li a.menu {
margin:0px 0px 0px 0px;
padding:5px;
display: block;
text-align: center;
background: #CCCCCC;
color: #000000;
width: 100px;
text-decoration: none;
}

#dd li a.menu:hover {
background: #999999;
}

.submenu {
margin:0px 0px 0px 0px;
background: #EFEFEF;
border: 1px solid #cccccc;
visibility: hidden;
position:relative;
top:10px;left:10px;

}

.submenu a {
display: block;
text-align: left;
text-decoration: none;
padding: 5px;
color: #2875DE;
width: 98px;
}

.submenu a:hover {
background: #49A3FF;
color: #FFF;
}

20:18 | comments(0) | - | - | -
Comment








Calendar

 123456
78910111213
14151617181920
21222324252627
28293031   
<< January 2018 >>

Recommend

Search

Entry

Comment

  • リンク元のページに戻るボタン(PHP)
    Tadashi (03/13)
  • サイト全体をメンテナンスページに切り替える単純な方法
    yo5kg (06/06)
  • 再配布不可識別子の入れ方
    jumbo (04/25)
  • Foma901シリーズ用 デコメテンプレートをPCで作成する方法
    ぐみ (12/11)
  • 再配布不可識別子の入れ方
    eguti (06/04)
  • ナビゲーションをul、liで作成する時
    ビジログ (03/09)
  • 再配布不可識別子の入れ方
    nana (02/02)
  • 再配布不可識別子の入れ方
    TOM (01/22)
  • Foma901シリーズ用 デコメテンプレートをPCで作成する方法
    pon (11/09)
  • Foma901シリーズ用 デコメテンプレートをPCで作成する方法
    pon (11/09)

Archives

Category

Link

Feed

Others

無料ブログ作成サービス JUGEM

Mobile

qrcode