메뉴 건너뛰기

MH

Mh White Layout V1.0 가장 기본적인 것만 적용한 심플한 흰색 레이아웃입니다. 바...
게시판으로 간단한 거래장부 ... 홈페이지 의뢰를 받고 작업중 클라이언트로 부터 간단한 거래...
호스팅 이전 하면서 /xe 떼고... http://moonhouse.co.kr/gongi/483001 위의 글에서 처럼 호스...
HTML Table이 디바이스 및 화... 윤삼님이 Xetown에 올려주신 내용을 가져왔습니다. https://x...
문하우스 애드온들 문하우스의 애드온 모음집 탭 위젯을 생성하게 해주는 에디터...
Url 링크에 아이콘을 달아주... 게시글보기 링크문구 바로가기 아이콘 출력하기 팁을 애드온...
게시글보기 링크문구 바로가... 게시글 보기시 Url링크 바로가기 뒤에 아이콘을 출력하는 Tip...
게시판 글쓰기시 Tag부분 출... Xetown에 질문글이 올라 왔길래 스케치북5 게시판 옵션을 보...
"드래그하여 페이지/문... 드래그하여 페이지/문서 이동 애드온 https://xetown.com/poi...
레이아웃스킨
2018.12.04 01:39

MH FullPage 레이아웃 V1.1

조회 수 372 추천 수 0 댓글 2
Extra Form
적용된링크 https://moonhouse.co.kr/zbxe
설치경로 /layouts/mh_fullpage
자료적용 Yes

마우스 휠 한번 작동시 전체 화면 스크롤되는 FullPage 레이아웃입니다.

 

[Tip]

페이지에 Youtube코드 넣는 방법

<iframe width="560" height="315" src="https://www.youtube.com/embed/qiCVPpI9l3M" frameborder="0" allowfullscreen data-autoplay></iframe>

위의 코드를 layout.html의  출력하고 싶은 위치에 넣어 주시면 됩니다.

 

그 외에 HTML 5 videos를 출력하는 코드

<video loop controls="false" data-autoplay>
 <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
 <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
</video>

 

Audio를 출력하는 코드

<audio controls="" data-autoplay>
 <source src="img/horse.ogg" type="audio/ogg">
 <source src="img/horse.mp3" type="audio/mpeg">
</audio>

 

[V1.1 특징]

- 원페이지로도 작동

- 상단 메뉴바에 색상 지정가능.(바탕색 투명일때 유용)

- 반응형 메뉴에서 3차메뉴 지원

- 사용자팝업메뉴에 포인트바 표시

- 사용자팝업메뉴에 "레이아웃설정" 타겟이 blank로 출력

   라이믹스의 경우 "관리자페이지"에서 "시스템설정 - 고급설정"에서 "모듈 설정 화면"을 "

 

통합 Web Fonts 애드온 V1.5"은 아직도 등록 대기중입니다.

기다리지는 않았지만 그래도 지치내요...

 

[특징]

- 총 3단계의 상하 페이지로 구성되며, 2단계는 2개의 좌우 슬라이딩 페이지로 구성.(총 4개의 페이지)

- 2-2 페이지에 내용등 작성하지 않으면 출력되지 않음  

- 각 페이지의 배경을 이미지와 색상으로 지정 가능.(아래 이미지에 보이는 색상이 기본 색상)

fp_001.jpg

 

- 첫 페이지의 이미지는 배경 슬라이딩 이미지로도 설정 가능.(총4개의 이미지 지정 가능)

- 각 페이지마다 타이틀, 서브타이틀, content(위젯생성)영역, Html영역의 출력 가능.

- content(위젯생성)영역은 여러 페이지중 한 곳에서만 가능.(출력안함 가능)

- 상단영역과 하단영역의 출력 유무 가능.

- 상단영역에 메뉴버턴과 로고이미지와 검색, 사용자 팝업메뉴(로그인/관리/기타) 출력가능.

- 하단영역에 Copyright와 이메일, 기타문구 출력가능.

- 각 옵션마다 적합한 색상과 크기, 높 낮이 지정 가능.(상하단 바탕색상, 메뉴/버턴/글꼴 색상)img_002.jpg   

- 반응형(모바일) 지원.

- 일반 메뉴바 와 반응형 메뉴바 구분 지원(1024px 기준)

- Html영역(위젯)에 일반형과 다른 반응형코드 작성 가능. 

