Sorry, no corresponding articles.
--
--
--
no comments

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments + Add Comment

Leave a comment

01
20
2012
0 comments

ドロップメニュー作りと授業見学

授業で学生たちと作ったドロップメニュー.jpg
今日のWebサイト構築のラボラトリーの授業で作ったドロップメニューです。


HTMLでリストの状態から始め、
まずは水平メニューにCSSで変化させていく過程を。


HTMLでリストを入れ子の形にして、
それらをマウスオーバーで垂直方向に表示させ、
ドロップメニューとして完成するところまで。


JICAウズベキスタン事務所の所長や調整員が、
ホラズム州の隊員の活動先を回っていて、
ウチの大学へ来られた時がちょうど授業だったので、
大学の管理職の教員と見学に。


見られてると思うと緊張しましたが、
時間内に無事やり終えて、ほっとしました。


ソースコード

HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<link rel="stylesheet" type="text/css" href="menyu2.css" />
<title>Menyu HTML</title>
</head>
<body>
<div id="bosh">
<ul class="menyu">
<li>
<a href="">Menu1</a>
<ul>
<li><a href="">Menu1-1</a></li>
<li><a href="">Menu1-2</a></li>
<li><a href="">Menu1-3</a></li>
</ul>
</li>
<li><a href="">Menu2</a></li>
<li><a href="">Menu3</a></li>
<li><a href="">Menu4</a></li>
<li><a href="">Menu5</a></li>
</ul>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
border: 0;
}

ul {
list-style-type: none;
}

div#bosh {
font-size: 16px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
line-height: 20px;
}

ul.menyu {
height: 30px;
background: #000000;
}

ul.menyu li {
float: left;
}

ul.menyu li a {
width: 100px;
display: block;
color: #FFFFFF;
text-decoration: none;
padding: 5px 10px 5px 10px;
text-align: center;
}

ul.menyu li a:hover {
background: #CCCCCC;
color: #333333;
}

ul.menyu li ul {
position: absolute;
display: none;
background: #000000;
}

ul.menyu li:hover ul {
display: block;
}

ul.menyu li li {
display: block;
float: none;
}

ul.menyu li li a {
display: block;
}

Comments + Add Comment

Leave a comment

Urgench Time

Urgench Temp

Click for Urgench, Uzbekistan Forecast

Tweets

Counter (visitor)

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。