이 예제를 xe에 적용시키려면 어떻게 해야할까요..

Jack

2015.11.26 09:56

197

<head>

<style>

/* Base CSS */

#cssmenu {padding: 0; margin: 0; border: 0;}

#cssmenu ul,

#cssmenu ul li,

#cssmenu ul ul {list-style: none; margin: 0; padding: 0; border: 0;}

#cssmenu ul {position: relative; z-index: 397;}

#cssmenu ul li {min-height: 1px; line-height: 1em; vertical-align: middle;}

#cssmenu ul li:hover {position: relative; z-index: 399; cursor: default;}

#cssmenu ul ul {visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 398; width: 100%;}

#cssmenu ul ul ul {top: 0px; left: 99%;}

#cssmenu ul li:hover > ul { visibility: visible;}

#cssmenu ul ul {top: 0px; left: 99%;}

/* Custom CSS Styles */

#cssmenu ul {width: 200px; background: #efefef;}

#cssmenu ul ul {width: 150px; }

#cssmenu ul li {padding: 7px 10px; color: #000;}

#cssmenu ul li.hover,

#cssmenu ul li:hover {background: #ccc; color: #fff;}

#cssmenu ul a:link,

#cssmenu ul a:visited {color: #000; text-decoration: none;}

#cssmenu ul a:hover {color: #000;}

#cssmenu ul a:active {color: #ffa500;}

</style>

</head>

<div id='cssmenu'>

<ul>

   <li><a href='index.html'><span>Home</span></a></li>

   <li><a href='#'><span>Products</span></a>

      <ul>

         <li><a href='#'><span>Product 1</span></a>

            <ul>

               <li><a href='#'><span>Sub Item</span></a></li>

               <li><a href='#'><span>Sub Item</span></a></li>

            </ul>

         </li>

         <li><a href='#'><span>Product 2</span></a>

            <ul>

               <li><a href='#'><span>Sub Item</span></a></li>

               <li><a href='#'><span>Sub Item</span></a></li>

            </ul>

         </li>

      </ul>

   </li>

   <li><a href='#'><span>About</span></a></li>

   <li><a href='#'><span>Contact</span></a></li>

</ul>

</div>

위가 예제구요..

아래와같이 작동합니다

감이 잡힐듯 하면서도 안되네요 ㅠㅠㅠㅠ

asdfsadf.png [File Size:3.8KB/Download:6]

xestudio

2015.11.26 09:58

li과 ul부분에 XE 메뉴만 넣으면 바로 작동하겠네요.

추천 0
Jack

2015.11.26 10:17

@xestudio

네 그래서 이렇게 해봤는데요 왠지모르게 작동이안되더라구요... 틀린부분이 뭔지 모르겠습니다 ㅜㅜ

<div id='cssmenu'>
<ul>
   <li loop="$main_menu->list=>$key1,$val1" class="actve" |cond="$val1['selected']"><a href="{$val1['href']}" target="_blank"|cond="$val1['open_window']=='Y'"><span>{$val1['link']}</span></a></li>
      <ul cond="$val1['list']">
         <li loop="$val1['list']=>$key2,$val2" class="actve" |cond="$val2['selected']" ><a href='{$val2['href']}'><span>{$val2['link']}</span></a>
            <ul cond="$val2['list']">
               <li loop="$val2['list']=>$key3,$val3" class="actve" |cond="$val3['selected']"><a href="{$val3['href']}"><span>{$val3['link']}</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
</ul>
</div>

추천 0
키스투엑스이

2015.11.26 10:05

http://www.xeschool.com/xe/xeschool_layout_09

추천 0
Jack

2015.11.26 10:26

@키스투엑스이

네 저것과 같게 했는데 작동을안하더군요...왠지모르게..

추천 0
doorweb

2015.11.26 11:15

안되는게 첫번째 li가 윗라인에서 닫혀 있어서 그렇습니다.

추천 0
Jack

2015.11.26 11:51

@doorweb

덕분에 해결했습니다. 감사합니다.
그런데 예제와는 다르게 작동하네요 ㅜㅜ 커서를 빠르게 오른쪽으로하면 하위메뉴가 없어져버리네용...

추천 0
xestudio

2015.11.26 12:08

@Jack

CSS와 JS도 수정하셔야합니다.

추천 0
Jack

2015.11.26 12:30

@xestudio

JS는 따로없구....CSS만으로 이루어진거구영 CSS를 고쳐봐야겠네요. 감사합니당

추천 0
doorweb

2015.11.26 12:43

위 css 상으로는 커서 이동과 무관하게 작동이 되어야 합니다.
다른 변수가 어디에 있는지 몰라서...

추천 0
Jack

2015.11.26 13:07

@doorweb

해결했습니다ㅋㅋ 3단 레이아웃으로 왼쪽에 메뉴를넣고 중간 본문 이렇게되어있는데
안되더라구요 그래서 왼쪽에 있는 공간을 z-index값을 높여줬더니 해결했습니다 ㅎㅎ

추천 0