- 반응형 Menu의 경우 로고문자와 로그인을 지원하며, 2차 메뉴는 드롭메뉴로 작동.

fullpage_01.jpg

 

- 페이지내용이 한 화면을 초과할시 스크롤사용 기능 선택 가능.

- 각종 네비 기능 선택 가능.(상하버턴, 좌우버턴, 페이지버턴등)

- 페이지 Loop기능 선택 가능.(1페이지에서 3페이지로, 3페이지에서 1페이지로)

- SocialXE 모듈설치시 SNS로그인 가능.

fp_003.jpg

 

소스는 아래 fullPage.js 에서 제공 받아서 XE 에서 작동하게끔 수정 / 변형 했습니다.

https://www.alvarotrigo.com/fullPage/

Who's 팔공산

profile

이 世上에서 現在가 가장 중요한 時間이며,
내가 만나고 있는 바로 그 사람이 第一 중요한 사람이며,
同時에 가장 중요한 것은 그 사람에게 善으로서 行하는 것이다.

    자료가 도움이 되었다면 댓글과 평가 부탁합니다.</br> 자료에 대한 궁금한 점은 댓글로 남겨 주시면 성심껏 답변 드립니다.
?
Comment '2'
  • ?
    hani 2019.06.02 21:52
    안녕하세요 만들어주신 레이아웃을 잘 적용하였는데 웹에서 화면이 좁아지거나, 모바일 화면에서 옆에생기는 삼선 버튼이 열리지 않아서 메뉴를 볼 수가 없습니다 ㅠㅠ 레이아웃이 너무 편해서 맘에 드는데 방법이 없을까요?
    펼치기
    접기
  • profile
    팔공산 2019.06.03 19:25

    hani 님에게 달린 댓글

    저는 잘 작동하는데요.
    https://moonhouse.co.kr/zbxe
    스마트폰은 안드로이드고 브라우즈는 크롬입니다.
    펼치기
    접기

  1. 04
    Dec 2018
    01:39

    MH FullPage 레이아웃 V1.1

    마우스 휠 한번 작동시 전체 화면 스크롤되는 FullPage 레이아웃입니다. [Tip] 페이지에 Youtube코드 넣는 방법 <iframe width="560" height="315" src="https://www.youtube.com/embed/qiCVPpI9l3M" frameborder="0" allowfullscreen data-autoplay></iframe> 위의 코드를 layout.html의 출력하고 싶은 위치에 넣어 주시면 ...
    Category레이아웃스킨 Reply2 Views372 Votes0 file
    Read More
  2. 04
    Feb 2019
    11:33

    Accordions Tabs 위젯

    아코디언처럼 각각의 페이지가 하단으로 펼쳐지는 위젯입니다. [특징] 1. 지정한 갯수의 게시물이 탭클릭시 상하로 아코디언처럼 펼쳐집니다. 2. 페이지기능을 적용할 수 있습니다 - ajax 기능으로 작동 3. 썸네일, 타이틀, 내용글, 날짜, 작성자등 모든 기능을 제어할 수 있습니다. 4. 8가지의 칼라셋 적용 - 타이틀과 기타...
    Category위젯 Reply0 Views139 Votes0 file
    Read More
  3. 26
    Dec 2016
    19:58

    XE기본 Xedition레이아웃을 편집이 편리하도록 수정한 버전입니다. 2탄

    XE 1.8 버전대 기본레이아웃인 Xedition을 사용자가 편집이 편리하도록 수정한 최후 버전 https://moonhouse.co.kr/399750 1탄을 먼저 보세요. 화면출력이 너무 길어지고 최후버전인 관계로 따로 리스트 작성합니다. [v6.2 업데이트 내용] 1. 배경이미지 슬라이드 하단에 썸네일기능을 추가 https://moonhouse.co.kr/special...
    Category레이아웃스킨 Reply8 Views711 Votes20 file
    Read More
  4. 04
    Apr 2019
    13:42

    Mh White Layout V1.0

    가장 기본적인 것만 적용한 심플한 흰색 레이아웃입니다. 바탕색은 흰색만 적용하였으며 상단 로그인, 로고, 메뉴 그리고 본문, 하단영역으로 구분되며 상단과 본문의 폭은 조정 가능하며 하단은 전체 폭입니다. 메뉴는 4단까지 가능하며 자체 로그인폼을 지원합니다. 반응형도 심플하게 적용 가능합니다.
    Category레이아웃스킨 Reply0 Views79 Votes0 file
    Read More
  5. 29
    Jul 2018
    23:08

    MH PopUp 위젯 - mh_appoint_popup V2.0(19.03.24)

    MH 트렌스포머 PopUp위젯 V2.0 위젯은 대상 모듈을 지정해서 팝업을 열었다면 mh_appoint_popup 위젯은 대상문서의 번호를 입력하면 팝업으로 출력됩니다. 아무래도 전체 모듈을 지정하는 것 보다 특정 문서를 지정하여 팝업창으로 출력하는 것이 더 유용한 것 같군요. [특징] 1. MH 트렌스포머 PopUp위젯과 두개의 팝업을 ...
    Category위젯 Reply0 Views183 Votes0 file
    Read More
  6. 22
    Feb 2018
    23:52

    MH 슬라이딩 타일 V1.2.1

    예전에 만들었던 MH 슬라이딩 배너 위젯과 썸네일 마우스 Hover시 제목, 내용등 출력 위젯을 혼합해서 MH슬라이딩 타일 위젯을 만들었습니다. [V1.2 수정 사항] - 익스플로러에서 마우스오버시 타이틀과 내용글 나타나지 않는 문제점 수정1) 지정한 갯수의 썸네일이 좌로 이동하면서 출력되며 각 썸네일에 마우스 Hover시 제...
    Category위젯 Reply1 Views292 Votes5 file
    Read More
  7. 07
    Jan 2019
    00:35

    MH LeftMenu 레이아웃 V1.2

    [특징] - Sub메뉴를 좌측 Wing영역에 배치하여 Sub메뉴의 활용도를 높였습니다. - 최대한으로 코드를 단순하게 하고 이미지를 최소화할려고 노력했습니다. - 원본 디자인의 화려한 원색 색상을 가져 왔습니다. - 우측 상단에 슬라이딩기능으로 로그인영역을 배치했습니다. - 우측 Wing영역을 활용할 수 있게 했습니다. + Ads...
    Category레이아웃스킨 Reply0 Views90 Votes0 file
    Read More
  8. 22
    Jul 2018
    00:07

    MH Multi V3.2 업그레이드(18.09.20) - 최신글+썸네일+내용글+댓글

    [V3.3으로 업데이트 되었습니다] https://moonhouse.co.kr/xemy/337307 V2.1 버전 에서 구현하지 못했던 페이지 기능등을 추가 하여 버전업 합니다. [V3.2 특징] 1. sketchbook5게시판 웹진형 스킨추가 - MH sketchbook5 스킨 - 모바일에서 제목과 날짜, 글쓴이 정도만 지정하면 멋진 통합게시판위젯이 출력됩니다.(문하우스...
    Category위젯 Reply9 Views407 Votes10 file
    Read More
  9. 23
    Feb 2019
    23:20

    Url 링크에 아이콘을 달아주는 urllink_external 애드온

    게시글보기 링크문구 바로가기 아이콘 출력하기 팁을 애드온으로 만들어 봤습니다. https://moonhouse.co.kr/xetip/479253 <- 요거 애드온 설정에서 아이콘이 출력될 영역의 ID 나 Class를 지정하시면 그 부분만 아이콘이 출력됩니다. 1. 기본으로는 body 이므로 레이아웃이나 게시글, 페이지글 모든 영역에 적용이 되며 2. ...
    Category애드온 Reply2 Views214 Votes0 file
    Read More
  10. 24
    Nov 2018
    23:15

    MH Multi V3.3 - 최신글+내용글+댓글+썸네일(링크, 줌, Lightbox)

    이전 버전에서 설명을 보고 오시면 편합니다. [주의사항] 페이지기능을 선택했을시 위젯캐시를 주면 페이지기능이 작동을 하지 않습니다. [V3.3 특징] 1. 내용글 세로 칸 수를 지정해서 공간의 여백을 최소화 https://moonhouse.co.kr/463054 2. 마우스 Hover시 배경 색상지정 가능 3. Skin별로 겹쳐지는 images와 css, js ...
    Category위젯 Reply0 Views69 Votes0 file
    Read More
목록
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 18 Next
/ 18
위로
서버에 요청 중입니다. 잠시만 기다려 주십시오...