애니빌드.LAB
토론방
소스관련 메뉴바 배경색을 투명하게.
- 김**곤
- 2016-06-22 16:03:00
- hit3968
- http://lab.anybuild.co.kr/bbs/qna/6012
메뉴바 배경을 투명하게 하려고 합니다.
위의 로고는 배경이 투명해서 배경 이미지가 보이는데 메뉴바 배경은 흰색이 그대로 남아서요...
그리고 메뉴에 마우스를 가져가면 아래 서브메뉴가 나오면서 아래로 열리는데...(슬라이드 되어서)
전체창으로 내려오게 할수 있나요?
예를 들어서
http://www.casamingo.co.kr/index/index.php
BRAND에 마우스를 가져가면 메뉴 있는곳만 나오는게 아니고 전체창으로 슬라이드 되어서 내려오고
서브메뉴는 중간에 메뉴있는곳만 나오는데...
이렇게 하려면 어떻게 해야하는건가요?
게시글 공유
URL복사
댓글작성
열기 닫기
열기 닫기
사이트 구조가 특이하게 잡혀있네요...
네비게이션 배경을 투명하게 하려면 네비게이션에 정의된 색상을 모두 제거를 해주시기 바랍니다.
현재 스킨부분에서 네비게이션이 출력되고 있는데 해당 네비게이션 출력되는 부분에 소스 수정에 겨서서 색상 부분을 모두 제거를 해주시기 바랍니다.
크롬브라우져의 요소검사를 이용을 해서 직접 제거를 하면서 체크를 해보시면 됩니다.
첫번째 영역을 잡으니까 이와 같니 나왔구요..우측에 background에 #fff 가 정의되어있습니다.
이 부분을 css에서 제거를 해야되고
실제 크롬에서 체크해제를 해보니 회색으로 나오길래 바로 윗단에 보니 이와 같이 정의되어있어서 이 부분도 체크를 해제했습니다.
마지막으로 div 정의된 부분에 보니 최종적으로 이와 같이 정의되어있어 이 부분까지 제거를 해줘야 되는 부분입니다.
디자인팜 고급자용 소스수정에 보면 클래스명 정의가 되어있습니다. 그 부분에서 위의내역을 찾아서 하나씩 제거를 하시면 됩니다.
작업을 하실때 크롬으로 일단 변경되는 내역을 확인 후 해당 파일을 찾아서 변경을 하면 보다 쉽게 변경하실 수 있습니다.
감사합니다.
그런데 문제는
http://www.casamingo.co.kr/index/index.php
이것처럼 마우스를 가져가면 전체적으로 배경이 깔려서 서브 텍스트가 보이는데
지금 우리 홈페이지는 깔리는 칼라가 없어서 서브 메뉴가 보이지 않고 마우스가 가야지만 보여지게 됩니다.
이 부분은 해결이 안되나요?
현재 슬라이드 이미지에 로고와 배경을 붙여 넣었습니다.
현재 레이아웃입니다.
<div class="layout_51949">
<div>
<div class="container_1">
{네비게이션}
</div>
</div>
</div>
배경을 네비게이션이 포함되어 있는 layout_51949_에 반투명 배경을 background-image로 깔아주셔야 합니다.
layout_51949_ 레이아웃 기준으로 설명을 드리겠습니다.
먼저 layout_51949_에 background를 적용해주시고 max-width값을 100%로 변경합니다.
그 아래 자식 div태그에 max-width:1060px;margin:* auto를 적용합니다.
container_1에 float:left를 제거합니다.
dep1에 적용되어 있는 position:absolute;left:0;top:0;을 제거합니다. 그럴경우 해당 메뉴가 슬라이드다운 될때마다 레이아웃이 늘어나면서 적용됩니다.
아래의 이미지는 배경은 흰색(반투명)으로 위의 소스를 적용하였을때의 화면입니다.
메뉴 mouseHover시