[CSS] 네비게이션 메뉴바 예제

상단 네비게이션 메뉴바를 나름 코딩해 보았다.

주된 메뉴는 투명 배경색으로 처리하고 롤오버시 서브 메뉴가 나타나는 방식이다.

jquery 소스가 없는 순수 CSS 만으로 코딩해 보았다.

 

<style>
#mainmenu {float:left; width:1000px; height:79px;clear:both;}
#mainmenu ul.navi {
    margin:0;padding:0;
    list-style:none;
    background:  #39F; 
    position:relative;
}
 
#mainmenu ul.navi li { 
  display:inline;
}
 
#mainmenu ul.navi li a {  
  width:200px;
  float: left; 
  text-align:center;
  font: bold 15px 'NanumGothic';
  line-height: 40px; 
  color: #000000; 
  text-decoration: none; 
/*  text-shadow: 1px 1px 1px #880000; */
 
  /* 배경색만 투명하게 */
  background: #ffffff; 
  background-color: rgba( 255, 255, 255, 0.5 );
}
 
#mainmenu ul.navi  ul {  
  display: none; 
}
 
 
#mainmenu ul.navi li:hover > ul {
  position: absolute;  
  display: block;  
  width: 200px; 
  height: 30px; 
  margin: 40px 0 0 0; 
}
 
#mainmenu ul.navi li:hover > ul.mainSub1 { }
#mainmenu ul.navi li:hover > ul.mainSub2 { left:200px; }
#mainmenu ul.navi li:hover > ul.mainSub3 { left:400px; }
#mainmenu ul.navi li:hover > ul.mainSub4 { left:600px; }
#mainmenu ul.navi li:hover > ul.mainSub5 { left:800px; }
 
 
#mainmenu ul.navi li:hover > ul li a { 
  float: left; 
  font: bold 13px 'NanumGothic'; 
  line-height: 45px; 
  color: #333333; 
  text-decoration: none; 
  /*text-shadow: 1px 1px 1px #110000; */
  margin: 0; 
  padding: 0 0 0 0; 
  background: #e4e4e4; 
/*
  background: #ffffff; 
  background-color: rgba( 255, 255, 255, 0.6 );
*/
}
 
#mainmenu ul.navi li:hover > ul li a:hover {
  color: #120000; 
  text-decoration: none; 
  text-shadow: none; 
  background: #f5f5f5;
}
 
</style>
 

 

<div id="mainmenu">
    <ul class="navi">
        <li><a href="#">출판부소개</a>
            <ul class="mainSub1">
                <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>
                <li><a href="#">찾아오시는길</a></li>
            </ul>
        </li>
        <li><a href="#">도서목록</a>
            <ul class="mainSub2">
                <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>
                <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>
                <li><a href="#">우수학술도서</a></li>
            </ul>                 
        </li>
        <li><a href="#">구입안내</a>
            <ul class="mainSub3">
                <li><a href="#">이용안내</a></li>
                <li><a href="#">도서문의</a></li>
            </ul>            
        <li>
        <li><a href="#">출판신청</a>
            <ul class="mainSub4">
                <li><a href="#">출판신청안내</a></li>
                <li><a href="#">출판신청</a></li>
            </ul>                
        <li>
        <li><a href="#">고객센터</a>
            <ul class="mainSub5">
                <li><a href="#">공지사항</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">고객문의</a></li>
                <li><a href="#">출판부갤러리</a></li>
                <li><a href="#">자료실</a></li>
                <li><a href="#">입찰공고</a></li>
            </ul>                
        <li>
    </ul>
</div>