세로 네비게이션 질문입니다.
본문
밑의 코드로 페이지 좌측에 네비게이션을 만들었는데요,
좌측의 네비게이션이 고정이아닌 스크롤따라서 올 수 있도록 할 수 있을까요?
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css" href="new.css">
<style>
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
.main{
margin-top:40px;
text-align:center;
font-size:1.7em;
}
a{
text-decoration:none
}
.wear{
margin-top:2em;
text-align: center;
font-size:30px;
}
.nav1{
text-align: center;
font-family: 'Hepta Slab', serif;
font-weight: 300;
word-spacing: 5em;
color:black;
}
body {
margin: 0;
}
ul {
position: absolute;
list-style-type: none;
margin: 0;
padding: 0;
width: 15%;
left: 0px;
top: 0px;
background-color: #f1f1f1;
height: 500%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
margin-top: 89px;
background-color: #c6a39c;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
</style>
<body>
<div class="main">
<h3><a href="brands.html">Brand</a><h3>
</div>
<div class="nav1">
<a href="wear.html" style="text-decoration:none;">Wear</a>
<a href="#" style="text-decoration:none;">Jewelry</a>
<a href="#" style="text-decoration:none;">Watch</a>
</div>
<ul>
<li><a class="active" href="wear">Wear</a></li>
<li><a href="#news">Jewelry</a></li>
<li><a href="#contact">Watch</a></li>
<li><a href="#">About</a></li>
</ul>
<script type="text/javascript">
</script>
</body>
</html>
답변을 작성하시기 전에 로그인 해주세요.
