HTML5 と CSS3 だけを使用して垂直ナビゲーション バーを作成しようとしています。メニューを左側に表示し、ページの残りの部分を右側に表示することをお勧めします。ユーザーが下にスクロールすると、メニューがユーザーと一緒に下に移動します。これまでのところ、垂直メニューは希望どおりに見えていますが、残りを完了することはできませんでした. 私がこれまでに試した解決策はいずれも、奇妙な方法でページを構成するか、Javascript を使用することを意味していました。これは HTML5 と CSS3 だけで可能ですか?
CSS
/* Menu Navigation Properties */
nav
{
text-align: center;
padding-right: 1.0em;
}
/* Menu container */
nav ul
{
float: left;
list-style-type: none;
padding-top: 0;
padding-left: 0;
padding-right: 0.75em;
}
/* Menu item container */
nav ul li
{
margin-top: 0em;
margin-left: 0.15em;
margin-right: 0.15em;
}
/* Menu item Appearance */
nav ul li a
{
background-color: black;
color: #D0E2F1; /* Light Blue */
height: 2em;
line-height: 2em;
width: 9em;
display: block;
border-width: 0.1em;
border-style: solid;
border-color: #dcdce9;
text-decoration: none;
text-align: center;
}
/* Menu item hovered over by user */
nav ul li a:hover
{
background-color: #D0E2F1; /* Light Blue */
color: black;
}
/* Current Page on the Menu */
nav ul li a.current
{
font-weight: bold;
}
HTML ファイル
<html>
<body>
<nav>
<!-- Menu Item List -->
</nav>
<h1>Page Title</h1>
<!-- rest of page -->
</body>
</html>