<![CDATA[
<p>Design vertical menu with CSS   </p><div class="figure-html" data-ke-type="html" data-source="<iframe width="560" height="315" src="https://www.youtube.com/embed/fIq4qyEEsnc?si=nMpR-epHbp04mKI-" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>"><div data-ke-class="article"><iframe width="560" height="315" src="https://www.youtube.com/embed/fIq4qyEEsnc?si=nMpR-epHbp04mKI-" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div></div><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><head></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><title>Vertical menu with CSS</title></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></head></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b><body></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>       <div class="menu"></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>              <ul></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                  <li><a href="#">Home</a></li> </b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                  <li><a href="#">Users</a></li></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                         <ul></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                             <li><a href="#">Add</a></li> </b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                             <li><a href="#">Edid</a></li></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                             <li><a href="#">Delete</a></li> </b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                         </ul></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    </li> </b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <li><a href="#">Web Design</a></li> </b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <li><a href="#">Database</a></li> </b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>                    <li><a href="#">Contact Us</a></li> </b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>             </ul></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b>       </div></b></span>      </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></body></b></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b></html></b></span></p><p> </p><p><span style="color: #ee2323; font-family: 'Noto Serif KR';" data-ke-size="size20"><b>index_html <a style="color: #ee2323;" href="https://codepen.io/" target="_top" class="ke-link"><span>코드펜 홈</span></a></b></span></p><p><span style="color: #ee2323;" data-ke-size="size20"><a style="color: #ee2323;" href="https://codepen.io/berdejitendra/pen/DMpaLm" target="_top" class="ke-link">호버 효과가 뛰어난 순수 CSS3 수직 메뉴</a></span></p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b> <a href="https://codepen.io/berdejitendra/pen/DMpaLm" target="_blank" class="ke-link">https://codepen.io/berdejitendra/pen/DMpaLm</a><br><br><style><br>ul <br>{ <br>margin:0px; <br>padding:0px; <br>list-style-type:none; <br>-webkit-backface-visibility: hidden; backface-visibility: hidden;   <br>} <br>.var_nav <br>{ <br>position:relative; <br>background:#ccc;  <br>width:300px; <br>height:70px; <br>margin-bottom:5px; <br>} <br>.link_bg <br>{ <br> width:70px; <br> height:70px; <br> position:absolute; <br> background:#E01B6A; <br> color:#fff; <br> z-index:2; <br>} <br>.link_bg i <br>{ <br> position:relative; <br>} <br>.link_title <br>{ <br>position:absolute; <br>width:100%; <br>z-index:3; <br>color:#fff; <br>} <br>.link_title:hover .icon <br>{ <br>-webkit-transform:rotate(360deg); <br>-moz-transform:rotate(360deg); <br>-o-transform:rotate(360deg); <br>-ms-transform:rotate(360deg); <br>transform:rotate(360deg);   <br>} <br>.var_nav:hover .link_bg <br>{ <br>width:100%; <br>background:#E01B6A; <br>-webkit-transition: all 0.3s ease-in-out; <br>-moz-transition: all 0.3s ease-in-out; <br>-o-transition: all 0.3s ease-in-out; <br>-ms-transition: all 0.3s ease-in-out; <br>transition: all 0.3s ease-in-out;   <br>} <br>.var_nav:hover a <br>{ <br>font-weight:bold; <br>-webkit-transition:all .5s ease-in-out; <br>-moz-transition:all .5s ease-in-out;  <br>-o-transition:all .5s ease-in-out;  <br>-ms-transition:all .5s ease-in-out; <br> transition:all .5s ease-in-out;   <br>} <br>.icon <br>{ <br>position:relative; <br>width:70px; <br>height:70px; <br>text-align:center; <br>color:#fff; <br>-webkit-transition:all .5s ease-in-out; <br>-moz-transition:all .5s ease-in-out;  <br>-o-transition:all .5s ease-in-out;  <br>-ms-transition:all .5s ease-in-out;    <br>float:left; <br>transition:all .5s ease-in-out;    <br>float:left;   <br>} <br>.icon i{top:22px;position:relative;} <br>a{ <br>display:block; <br>position:absolute; <br>float:left; <br>font-family:arial; <br>color:#fff; <br>text-decoration:none; <br>width:100%; <br>height:70px; <br>text-align:center; <br>} <br>span <br>{ <br>margin-top:25px; <br>display:block; <br>} <br><br><br></style> <br><br><nav> <br>  <UL> <br>   <li class="var_nav"> <br>      <div class="link_bg"></div> <br>      <div class="link_title"> <br>        <div class=icon>  <br>        <i class="icon-mobile-phone icon-2x"></i> <br>        </div> <br>        <a href="#"><span>About Us</span></a> <br>      </div> <br>   </li> <br>   <li class="var_nav"> <br>      <div class="link_bg"></div> <br>      <div class="link_title"> <br>        <div class=icon>  <br>        <i class="icon-lightbulb icon-2x"></i> <br>        </div> <br>        <a href="#"><span>Ideas</span></a> <br>      </div> <br>   </li> <br>   <li class="var_nav"> <br>      <div class="link_bg"></div> <br>      <div class="link_title"> <br>        <div class=icon>  <br>        <i class="icon-wrench icon-2x"></i> <br>        </div> <br>        <a href="#"><span>Services</span></a> <br>      </div> <br>   </li> <br>   <li class="var_nav"> <br>      <div class="link_bg"></div> <br>      <div class="link_title"> <br>        <div class=icon>  <br>        <i class="icon-briefcase icon-2x"></i> <br>        </div> <br>      <a href="#"><span>Marketing</span></a> <br>      </div> <br>   </li> <br>  </UL> <br></nav></b></span></p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p><span style="font-family: 'Noto Serif KR';" data-ke-size="size18"><b> index_CSS tag</b></span></p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p>  Design vertical menu with CSS</p>
<!-- -->
]]>
카페 게시글
♥☞HTML 영상방◈▶
Design vertical menu with CSS
gyun님
추천 0
조회 2
23.12.21 03:09
댓글 4
북마크 번역하기 공유하기 기능 더보기
다음검색
첫댓글 https://www.youtube.com/playlist?list=PLyPq6b9QyJacFe_ftSoTQLHQQoMuaMUz-
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default
https://codepen.io/berdejitendra/pen/DMpaLm
호버 효과가 뛰어난 순수 CSS3 수직 메뉴 https://www.youtube.com/results?search_query=%ED%98%B8%EB%B2%84+%ED%9A%A8%EA%B3%BC%EA%B0%80+%EB%9B%B0%EC%96%B4%EB%82%9C+%EC%88%9C%EC%88%98+CSS3+%EC%88%98%EC%A7%81+%EB%A9%94%EB%89%B4