사용 가능한 블로그의 범위가 그다지 넓은편은 아니지만 요청하시는 분이 몇몇 계셔서 공개합니다. 이번 글에서 다룰 플로팅 상단 메뉴바는 본 블로그의 상단에 있는 것과 똑같은 모양으로, 예전에 이와 관련해 올린 글들을 참고하시면 디자인을 원하시는 대로 수정할 수 있습니다. 다만 해당 내용들은 기존에 이미 다뤘던 내용들이기 때문에 이번 포스트에서 자세히 다루지는 않겠습니다.
1. Style.css 파일에 삽입할 내용
#float_menu {
position: relative;
margin: auto;
padding: 0;
/* 플로팅 레이어가 블로그 상단에 달라붙지 않을때 margin-top값을 조정해주시면 됩니다.
레이어의 넓이는 width의 값을 변경함으로써 조정하실 수 있습니다 */
width:980px;
margin-top: -8px;
}
.underlinemenu{
/* 글자 크기와 레이어의 너비, 높이를 원하시는 대로 조정해주시면 됩니다.
(앞의 너비와 동일해야 합니다) */
font-size:10pt;
width:980px;
height:24px;
font-weight: bold;
margin:0;
padding:0;
position:fixed;
background-color:#ffffff;
border:1px solid #e0e0e0;
box-shadow: 0px 0px 15px rgba(0,0,0,.3);
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,.3);
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,.3);
-o-box-shadow: 0px 0px 15px rgba(0,0,0,.3);
-moz-border-radius-bottom-left: 10px;
-khtml-border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-bottom-right: 10px;
-khtml-border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.underlinemenu ul{
padding: 0 0 0 0;
margin: 0;
text-align: left;
list-style:none;
/* 레이어 내용이 상단과 얼마나 이격될지를 margin-top값으로 조정해주시면 됩니다. */
margin-top:4px;
}
.underlinemenu ul li{
float:left;
/* 레이어 내용이 좌측과 얼마나 이격될지를 margin-left값으로 조정해주시면 됩니다. */
margin-left:10px;
}
.underlinemenu ul a{
color: #494949;
padding: 0;
margin-right: 5px;
text-decoration: none;
border-bottom: 3px solid #ffffff;
}
.underlinemenu ul li a:hover, .underlinemenu ul li a.selected{
border-bottom-color: #568BB9;
}
.underlinemenu ul ul {
display:none;
position:absolute;
background-color:#fff;
box-shadow: 0px 5px 10px rgba(0,0,0,.3);
-moz-box-shadow: 0px 5px 10px rgba(0,0,0,.3);
-webkit-box-shadow: 0px 5px 10px rgba(0,0,0,.3);
-o-box-shadow: 0px 5px 10px rgba(0,0,0,.3);
-moz-border-radius-bottom-left: 7px;
-khtml-border-bottom-left-radius: 7px;
-webkit-border-bottom-left-radius: 7px;
border-bottom-left-radius: 7px;
-moz-border-radius-bottom-right: 7px;
-khtml-border-bottom-right-radius: 7px;
-webkit-border-bottom-right-radius: 7px;
border-bottom-right-radius: 7px;
margin-top:0px;
}
.underlinemenu ul li:hover ul { display: block; }
.underlinemenu ul ul li { float:none; margin:3px 3px 6px 6px;}
2. Skin.html 파일에 삽입할 내용
원하는 대로의 메뉴 리스트를 작성한 후 skin.html 파일 내부의 <body> 바로 아래쪽에 넣어주시길 바랍니다. 다만 이는 편의상 <body>아래에 넣어주시기를 권고하는 것일뿐 실제로는 아무곳에나 넣어주셔도 상관은 없습니다.
<div class="underlinemenu">
<!-- 원하시는 대로 메뉴 리스트를 작성해주시면 됩니다. -->
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
</div>
</div>
3. 완성된 예제
'Blog Tip > Design' 카테고리의 다른 글
| 티스토리 카테고리 목록 갤러리 형태로 보기 (33) | 2013.08.05 |
|---|---|
| 원하는 모양대로 H 태그를 꾸며 사용하기 (2) | 2013.07.09 |
| 플로팅 SNS 배너 달기 (1) | 2013.03.05 |
| 스킨 제공 상단 메뉴바에 드롭다운 메뉴 넣기 (5) | 2013.03.04 |
| CSS를 이용해 드롭다운(Drop Down) 메뉴 만들기 (2) (24) | 2013.03.01 |
댓글