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

리버티게임(개발), 모두가 만들어가는 자유로운 게임
둘러보기로 이동 검색으로 이동
잔글편집 요약 없음
(레거시 틀과 유사하게 드롭다운 메뉴 버튼 이벤트 처리)
 
(같은 사용자의 중간 판 5개는 보이지 않습니다)
1번째 줄: 1번째 줄:
<!-- 미디어위키 1.41부터 상단 고정 바가 벡터에 생기기 때문에 sticky 요소를 높이 48px부터 시작하게 해야 함 -> 벡터 2022용 소도구에 추가할 것-->
<!-- 벡터 2022부터 상단 고정 바가 벡터에 생기기 때문에 sticky 요소를 높이 48px부터 시작하게 해야 함 -> 벡터 2022용 소도구에 추가할 것-->
<onlyinclude>
<onlyinclude>
{{#css:
{{#css:
5번째 줄: 5번째 줄:
     background-color: #eeffee;
     background-color: #eeffee;
}
}
#docTop {
 
#docTopWithoutHeader {
   position: sticky;
   position: sticky;
   top: 0px;
   top: 0px;
   left: 0%;
   left: 0%;
   right: 0%;
   right: 0%;
   height: 22px;
   height: 64px;
   z-index: 8;
   z-index: 8;
}
}


#docTop .upper {
#docTopWithoutHeader .upper {
   width:30%;
   width:30%;
   text-align:center;
   text-align:center;
}
}


#docTop div span {
#docTopWithoutHeader div span {
     color: #00A500;
     background-color: #00A500;
    color: white;
    height: 24px;
}
}


#docTop div span a {
#docTopWithoutHeader div span a {
     color: inherit;
     color: inherit;
     text-decoration: none;
     text-decoration: none;
29번째 줄: 32번째 줄:
}
}


#docTop span span {
#docTopWithoutHeader .upper span {
     background-color: #eeffee;
    position:relative;
    top: 28px;
     background-color: #EEFFEE;
     color: #00A500;
     color: #00A500;
     overflow-wrap:break-word;
     word-break:keep-all;
    height: 36px;
    border-radius: 0.5rem 0.5rem 0rem 0rem;
    line-break:keep-all;
}
}
 
#docTopWithoutHeader .upper span a {
#docTop span span a {
     color: inherit;
     color: inherit;
    padding: 0.6rem;
     text-decoration: none;
     text-decoration: none;
    line-height: 1;
     font-weight: bold;
     font-weight: bold;
    font-size: 14px;
     display:block;
     display:block;
   
}
}


61번째 줄: 70번째 줄:
#community-link {
#community-link {
   text-align:center;
   text-align:center;
   height:25px;
   height:24px;
}
}


#support-link {
#support-link {
   text-align:center;
   text-align:center;
   height:25px;
   height:24px;
}
}


#community-link #menusubList1 {
#community-link #menusubList1 {
   transition: 0.3s transform linear;
   transition: 0.2s transform linear;
   transform: scale(1, 0);
   transform: scale(1, 0);
   transform-origin: 0% 0%;
   transform-origin: 0% 0%;
78번째 줄: 87번째 줄:
   box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.3);
   box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.3);
   visibility: hidden;
   visibility: hidden;
}
#community-link:hover {
  background-color: white;
  color: #00A500;
}
}


83번째 줄: 97번째 줄:
   visibility: visible;
   visibility: visible;
   transform: scale(1);
   transform: scale(1);
  color: #00A500;
}
}


92번째 줄: 107번째 줄:
   width: 100%;
   width: 100%;
   top: 28px;
   top: 28px;
   box-shadow: 0px 1px 7px rgba(0, 0, 0, 0.3);
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
   visibility: hidden;
   visibility: hidden;
}
#support-link:hover {
  background-color: white;
  color: #00A500;
}
}


99번째 줄: 119번째 줄:
   visibility: visible;
   visibility: visible;
   transform: scale(1);
   transform: scale(1);
  color: #00A500;
}
}


