[스킨만들기] 4) 새로운 메뉴모양

세부 메뉴는 마우스를 가져가면, 띠용 하고 나옴 ㅎ.ㅎ

 

1. skin.html

<!-- 카테고리 영역 -->
<div class="category">
    
 분류 전체보기 
  
 Data 
  
 생각정리 
 데이터 분석·통계 
 python·알고리즘 


 Project 
  
 데이터 가지고 놀기 
 따릉이 및 자전거 데이터 분석 
 음악 가사 분석 


 Study 
  
 모두를 위한 딥러닝 시즌1 
 파이썬으로 데이터 주무르기 


 Play 
  
 PC 게임 
 모바일게임 
 드라마영화애니 
 끄적끄적 


 Archived 
  
 ADsP 
 맛집 탐방 






</div>

<!-- 아래 하단 -->
<div id='sidebar'>
    <!-- 검색 -->
    <div class="search">
        <input type="text" name="" value="" onkeypress="if (event.keyCode == 13) {  }"/ class="input">
        <input value="검색" type="button" onclick="" class="submit"/>
    </div>

    <!-- 몇명왔는지 -->                
    <div id="counter">
        <span class="today">| TODAY:  </span>
        <span class="yesterday">| YESTERDAY:  |    </span>
        <span class="total">TOTAL:  |</span>
    </div>    
            
    <!-- 최신 댓글 -->    
    <div class="recentComment">
        <h2>최신 댓글</h2>
        <ul id="recentComments">
            <li>
                <a href=""></a>
                <span class="info_wrap">
                    <span class="name"></span>
                    <span class="date"></span>
                </span>
            </li>        
        </ul>
    </div>
</div>

 

2. css

2-1) 기본 색 설정

/* 이름, 날짜, (0) 색 설정 */
.name { color: #6E7783; }
.date { color: #77AAAD; }
.cnt { color: #9DC3C1; }

/* count 색 */
.today{ color: #954F4F; }
.yesterday{ color: #D2B29B; }
.total{ color: #888689; }

 

2-2) 카테고리 설정

.category {
    margin-top: 1em;
    min-width: 1200px;
    text-align: left;
    margin-left:10%;
    background-color: white;
}

/* 카테고리 ul li 들 앞에 붙는 쩜들 없애기 */
.category ul, li{margin: 0; padding:0; list-style:none; text-decoration: none;}

/* 크기나 색설정들 */
.category ul li ul li{ 
    width: 150px; 
    height: auto; 
    margin-left: auto;
    margin-right: auto;
    float:left;
    padding-left: 1em;
    font-size: 15px;
}
.category ul li ul li a:hover{ color: #6E7783; }
.category ul li ul li ul li{
    margin-top: -1px;
    font-size: 13px;
    z-index:100;
    padding-left: 4px;
    background-color: #9DC3C1;
    border: white solid 2px;
    border-radius: 5px;
}

.category ul li ul li ul li a{
    color: white;
    margin:0;
}
.category ul li ul li a{ color: #a3c9c7;}
.link_tit { display: none; }
.c_cnt {
    font-size: 8px;
    line-height: 220%;
    color: #444f59;
}

/* 마우스이용! 세부 메뉴가 보이고 안보이고 설정! */
.category ul li ul li ul{ visibility: hidden;  }
.category ul ul li:hover ul{ visibility: visible;}​