롤오버 메뉴바 만드는 방법

제 블로그 상단에 보이시는 것처럼 롤오버 메뉴바를 만드는 방법입니다.

 

Free Wed Code

 

<div id="submenu"><div class="inner area">

    <div class="subblogMenu">

    <ul id="rollover">

    <li id="a"><h2>Blog Tips<h2>

      <ul>

        <li><a href="http://me2day.textcube.com/category/#>A</a></li>

        <li><a href="http://me2day.textcube.com/category/#">B</a></li>

        <li><a href="http://me2day.textcube.com/category/#">C</a></li>

      </ul>

    <li id="b"><h2>Web Service</h2>

      <ul>

        <li><a href="http://me2day.textcube.com/category/#>A</a></li>

        <li><a href="http://me2day.textcube.com/category/#">B</a></li>

        <li><a href="http://me2day.textcube.com/category/#">C</a></li>

      </ul>

     <li id="c"><h2><img src="wine.jpg" alt="" /></h2>

       <ul>

        <li><a href="http://me2day.textcube.com/category/#">A</a></li>

        <li><a href="http://me2day.textcube.com/category/#">B</a></li>

        <li><a href="http://me2day.textcube.com/category/#">C</a></li>

       </ul>

     </li>

     </ul>

        </div>

 

  </div></div>

  <hr />

  <!-- /menu -->

위의 웹코드 중 굶은 표시가 된 부분을 자신의 웹주소로 바꾸시면 됩니다.

이후 원하시는 위치에 복사해서 붙혀넣기 하시면 됩니다.

대게 HTML란에서 </Header> 혹은</head>로 끝나는 부분 다음에 붙여넣으시면 됩니다.

위치설정은 제 글 중 블로그 광고 자신 원하는 곳에 노출하는 방법 로 설정하실 수 있습니다.

 

CSS Web Code

 

/* ***** SubMenu **************************************** */
#submenu .inner    { font-size: 1.12em; padding:0px 0px 0px 0px;}
#submenu .subblogMenu    { letter-spacing:0em;}
#submenu .subblogMenu li    { display:inline; padding-right:10px;}
#submenu .subblogMenu a   { color:#FFFFFF; text-decoration:none; font-weight:bold;}

#rollover { position: absolute; left: 130px; width: 1000px; top: 8px; margin:auto;}
#rollover a { text-align:center; text-decoration:none; color:#FFFFFF; background-color:#A4C5DE; display:block; font-size:1em; font-weight:bold;}
#rollover li { float:left; width:80px;}
#rollover h2 { height:30px; margin:0; padding:0;}
#rollover h2 img { display:block;}
#rollover #a h2 { background-image:url(1.jpg);}
#rollover #b h2 { background-image:url(2.jpg);}
#rollover #c h2 { background-image:url(3.jpg);}
#rollover #d h2 { background-image:url(4.jpg);}
#rollover #e h2 { background-image:url(5.jpg);}
#rollover #f h2 { background-image:url(6.jpg);}
#rollover li:hover h2 img, #rollover li.sfhover h2 img { display:none;}
#rollover li ul { display:none;}
#rollover li:hover ul, #rollover li.sfhover ul { display:block;}
#rollover li ul li:hover a, #rollover li ul li.sfhover a{ background-color:#FFFFFF; color:#A4C5DE;}

위의 CSS를 그냥 붙여넣으면 제 블로그의 메뉴바처럼 됩니다. 굵게 표시된 부분을 파일업로드로 올린 파일명으로 바꿔주시면 이미지가 표시됩니다.