2009. 6. 21. 14:13

CSS 풀다운메뉴...CSS 가로형 메뉴

2009. 6. 21. 14:13 in life & Computer

한 사이트를 만들어 주는데, 아래와 같이 가로형 메뉴를 만들었다. 


플래쉬를 쓰면 좋으나, 플래쉬를 쓰는것을 별로 달가와 하지 않는 나이기에.. 오로지..CSS로만 견뎌보기로 계획을 잡았다.

난관점
영문 메뉴의 메뉴명 길이가 너무 길어서, 포샵에서 디자인한 것이 IE6에서 길이를 맞추는것이 좀 힘들다.
IE6버젼과 표준 웹브라우져들간의 CSS호환이 너무 틀렸다...
IE7에서는 top menu에서 서브메뉴를 선택할시 마우스를 이동하면 서브메뉴가 사라져 버리는 현상이 나타나며, 서브메뉴들이 중구난방이 되어버린다. 
해결 
IE6이하 버젼에서는 긴 메뉴명을 두 줄 표현으로 해결하고..
IE6이하의 버젼을 위하여 따로 ui메뉴를 만들지 않고  div태그보다는 테이블태그를 이용하여 해결했다.
IE7버젼에서는 여전히, CSS가 의도대로 작동하지 않는다..IE7에서만 서브메뉴를 바탕색과 동일한 폰트색으로 정하면, 접속자는 서브메뉴가 있는것을 눈치채지 못한다. (꼼수)

-> 아직 IE6을 쓰는 비율이 전세계적으로 60%에 달하니, IE6을 포기할수는 없다. 그렇다고 IE8이나 파폭,크롬같은 표준웹브라우져를 포기할수도 없어서 테이블 태그라는 꼼수를 부렸다..ㅋ

-> 작동 : IE5.5, IE6에서는 의도한바 대로 두줄 맞춤으로 가로형 메뉴를 쓸수있다.
IE8,크롬,사파리,파폭,오페라,플럭등에서는 완벽히 서브메뉴를 사용할수 있다.
아쉽게도 IE7에서는 서브메뉴를 포기한다.

소스출처:  ul태그에 대한 메뉴형성 소스는 Stu Nicholls  CSSplay  Professional series drop 에서 공개형 소스를 가지고 변형했다.http://www.cssplay.co.uk/menus/pro_drop2

파이어폭스, 크롬, 오페라, 네스케이프

익스플로러 5.5

익스플로러 6.0

익스플로러 7.0 ㅜ.ㅜ

익스플로러 8.0

HTML div

<head>
<link href="style.css" rel="stylesheet" type="text/css" charset="UTF-8" media="all" />
<!--[if IE 7]><link href="ie7.css" rel="stylesheet" type="text/css" charset="UTF-8" media="all" /><![endif]-->
</head>

<body>
<div id="nav_menu">
      <!-- 네비게이션 : IE7의 문제점 -->
      <!-- 네이게이션 시작 -->
      <ul class="menu2">
<li class="top"><a href="" id="about" class="top_link"><span class="down"> About Daon Company</span><!--[if gte IE 7]></a><![endif]-->

        <ul class="sub">
          <table valign=top><tr><td>
<li><a href="../menu/">CEO Message </a></li>
</td><td>
            <li><a href="../boxes/">Overview</a></li>
          </td></tr></table>
</ul>
        <!--[if lte IE 6]></a><![endif]-->
</li>
    
<li class="top"><a href="" id="products" class="top_link"><span class="down">Products & Services  </span><!--[if gte IE 7]></a><![endif]-->

        <ul class="sub">
          <table><tr><td valign="top" width="25%">
<li><a href="../menu/">BLINNO SERIES </a></li>
</td><td valign="top" width="50%" id="pro">
            <li><a href="../boxes/">Production facilities & Engineering Service</a></li>
            </td><td valign="top" width="50%">
            <li><a href="../boxes/">Coating Service</a></li>
          </td></tr></table>
