차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:css:css_note:css_horizontal_navbar [2021/03/30 19:08]
emblim98
+++ wiki:css:css_note:css_horizontal_navbar [2023/01/13 18:44] (현재)
@@ 줄 588: / 줄 588: @@
 Safari에는 -webkit- 접두사가 필요합니다 (위의 예 참조).\\
 또한 sticky positioning(고정 위치 지정)이 작동하려면 ''top'', ''right'', ''bottom'' 또는''left'' 중 하나 이상을 지정해야 합니다.\\
+\\
+=====Responsive Topnav=====
+====예제====
+<HTML>
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        body {margin: 0;}
+        ul.topnav {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+            background-color: #333;
+        }
+        ul.topnav li {float: left;}
+        ul.topnav li a {
+            color: white;
+            display: block;
+            text-align: center;
+            padding: 14px 16px;
+            text-decoration: none;
+        }
+        ul.topnav li a:hover:not(.active) {background-color: #111;}
+        ul.topnav li a.active {background-color: #4caf50;}
+        ul.topnav li.right {float: right;}
+        @media screen and (max-width: 600px) {
+            ul.topnav li.right,
+            ul.topnav li {float: none;}
+        }
+    </style>
+</head>
+<body>
+    <ul class="topnav">
+        <li><a class="active" href="#home">Home</a></li>
+        <li><a href="#news">News</a></li>
+        <li><a href="#contact">Contact</a></li>
+        <li class="right"><a href="#about">About</a></li>
+    </ul>
+    <div>
+        <h2>Responsive Topnav Example</h2>
+        <p>This example use media queries to stack the topnav vertically when the screen size is 600px or less.</p>
+        <p>You will learn more about media queries and responsive web design later in out CSS Tutorial.</p>
+        <h4>Resize the browser window to see the effect.</h4>
+    </div>
+</body>
+</html>
+</HTML>
+\\
+=====Responsive Sidenav=====
+====예제====
+<HTML>
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        body {margin: 0;}
+        ul.sidenav {
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+            width: 25%;
+            background-color: #f1f1f1;
+            position: fixed;
+            height: 100%;
+            overflow: auto;
+        }
+        ul.sidenav li a {
+            display: block;
+            color: #000;
+            padding: 8px 16px;
+            text-decoration: none;
+        }
+        ul.sidenav li a.active {
+            background-color: #4caf50;
+            color: white;
+        }
+        ul.sidenav li a:hover:not(.active) {
+            background-color: #555;
+            color: white;
+        }
+        div.content {
+            margin-left: 25%;
+            padding: 1px 16px;
+            height: 1000px;
+        }
+        @media screen and (max-width: 900px) {
+            ul.sidenav {
+                width: 100%;
+                height: auto;
+                position: relative;
+            }
+            ul.sidenav li a {
+                float: left;
+                padding: 15px;
+            }
+            div.content {
+                margin-left: 0;
+            }
+        }
+        @media screen and (max-width: 400px) {
+            ul.sidenav li a {
+                text-align: center;
+                float: none;
+            }
+        }
+    </style>
+</head>
+<body>
+    <ul class="sidenav">
+        <li><a class="active" href="#home">Home</a></li>
+        <li><a href="#news">News</a></li>
+        <li><a href="#contact">Contact</a></li>
+        <li><a href="#about">About</a></li>
+    </ul>
+    <div class="content">
+        <h2>Responsive Sidenav Example</h2>
+        <p>This example use media queries to transform the sidenav to a top navigation bar when the screen size is 900px or less.</p>
+        <p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
+        <p>You will learn more about media queries and responsive web design later in our css Tutorial.</p>
+        <h4>Resize the browser window to see the effect.</h4>
+    </div>
+</body>
+</html>
+</HTML>
+\\
+=====Dropdown Navbar=====
+네비게이션 바 내부에 드롭다운 메뉴를 추가하는 방법.\\
+====예제=====
+<HTML>
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    ul {
+      list-style-type: none;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      background-color: #333;
+    }
+    li {float: left;}
+    li a, .dropbtn {
+      display: inline-block;
+      color: white;
+      text-align: center;
+      padding: 14px 16px;
+      text-decoration: none;
+    }
+    li a:hover, .dropdown:hover .dropbtn {background-color: red;}
+    li.dropdown {display: inline-block;}
+    .dropdown-content {
+      display: none;
+      position: absolute;
+      background-color: #f9f9f9;
+      min-width: 160px;
+      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+      z-index: 1;
+    }
+    .dropdown-content a {
+      color: black;
+      padding: 12px 16px;
+      text-decoration: none;
+      display: block;
+      text-align: left;
+    }
+    .dropdown-content a:hover {background-color: #f1f1f1;}
+    .dropdown:hover .dropdown-content {display: block;}
+  </style>
+</head>
+<body>
+  <ul>
+    <li><a href="#home">Home</a></li>
+    <li><a href="#news">News</a></li>
+    <li class="dropdown">
+      <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
+      <div class="dropdown-content">
+        <a href="#">Link 1</a>
+        <a href="#">Link 2</a>
+        <a href="#">Link 3</a>
+      </div>
+    </li>
+  </ul>
+  <h3>Dropdown Menu inside a navigation Bar</h3>
+  <p>Hover over the "Dropdown" link to see the dropdown menu.</p>
+</body>
+</html>
+</HTML>
 {{tag>오션 CSS Horizontal Navbar}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구