틀:리버티게임 메뉴: 두 판 사이의 차이

2024년 10월 10일 (목) 13:06 기준 최신판

리버티게임에서 사용되는 서브 네비게이션입니다.

하위 문서

@@ 1번째 줄: / 1번째 줄: @@
-{{rand|<onlyinclude>{{#css:{{rand|{{rand|.lnb {{{rand|  width: 100%;{{rand|  display: flex;{{rand|}{{rand|{{rand|.lnb .menuItem {{{rand|  text-align: center;{{rand|  display: inline-block;{{rand|  flex: 1;{{rand|  list-style: none;{{rand|  padding: 0.2em 0em;{{rand|  transition: 0.2s background linear;{{rand|  background: #00A500;{{rand|  position: relative;{{rand|  color: white;{{rand|  text-decoration: none;{{rand|  transition: 0.2s color linear;{{rand|  width: 100%;{{rand|  height: 100%;{{rand|  display: block;{{rand|  font-weight: bold;{{rand|}{{rand|{{rand|.lnb .menuItem.active {{{rand|  height: 110%;{{rand|}{{rand|{{rand|.lnb .menuItem:first-child {{{rand|}{{rand|{{rand|.lnb .menuItem:last-child {{{rand|}{{rand|{{rand|.lnb .menuItem a {{{rand|  color: white;{{rand|  text-decoration: none;{{rand|  transition: 0.2s color linear;{{rand|  width: 100%;{{rand|  height: 100%;{{rand|  display: block;{{rand|  font-weight: bold;{{rand|}{{rand|{{rand|.lnb .menuItem:hover {{{rand|  background: white;{{rand|  color: hsl(220, 60%, 50%);{{rand|}{{rand|{{rand|.lnb .menuItem:hover a {{{rand|  color: hsl(220, 60%, 50%);{{rand|}{{rand|{{rand|.menusubList{{{rand|  z-index:10;{{rand|}{{rand|{{rand|.menusubListNav:hover .menusubList {{{rand|  visibility: visible;{{rand|  transform: scale(1){{rand|}{{rand|{{rand|.menusubListNav .menusubList {{{rand|  transition: 0.3s transform linear;{{rand|  transform: scale(1, 0);{{rand|  transform-origin: 50% 0%;{{rand|  position: absolute;{{rand|  width: 100%;{{rand|  top: 1.9em;{{rand|  box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.3);{{rand|  visibility: hidden;{{rand|}{{rand|{{rand|.menusubList div.menudivstItem {{{rand|  border-left: 0.2em hsl(220, 60%, 50%) solid;{{rand|  background: white;{{rand|  color: black;{{rand|  padding: 0.5em;{{rand|  box-sizing: border-box;{{rand|  text-decoration: none;{{rand|  width: 100%;{{rand|  height: 0%;{{rand|  display: block;{{rand|  font-weight: initial;{{rand|  text-align: initial;{{rand|  transition: 0.2s background linear;{{rand|}{{rand|{{rand|.menudivstItem>a {{{rand|  display: none!important;{{rand|}{{rand|{{rand|.menusubList div.menudivstItem.child {{{rand|  padding-left: 0.9em;{{rand|  border-left: 0.4em hsl(220, 60%, 50%) solid;{{rand|}{{rand|{{rand|.menusubList div.menudivstItem:hover {{{rand|  background: hsl(220, 100%, 95%);{{rand|}{{rand|{{rand|@media (max-width: 500px) {{{rand|  .lnb {{{rand|    flex-direction: column;{{rand|    background: hsl(220, 60%, 50%);{{rand|  }{{rand|  .lnb .menuItem:first-child {{{rand|    border-radius: 0.6em 0.6em 0 0;{{rand|  }{{rand|  .lnb .menuItem:last-child {{{rand|    border-top-right-radius: 0em;{{rand|  }{{rand|  .menusubListNav:hover .menusubList {{{rand|    display: block;{{rand|    position: relative;{{rand|    top: 0;{{rand|  }{{rand|}{{rand|{{rand|}}{{#vardefine:gameListPage|리버티게임:게임 목록}}<div class="lnb">{{rand|	<li class="menuItem active">[[리버티게임:대문|대문]]</li>{{rand|	<li class="menuItem menusubListNav">게임 목록{{rand|		<div class="menusubList">{{rand|			<div class="menudivstItem">{{linkget| {{#var:gameListPage}} |어드벤처 게임|get=cat=fulladv}}</div>{{rand|			<div class="menudivstItem child">{{linkget| {{#var:gameListPage}} |어드벤처|get=cat=adv}}</div>{{rand|			<div class="menudivstItem child">{{linkget| {{#var:gameListPage}} |도시·마을|get=cat=liv}}</div>{{rand|			<div class="menudivstItem child">{{linkget| {{#var:gameListPage}} |탈출 게임|get=cat=esc}}</div>{{rand|			<div class="menudivstItem child">{{linkget| {{#var:gameListPage}} |철도교통 게임|get=cat=ral}}</div>{{rand|			<div class="menudivstItem child">{{linkget| {{#var:gameListPage}} |도로교통 게임|get=cat=rod}}</div>{{rand|			<div class="menudivstItem child">{{linkget| {{#var:gameListPage}} |낚시 게임|get=cat=nax}}</div>{{rand|			<div class="menudivstItem">{{linkget| {{#var:gameListPage}} |액션 게임|get=cat=act}}</div>{{rand|			<div class="menudivstItem">{{linkget| {{#var:gameListPage}} |슈팅 게임|get=cat=sht}}</div>{{rand|			<div class="menudivstItem">{{linkget| {{#var:gameListPage}} |퍼즐 게임|get=cat=puz}}</div>{{rand|			<div class="menudivstItem">{{linkget| {{#var:gameListPage}} |퀴즈 게임|get=cat=qiz}}</div>{{rand|			<div class="menudivstItem">{{linkget| {{#var:gameListPage}} |보드 게임|get=cat=brd}}</div>{{rand|			<div class="menudivstItem">{{linkget| {{#var:gameListPage}} |음악 게임|get=cat=mus}}</div>{{rand|			<div class="menudivstItem">{{linkget| {{#var:gameListPage}} |멀티플레이 게임|get=cat=mlt}}</div>{{rand|			<div class="menudivstItem">{{linkget| {{#var:gameListPage}} |캠페인 게임|get=cat=cpn}}</div>{{rand|			<div class="menudivstItem">{{linkget| {{#var:gameListPage}} |예언 게임|get=cat=prd}}</div>{{rand|			<div class="menudivstItem">{{linkget| {{#var:gameListPage}} |랜덤 게임|get=cat=rnd}}</div>{{rand|			<div class="menudivstItem">{{linkget| {{#var:gameListPage}} |시간 낭비하기|get=cat=wst}}</div>{{rand|			<div class="menudivstItem">{{linkget| {{#var:gameListPage}} |전체 목록 보기|get=cat=full}}</div>{{rand|		</div>{{rand|	</li>{{rand|	<li class="menuItem menusubListNav">도움말{{rand|		<div class="menusubList">{{rand|			<div class="menudivstItem">{{linkget|리버티게임:도움말|목차}}</div>{{rand|		        <div class="menudivstItem child">{{linkget|리버티게임:소개|리버티게임 소개}}</div>{{rand|                        <div class="menudivstItem child">{{linkget|리버티게임:길라잡이|길라잡이}}</div>{{rand|			<div class="menudivstItem child">{{linkget|리버티게임:게임 만들기|게임 만들기}}</div>{{rand|			<div class="menudivstItem">{{linkget|리버티게임:정책과 지침|정책과 지침}}</div>{{rand|			<div class="menudivstItem child">{{linkget|리버티게임:세 원칙|세 원칙}}</div>{{rand|                </div>{{rand|        </li>{{rand|	<li class="menuItem menusubListNav">커뮤니티{{rand|		<div class="menusubList">{{rand|			<div class="menudivstItem">{{linkget|리버티게임:오락실|오락실}}</div>{{rand|			<div class="menudivstItem">{{linkget|리버티게임:토론란|토론란}}</div>{{rand|			<div class="menudivstItem">{{linkget|리버티게임:발전소|발전소}}</div>{{rand|			<div class="menudivstItem">{{linkget|리버티게임:특집 게임|특집 게임 토론}}</div>{{rand|	</li></div></onlyinclude>{{rand|{{rand|리버티게임에서 사용되는 서브 네비게이션입니다.{{rand|[[분류:대문에 노출되는 틀]]
+<onlyinclude>{{#css:
+.lnb {
+  width: 100%;
+  display: flex;
+}
+ul.lnb, ul.menusubList {
+  margin: 0;
+}
+.lnb .menuItem {
+  text-align: center;
+  display: inline-block;
+  flex: 1;
+  list-style: none;
+  padding: 0.2em 0em;
+  transition: 0.2s background linear;
+  background: #00A500;
+  position: relative;
+  color: white;
+  text-decoration: none;
+  transition: 0.2s color linear;
+  width: 100%;
+  height: 100%;
+  display: block;
+  font-weight: bold;
+}
+.lnb .menuItem.active {
+  height: 110%;
+}
+.lnb .menuItem:first-child {
+}
+.lnb .menuItem:last-child {
+}
+.lnb .menuItem a, .lnb .menuItem .menusubLabel {
+  color: white;
+  text-decoration: none;
+  transition: 0.2s color linear;
+  width: 100%;
+  height: 100%;
+  display: block;
+  font-weight: bold;
+}
+.lnb .menuItem:hover {
+  background: white;
+}
+.lnb .menuItem:hover a, .lnb .menuItem:hover .menusubLabel {
+  color: #00A500;
+}
+.menusubList{
+  z-index:10;
+}
+.menusubListNav:hover .menusubList {
+  visibility: visible;
+  transform: scale(1)
+}
+.menusubListNav .menusubList {
+  transition: 0.3s transform linear;
+  transform: scale(1, 0);
+  transform-origin: 50% 0%;
+  position: absolute;
+  width: 100%;
+  top: 1.9em;
+  box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.3);
+  visibility: hidden;
+}
+.menusubList .menusubItem {
+  border-left: 0.2em #00A500 solid;
+  background: white;
+  color: black;
+  box-sizing: border-box;
+  text-decoration: none;
+  width: 100%;
+  height: 0%;
+  display: block;
+  font-weight: initial;
+  text-align: initial;
+  transition: 0.2s background linear;
+  margin-bottom: 0;
+}
+.menusubList .menusubItem a {
+  padding: 0.5em !important;
+}
+.menusubItem {
+  list-style: none;
+}
+.menusubItem>a {
+  display: none!important;
+}
+.menusubList .menusubItem.child {
+  border-left: 0.4em #00A500 solid;
+}
+.menusubList .menusubItem.child a {
+  padding-left: 0.9em;
+}
+.menusubList .menusubItem:hover {
+  background: #E5FFEE;
+}
+@media (max-width: 500px) {
+  .lnb {
+    flex-direction: column;
+    background: #00A500;
+  }
+  .menusubListNav:hover .menusubList {
+    display: block;
+    position: relative;
+    top: 0;
+  }
+}
+}}{{#vardefine:gameListPage|리버티게임:게임 목록}}<ul class="lnb" role="navigation">
+	<li class="menuItem active" role="menuitem">[[리버티게임:대문|대문]]</li>
+	<li class="menuItem menusubListNav">
+        <span class="menusubLabel" role="menuitem" aria-haspopup="menu">게임 목록</span>
+		<ul class="menusubList" role="menu" aria-label="게임 목록">
+			<li class="menusubItem" role="menuitem">{{linkget|리버티게임:게임 목록|배포 중인 게임|색=#00A500}}</li>
+			<li class="menusubItem" role="menuitem">{{linkget|리버티게임:편집 초심자용 추천 게임|초보 개발자용 편집 개방 게임|색=#00A500}}</li>
+			<li class="menusubItem" role="menuitem">{{linkget|:분류:백괴클래식|백괴클래식|색=#00A500}}</li>
+			<li class="menusubItem" role="menuitem">{{linkget|리버티게임:저장소|저장소|색=#00A500}}</li>
+		</ul>
+	</li>
+	<li class="menuItem menusubListNav">
+        <span class="menusubLabel" role="menuitem" aria-haspopup="menu">도움말</span>
+		<ul class="menusubList" role="menu" aria-label="도움말">
+			<li class="menusubItem" role="menuitem">{{linkget|리버티게임:도움말|목차|색=#00A500}}</li>
+			<li class="menusubItem child" role="menuitem">{{linkget|리버티게임:길라잡이|길라잡이|색=#00A500}}</li>
+			<li class="menusubItem child" role="menuitem">{{linkget|리버티게임:게임 만들기|게임 만들기|색=#00A500}}</li>
+			<li class="menusubItem" role="menuitem">{{linkget|리버티게임:정책과 지침|정책과 지침|색=#00A500}}</li>
+			<li class="menusubItem child" role="menuitem">{{linkget|리버티게임:세 원칙|세 원칙|색=#00A500}}</li>
+        </ul>
+    </li>
+	<li class="menuItem menusubListNav">
+        <span class="menusubLabel" role="menuitem" aria-haspopup="menu">커뮤니티</span>
+		<ul class="menusubList" role="menu" aria-label="커뮤니티">
+			<li class="menusubItem" role="menuitem">{{linkget|리버티게임:오락실|오락실|색=#00A500}}</li>
+			<li class="menusubItem" role="menuitem">{{linkget|리버티게임:토론란|토론란|색=#00A500}}</li>
+			<li class="menusubItem" role="menuitem">{{linkget|리버티게임:발전소|발전소|색=#00A500}}</li>
+			<li class="menusubItem" role="menuitem">{{linkget|리버티게임:추천 게임|추천 게임 토론|색=#00A500}}</li>
+			<li class="menusubItem" role="menuitem">{{linkget|리버티게임:도움방|게임제작도움방|색=#00A500}}</li>
+        </ul>
+	</li>
+</ul></onlyinclude>
+리버티게임에서 사용되는 서브 네비게이션입니다.
+== 하위 문서 ==
+* [[/sticky|Sticky Display 속성 적용 버전]]
+* [[/2024|2024년형 대문 전용 버전]]
+[[분류:대문에 노출되는 틀]]