모바일, PC 전환 아이콘 퀵메뉴 만들기 > 그누보드5 팁자료실

그누보드5 팁자료실

모바일, PC 전환 아이콘 퀵메뉴 만들기 정보

모바일, PC 전환 아이콘 퀵메뉴 만들기

첨부파일

모바일전환.png (3.1K) 12회 다운로드 2018-01-05 00:15:18

본문

 

그누보드 5.3버전 / 영카트 5.3버전 / 아미나빌더 에서만 사용 가능합니다.

 

왜냐하면 fontawesome Icons 를 사용하기 때문에 기본 설치되어있는 버전에서만 표시가 됩니다.

( 5.2.x 버전에서는 아이콘이 엑박으로 뜹니다)

 

테마 홈페이지 하단에 모바일, PC로 보기가 텍스트로 표현이 되는데

아이콘방식으로 아무위치에나 삽입해서 퀵메뉴처럼 표현하려고 만들었습니다.

 

모바일, PC로 전환하는 아이콘과 함께

현재 보는 화면이 모바일용인지 PC용인지 함께 표시됩니다

 

홈페이지나 쇼핑몰 페이지는 물론 관리자모드에서도 원하는 위치에 넣으시면 됩니다

 

[  관리자모드에 모바일, PC화면보기 표시된 샘플보기 ]

체험아이디: kim   비밀번호 : 1111

※ 우측 맨위 상단에 모바일,PC전환 아이콘이 표시되어 있습니다
※ 샘플페이지는 영카트NEW관리자 아이스크림S9버전으로 영카트5.3버전으로 새로 만드는중입니다

 

 

--------------------------------------------------------------------------------------------------------------------------

< 관리자모드에 팝업창 적용하기 >

 

(1) PC,모바일 전환 아이콘 삽입을 원하는 페이지를 열어서 원하는 위치에 삽입합니다

(2) 폰트아이콘으로 표시아이콘에 대한 정의만 내린것으로, 원하는 위치에 삽입하는것은 사용자가 알아서 정의하셔야 합니다

 

[code]

<style>
.pcmobile, .pcmobile a {display:inline-block;height:40px;font-size:18px;padding:0px 5px;}
.pcmobile, .pcmobile a:hover {color:#007042;}
</style>

<?php if(G5_IS_MOBILE) { //모바일버전일때 표시?>
    <div class="pcmobile"><a href="<?php echo $_SERVER['SCRIPT_NAME'] ?>?device=pc"><i class="fa fa-exchange"></i></a><i class="fa fa-mobile" title="모바일사용중"></i></div><!--PC버전으로변경-->
<?php } else { //PC버전일때 표시?>
    <div class="pcmobile"><a href="<?php echo $_SERVER['SCRIPT_NAME'] ?>?device=mobile"><i class="fa fa-exchange"></i></a><i class="fa fa-desktop" title="PC사용중"></i></div><!--모바일버전으로변경-->
<?php } //닫기?>

[code]

 

 

-------------------------------------------------------------------------------------------------------------------------

 

 

 

영카트5.3기반으로 모바일기능이 적용된 영카트NEW관리자모드 입니다

[ 아이스크림S9 베타 체험 데모사이트 ]
체험사이트  http://icecreams9.cafe24.com/adm/
체험관리자아이디 : kim    비번 : 1111

 

[ 아이스크림 모든 버전 모두 보기 ]

http://icecreamplay.cafe24.com

 

 

 

행복한 한해되시길 바랍니다^^

 

추천
1
  • 복사

댓글 2개

© SIRSOFT
현재 페이지 제일 처음으로