상단고정 투명 네비게이션 만들기 / visaul위에 올라오는 Navigation
최근에 웹에서 navigation 바 부분이 투명하게 visual위로 올라온 모습을 많이 볼수있다.
디자인 트렌드가 이렇다는데.. 기존에 네비게이션 자체가 영역을 차지하고
고정되어있는거보다 투명하게 올라왔다가 스크롤을 내리면 배경색이 채워지면서
스크롤을 따라 고정된채로 움직이는 것이 고급스럽고 유저가 페이지를
사용하는데 도움이 되기 때문이다.
그런데 이렇게 만들려면 visual 이미지자체가
어두우면서 글씨를 돋보이게 하는 이미지여야 할듯..?
어쨌든, 오늘은 이렇게 고정된 네비게이션바를 만드는 법을 알아보겠다.
<div id="wrap">
<header id="header">
<div class="inner">
<h1 class="logo">
<a href="#">
<img src="./images/logo_kakao.png" alt="kakao">
</a>
</h1>
<nav class="nav">
<h2 class="blind">메인 네비게이션</h2>
<ul class="gnb clear">
<li><a href="#">카카오</a></li>
<li><a href="#">투자정보</a></li>
<li><a href="#">서비스</a></li>
<li><a href="#">소셜임팩트</a></li>
<li><a href="#">고객지원인재영입</a></li>
</ul>
</nav>
</div>
</header><!--header end-->
<div id="visual-slider">
<div class="inner">
<div class="visual-txt">
<h2> 카카오는 새로운 연결을 통해<br>
더 편리하고 즐거운 세상을 꿈꿉니다. </h2>
<a href="#" class="btn_more">자세히 보기</a>
</div>
</div>
</div><!--visual-slider end-->
</div>html 구조는 이렇게 만들어놓고, 바로 css로 들어간다.
visual 윗부분에 고정시키기 위해서는 header에 position:absolute속성을 주어야한다.
position:absolute를 사용하면 자리를 차지 하지못하고 position:relative를 기준으로
width, height모두 0이되며 그 윗부분에 겹쳐지게 된다.
일단 이렇게 css를 적용하면
원래 기본적으로 만들던 nav와 visual파트가 완성된다.
여기서 header를 visual위로 올라오고, 투명하게 만들고싶다면
header에 position:absolute를 적용하면 상위에 있는 position 값을 기준으로 left, top값이 0이되어서
상단에 붙었고, width:100%와 hegith값을 확보하여 header안에 있는 element들이 그대로 자리잡을수 있게 해주었다.
투명하게 만들고 싶으면 background-color를 빼면된다.
그럼 이렇게됨.
그리고 여기서 z-index를 줘야하는 이유
z-index값이 없을경우 visual이 header를 덮어버려서 header부분을 선택할수가 없게된다.
그래서 100정도주면 된다.
이제 스크롤을 내리면 header가 변해야하는데
아직 script적용은 안했기 때문에...
오늘은 여기서 끝!