111번째 줄: 132번째 줄:
.dropdown-button a {
.dropdown-button a {
   display:block;
   display:block;
}
@media (max-width: 1000px) {
  #docTopWithoutHeader .upper span a {
    color: inherit;
    padding: 0.2rem;
    text-decoration: none;
    line-height: 1;
    font-weight: bold;
    font-size: 12px;
    display:block;
  }
}
}


}}
}}
<!-- 상단 바입니다.--><!-- 추천, 인기차트, 신규, 카테고리는 각각 대응되는 단락으로 이동해야 합니다. --><!-- 지원/커뮤니티는 visited CSS 이벤트를 사용합니다 -->
<!-- 상단 바입니다.--><!-- 추천, 인기차트, 신규, 카테고리는 각각 대응되는 단락으로 이동해야 합니다. --><!-- 지원/커뮤니티는 visited CSS 이벤트를 사용합니다 -->
<div id="docTop" style="background-color:#00A500;">
<div id="docTopWithoutHeader" style="background-color:#bbeebb;">
<span class="upper" style="display:grid;grid-template-columns:50% 50%;float:left;">
<div style="position:absolute;left:0%;right:0%;top:0px;bottom:100px;display:grid;grid-template-columns:1fr 1fr;">
<span style="position:relative; left:1%; width:98%; border-radius:0.2rem; >[[#인기 게임|인기 게임 차트]]</span>
<span id="community-link" style=" padding:0.1em;">[[#커뮤니티|커뮤니티]]<div id="menusubList1" style="text-align:center;display:grid;grid-template-columns:25% 25% 25% 25%;background-color:#00A500;">
<span style="position:relative; left:1%; width:98%; border-radius:0.2rem;">[[#최고 평가 게임|플레이 추천]]</span>
</span><span class="upper" style="display:grid;grid-template-columns:50% 50%;float:right;">
<span style="position:relative; left:1%; width:98%; border-radius:0.2rem;">[[#카테고리|카테고리]]</span>
<span style="position:relative; left:1%; width:98%; border-radius:0.2rem;">[[#최근 업데이트|최근 업데이트]]</span>
</span>
<div style="position:absolute;left:0%;right:0%;top:22px;bottom:100px;display:grid;grid-template-columns:1fr 1fr;">
<span id="community-link" style="background-color: #bbeebb; padding:0.1em;">[[#커뮤니티|커뮤니티]]<div id="menusubList1" style="text-align:center;display:grid;grid-template-columns:25% 25% 25% 25%;background-color:#00A500;">
<div class="dropdown-button">[[리버티게임:오락실|오락실]]</div> <div class="dropdown-button">[[리버티게임:발전소|발전소]]</div> <div class="dropdown-button">[[리버티게임:토론란|토론란]]</div> <div class="dropdown-button">[[리버티게임:특집 게임|추천 게임 토론]]</div>
<div class="dropdown-button">[[리버티게임:오락실|오락실]]</div> <div class="dropdown-button">[[리버티게임:발전소|발전소]]</div> <div class="dropdown-button">[[리버티게임:토론란|토론란]]</div> <div class="dropdown-button">[[리버티게임:특집 게임|추천 게임 토론]]</div>
</div></span>
</div></span>
<span id="support-link" style="background-color: #bbeebb;padding:0.1em;">[[#지원|지원]]<div id="menusubList2" style="text-align:center;display:grid;grid-template-columns:20% 20% 20% 20% 20%;background-color:#00A500;">
<span id="support-link" style="padding:0.1em;">[[#지원|지원]]<div id="menusubList2" style="text-align:center;display:grid;grid-template-columns:20% 20% 20% 20% 20%;background-color:#00A500;">
<div class="dropdown-button">[[리버티게임:소개|리버티게임 소개]]</div> <div class="dropdown-button">[[리버티게임:길라잡이|길라잡이]]</div> <div class="dropdown-button">[[리버티게임:도움말|도움말]]</div> <div class="dropdown-button">[[리버티게임:도움방|게임 개발 도움방]]</div> <div class="dropdown-button">[[리버티게임:정책과 지침|정책과 지침]]</div>
<div class="dropdown-button">[[리버티게임:소개|리버티게임 소개]]</div> <div class="dropdown-button">[[리버티게임:길라잡이|길라잡이]]</div> <div class="dropdown-button">[[리버티게임:도움말|도움말]]</div> <div class="dropdown-button">[[리버티게임:도움방|게임 개발 도움방]]</div> <div class="dropdown-button">[[리버티게임:정책과 지침|정책과 지침]]</div>
</div>
</div>
</span>
</div>
<div>
<span class="upper" style="display:grid;grid-template-columns:50% 50%;float:left;">
<span style="position:relative; left:1%; width:98%; >[[#인기 게임|인기 게임 차트]]</span>
<span style="position:relative; left:1%; width:98%;">[[#최고 평가 게임|플레이 추천]]</span>
</span><span class="upper" style="display:grid;grid-template-columns:50% 50%;float:right;">
<span style="position:relative; left:1%; width:98%;">[[#카테고리|카테고리]]</span>
<span style="position:relative; left:1%; width:98%;">[[#최근 업데이트|최근 업데이트]]</span>
</span>
</span>
</div>
</div>

2024년 9월 19일 (목) 00:38 기준 최신판