사용 가능한 블로그의 범위가 그다지 넓은편은 아니지만 요청하시는 분이 몇몇 계셔서 공개합니다. 이번 글에서 다룰 플로팅 상단 메뉴바는 본 블로그의 상단에 있는 것과 똑같은 모양으로, 예전에 이와 관련해 올린 글들을 참고하시면 디자인을 원하시는 대로 수정할 수 있습니다. 다만 해당 내용들은 기존에 이미 다뤘던 내용들이기 때문에 이번 포스트에서 자세히 다루지는 않겠습니다.

 

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 id="float_menu" >
<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. 완성된 예제

 

(http://kakkusourcetest.tistory.com/)