</ul>
        <!--[if lte IE 6]></a><![endif]-->
</li>
    
<li class="top"><a href="" id="custom" class="top_link"><span class="down">Customer Support</span><!--[if gte IE 7]></a><![endif]-->

        <ul class="sub">
          <table valign=top><tr><td width="50%">
<li><a href="../menu/">Online Inquiry</a></li>
</td><td width="50%">
            <li><a href="../boxes/">Contact Us</a></li>
          </td></tr></table>
</ul>
        <!--[if lte IE 6]></a><![endif]-->
</li>

  <li class="top"><a href="" id="community" class="top_link">Community</a></li>
      </ul>
<!-- 네이게이션 끝 -->
</div>
</body>


CSS Style 정의-style.css

 /* 메뉴 네비게이션 관련 스타일 */
#nav_menu { padding-top: 15px; margin-top: 0px; font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight:bold;}
.AKASmenubar { font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight:bold;}
.menu2 {padding:0 0 0 32px; margin:0; list-style:none; height:40px; position:relative; font-family:arial, verdana, sans-serif; }
.menu2 li.top {display:block; float:left; position:relative;}
.menu2 li a.top_link {display:block; float:left; height:5px; line-height:15px; color:#000; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
.menu2 li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:20px; padding-left: 20px; padding-right: 50px;}

.menu2 li a.top_link:hover { color:#FF6600; }


.menu2 li:hover > a.top_link { color:#FF6600; }


.menu2 table {border-collapse:separate;  height:0; position:absolute; top:0; left:0;}


/*  링크와 하버 스타일 정의 브라우져에 따라 달리 표기*/

.menu2 a:hover {visibility:visible;}
.menu2 li:hover {position:relative; z-index:200;}

/* 스크린에 표시되는 서브 메뉴들. */
.menu2 ul, 
.menu2 :hover ul ul, 
.menu2 :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul ul,
.menu2 :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

.menu2 :hover ul.sub {left:2px; top:20px; padding:3px 0; white-space:nowrap; width:150px; height:auto; font-weight:bold}
.menu2 :hover ul.sub { _width: 400px !important;}
.menu2 :hover ul.sub li {  display:block; height:20px; position:relative; float:left; margin-left: 10px;}
.menu2 :hover ul.sub li {  _width: 124px !important; _padding-top: 0px; _margin-top:0px; _margin-left: 0px !important;} 
.menu2 :hover ul.sub li a {display:block; font-size:11px; height:20px;  line-height:20px; text-indent:5px; color:#000; text-decoration:none;}
.menu2 :hover ul.sub li a.fly {background:#fff url(prodrop2/arrow.gif) 80px 7px no-repeat;}
.menu2 :hover ul.sub li a:hover { color:#4E72D8; }
.menu2 :hover ul.sub li a.fly:hover {}
.menu2 :hover ul li:hover > a.fly {} 

.menu2 :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul,
.menu2 :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; white-space:nowrap; width:93px; z-index:200; height:auto;}
 
ie7.css

 .menu2 :hover ul.sub li a {display:block; font-size:11px; height:20px;  line-height:20px; text-indent:5px; color:#EFF2EB; text-decoration:none;}
.menu2 :hover ul.sub li a:hover { color:#EFF2EB; }

-> 자 이제 작업좀 하자..메뉴만 치근거리지 말고...


스타일 없을때 이정도면 읽는데 지장없겠지..

저작자표시 비영리 동일조건

'life & Computer' 카테고리의 다른 글

티스토리 초대장 5장 발부합니다.  (8) 2009.07.25
gmail을 이용하여 자기도메인 메일만들기. make my domain mail by Gmail service  (0) 2009.07.07
브라우져 전쟁 IE, Opera , Firefox , Safari , Chrome 그리고 W3C  (3) 2009.06.17
인천북구도서관 - 인터넷속도  (0) 2009.06.10
역시 토론토 uTorrent  (1) 2009.05.31
Posted by bestakas

티스토리툴바